CSS

Tool/App

素材が無制限にDL可能な海外テンプレートサイトenvatoとは?

Envato(エンバト)という、世界で非常に有名な超お洒落なテンプレート(素材)を多数取り揃えた海外のサービスをご存知でしょうか?Envato(エンバト)には、HTML、WordPressテーマ、デザイン、動画、システムなど、様々なテンプレ...
Programming

【Sass】分割した複数のスタイルシートをまとめる(@import)方法

今回はSassを使用する一番の利点とも言えるファイルの分割記述について紹介します。Sassではファイルを分割して、後で一つのスタイルシートにまとめる技法があります。それを「Partials」と言います。機能別やレイアウト別にSaccファイルを作成することで従来より非常に見通しのよいコードを記述する事ができ便利な機能になっていますので是非習得して下さい。
Programming

横からスライドするドロワーメニュー(ハンバーガーメニュー)のテンプレート

この記事では、コピペで作れるドロワーナビ(ハンバーガーメニュー)のテンプレートを紹介します。ドロワーナビとは、以下のように「三」型のボタンをクリックすると上下左右の何からコンテンツが現れるUXデザインです。そこにメニューがあると「ドロワーメニュー」と言われます。スマホサイトでは多く採用されているデザインですので、今後の制作では必須の技術です。また別名で「ハンバーガーメニュー」と言われることが多いですので合わせて覚えておきましょう。
Programming

【Scssの書き方:後編】@mixinと変数を理解して超効率化!!

今回は、Scssを利用する最大のメリットである@mixinと変数を解説します。これらを理解すれとCSSのみを使ってた時と比べて超効率的にコーディングを進める事が出来るため非常に楽になります。ただ制作会社案件でが割と必須な条件になってる場合もあるので何にしても早めにマスターしておきましょう。
Programming

【Scssの書き方:前編】入れ子構造など基本的な扱い方と考え方

今回は、SCSSの書き方について前編後編に分けて初心者にも分かりやすく詳しく説明していきます。今回の記事を一通り理解出来れば以下のようなコードを書けるようになります。学習時間は約3時間程度で済むレベルです。その割にかなり重宝される技術なので必ずマスターしましょう。
Programming

VS Codeで簡単にSassの環境を作成する方法(Live Sass Compiler)

今回は、Visual Studio Code(VSコード)で超簡単にScssとSassの環境を作成する方法を紹介します。WEB制作系の勉強をしている人はSCSSの技術は必須になってきます。しかしその環境作成で挫折する人が多いのが現状です。そんな時は、今回紹介する方法で超簡単に環境作成しましょう。
Programming

BootstrapとGrid-templateの組み合わせが超万能で最強【コピペレイアウト】

今回はBootstrapとGrid-templateを組み合わせることで出来るレスポンシブ対応レイアウトが万能すぎて最強だと思ったので紹介します。基本パターンのみの紹介にしますがコピペで使用して頂いてOKです。WEB制作の初期の段階でレイアウト作成を簡単に済ませたいと考えている人は是非活用下さい。
Programming

Bootstrapのグリッドシステムの使い方を解説【初心者向け】

今回はBootstrapのレイアウト作成技法であるGrid System(グリッドシステム)についてを初心者の方にも分かりやすく解説していきます。
Programming

Bootstrapで初めに覚えるべき頻繁に使用するクラス【m-.p-.mx-.w-.h-など】

今回はBootstrapのclass(クラス)の中で最も頻繁に使用するものをいくつか紹介します。これらのクラスを初めに覚えてしまえば、レイアウトで悩むことはありません。ぜひ参考にして下さい。
Programming

Bootstrapとは?初心者は必ず覚えるべき基本的な使い方の解説

今回はWEB制作でよく使用される「Bootstrap」と言われるものについての説明と使い方の解説をします。WEB制作のリアルな現場ではBootstrapをかなり多用します。WEB制作の経験が浅い方や、これからWEB制作系の仕事をしたいって方は必ず覚えておいた方が良い事です。
Programming

スクロール後にヘッダー固定するグロナビメニューの作り方【jQuery】

今回の記事では、jQueryを使って画面を少しスクロールしたらヘッダーに固定されるグローバルナビケーションメニューの作成の仕方を紹介します。(コピペOK)jQueryを使ってヘッダー固定をすると、スクロールした時にカクっとズレが応じる事があります。その対処法も一緒に説明します。更にアンカーリンクをクリックした後に滑らかにスクロールする「スムーススクロール」の実装方法も紹介します。もし悩んでいるのでしたら参考にして下さい。
WEB

【2021年】IEの対応状況をまとめてみました

今回の記事では有名な言語やフレームワークでの2020年以降のIE対応状況についてまとめています。是非参考にして下さい。今回の記事では、有名な言語やフレームワークでのIE対応状況についてまとめみました。是非参考にして下さい。