Sassの勉強をしました。その内容をメモとして残します。Sassの入門的な内容について書きます。 ネスト 変数 mixin mixinに引数を渡す & 四則演算 CSSのcalc関数 import ネスト <div class="header"> <div class="log"></div> <div class="tagline"></div> <div class="menu"> <ul> <li><a href="">メニュー1</a></li> <li><a href="">メニュー2</a></li> <li><a href="">メニュー3</a></li></ul></div></div>

とあるSVGを自分のPCで表示したかったのですが、SCSSを使っていたのでそのままでは表示されませんでした。SCSSをCSSに変換する必要があるということなので、Sassについて調べました。この記事では、Sassについて調べた内容と始め方について簡単に書きます。 …

overflowプロパティの基本的な使い方について書きます。overflowプロパティは、要素の内容が表示領域に収まらない場合に、はみ出した部分をどのように表示するのかを指定するプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕…

CSSの「コメントの役割」と「コードの視認性」について書きます。まず、コメントの役割を再確認します。その上で、コメントをデザイン化してコードを読みやすくしていくことを考えます。 コメントの役割 CSSコードの視認性 コメントのデザイン化 CSSが煩雑に…

box-shadowプロパティの基本的な使い方について書きます。box-shadowプロパティは、要素に影を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕方 box-shadowプロパティの基本情報 サンプルコード 表示例 使用例 まと…

text-shadowプロパティの基本的な使い方について書きます。text-shadowプロパティは、テキスト(文字列)に影を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕方 text-shadowプロパティの基本情報 サンプルコード 表示…

box-sizingプロパティの基本的な使い方について書きます。box-sizingプロパティは、要素の幅と高さをどのように計算するのかを設定するプロパティです。つまり、要素の幅と高さにパディングとボーダーを含めるか含めないかを指定します。具体的な書き方は、…

border-radiusプロパティの基本的な使い方について書きます。border-radiusプロパティは、要素の角を丸くするプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕方 border-radiusプロパティの基本情報 サンプルコード 4つの角…

borderプロパティの基本的な使い方について書きます。borderプロパティは、要素に枠線を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕方 borderプロパティの基本情報 サンプルコード 表示例 まとめ 記述の仕方 /* …

z-indexの使い方について書いています。z-indexで、要素の重なり順を指定します。「position」とセットで使います。 記述の仕方 下準備 表示例 z-indexで重なり順を指定する 表示例 まとめ 記述の仕方 /* 記述例 */ セレクタ名{ z-index: 数値; } z-indexで…

リストのCSSについて、まとめています。リストの先頭に表示される"黒丸"や"数字"のことをマーカーと言います。マーカーの種類や位置を変えることができます。 list-style-type 表示例 list-style-image 表示例 list-style-position 表示例 list-style 参考サ…

aタグのCSSについて、基本的なことに絞って書いています。 リンクの下線を消す マウスカーソルの種類 aタグの疑似クラス リンクの下線を消す aタグは、デフォルトで下線が付いています。下線を表示したくない場合は、text-decoration: none;を指定します。 <a href="https://shiroyuki2020.hatenablog.com/"></a>…

CSSでは色の指定方法がいくつかあります。その方法について書きます。

CSSでアニメーションさせる方法について書きました。JavaScriptを利用してアニメーションさせる方法も書いています。

CSS入門の段階でつまずきそうなところについて書きました。スタイルが反映されないときは、記事で挙げた点を確認してください。

CSS入門です。CSSの優先度について書いています。少し難しい内容かもしれませんが、使えるようになればCSSを味方につけられます。

CSSの入門です。セレクタの種類と書き方について書いています。CSS入門で押さえておきたいセレクタの種類3つとセレクタの書き方についてご紹介します。

CSSの入門です。CSSを記述する場所について書いています。CSSを記述する場所は3種類あります。それぞれの違いを理解して使い分けます。

CSSの入門です。HTMLで作った文書構造にCSSでスタイルを定義します。CSSとはから始めます。