HTML/CSS

HTML/CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像のトリミングが出来るobject-fitの使い方(IE非対応)

今回はCSSのみを使用して画像のトリミングが出来るobject-fitというプロパティを紹介します。このプロパティを使用すれば、一々ちょうど良いサイズに画像をトリミングしてからアップロードする必要が無くなり、WEB上に綺麗に配置する事出来る様になります。
HTML/CSS

【OGP設定】SNSシェア時に綺麗な見た目で表示する方法

OGPという設定をするとSNSシェア時に綺麗な見た目で表示する事が出来ます。OGPとはWEBサイトをSNSにシェアした時にカード型の綺麗な見た目で共有する事が出来る様になる仕組みです。 OGP設定がされていないページのURLをSNSに貼り付けてもURLの文字列しか共有出来ません。反対に設定がされていると以下の様な見た目で分かりやすい形で共有出来ます。
HTML/CSS

任意のページを検索結果から削除する方法

今回は作成したWEBページを検索結果に表示させない、もしくは既に検索結果に表示されているページを削除する方法を紹介します。
HTML/CSS

CSSのfloatで要素を横並びにする方法

今回はCSSのfloatプロパティについて解説していきます。WEB制作の現場でも使用する事が非常に多いので必ずマスターしておきましょう。
HTML/CSS

アンカーリンクでジャンプした時の着地がずれる場合の解決法

今回はHTML/CSSでアンカーリンクを付けたが、ジャンプの着地地点が若干ずれてしまった場合の修正の仕方を紹介します。
タイトルとURLをコピーしました