HTML/CSS【Sass】分割した複数のスタイルシートをまとめる(@import)方法
今回はSassを使用する一番の利点とも言えるファイルの分割記述について紹介します。Sassではファイルを分割して、後で一つのスタイルシートにまとめる技法があります。それを「Partials」と言います。機能別やレイアウト別にSaccファイルを作成することで従来より非常に見通しのよいコードを記述する事ができ便利な機能になっていますので是非習得して下さい。
CSS
HTML/CSS
Coding横からスライドするドロワーメニュー(ハンバーガーメニュー)のテンプレート
この記事では、コピペで作れるドロワーナビ(ハンバーガーメニュー)のテンプレートを紹介します。ドロワーナビとは、以下のように「三」型のボタンをクリックすると上下左右の何からコンテンツが現れるUXデザインです。そこにメニューがあると「ドロワーメニュー」と言われます。スマホサイトでは多く採用されているデザインですので、今後の制作では必須の技術です。また別名で「ハンバーガーメニュー」と言われることが多いですので合わせて覚えておきましょう。
HTML/CSS【Scssの書き方:後編】@mixinと変数を理解して超効率化！！
今回は、Scssを利用する最大のメリットである@mixinと変数を解説します。これらを理解すれとCSSのみを使ってた時と比べて超効率的にコーディングを進める事が出来るため非常に楽になります。ただ制作会社案件でが割と必須な条件になってる場合もあるので何にしても早めにマスターしておきましょう。
HTML/CSS【Scssの書き方:前編】入れ子構造など基本的な扱い方と考え方
今回は、SCSSの書き方について前編後編に分けて初心者にも分かりやすく詳しく説明していきます。今回の記事を一通り理解出来れば以下のようなコードを書けるようになります。学習時間は約3時間程度で済むレベルです。その割にかなり重宝される技術なので必ずマスターしましょう。
HTML/CSSVS Codeで簡単にSassの環境を作成する方法（Live Sass Compiler）
今回は、Visual Studio Code（VSコード）で超簡単にScssとSassの環境を作成する方法を紹介します。WEB制作系の勉強をしている人はSCSSの技術は必須になってきます。しかしその環境作成で挫折する人が多いのが現状です。そんな時は、今回紹介する方法で超簡単に環境作成しましょう。
CodingBootstrapとGrid-templateの組み合わせが超万能で最強【コピペレイアウト】
今回はBootstrapとGrid-templateを組み合わせることで出来るレスポンシブ対応レイアウトが万能すぎて最強だと思ったので紹介します。基本パターンのみの紹介にしますがコピペで使用して頂いてOKです。WEB制作の初期の段階でレイアウト作成を簡単に済ませたいと考えている人は是非活用下さい。
HTML/CSSBootstrapのグリッドシステムの使い方を解説【初心者向け】
今回はBootstrapのレイアウト作成技法であるGrid System（グリッドシステム）についてを初心者の方にも分かりやすく解説していきます。
HTML/CSSBootstrapで初めに覚えるべき頻繁に使用するクラス【m-.p-.mx-.w-.h-など】
今回はBootstrapのclass（クラス）の中で最も頻繁に使用するものをいくつか紹介します。これらのクラスを初めに覚えてしまえば、レイアウトで悩むことはありません。ぜひ参考にして下さい。
HTML/CSSBootstrapとは？初心者は必ず覚えるべき基本的な使い方の解説
今回はWEB制作でよく使用される「Bootstrap」と言われるものについての説明と使い方の解説をします。WEB制作のリアルな現場ではBootstrapをかなり多用します。WEB制作の経験が浅い方や、これからWEB制作系の仕事をしたいって方は必ず覚えておいた方が良い事です。
Programmingスクロール後にヘッダー固定するグロナビメニューの作り方【jQuery】
今回の記事では、jQueryを使って画面を少しスクロールしたらヘッダーに固定されるグローバルナビケーションメニューの作成の仕方を紹介します。（コピペOK）jQueryを使ってヘッダー固定をすると、スクロールした時にカクっとズレが応じる事があります。その対処法も一緒に説明します。更にアンカーリンクをクリックした後に滑らかにスクロールする「スムーススクロール」の実装方法も紹介します。もし悩んでいるのでしたら参考にして下さい。