プロパティと値の種類

セレクタにさまざまな命令を出すためのプロパティと値の種類を紹介します。

レイアウトをする

display:flex

要素と要素を横に並べるためのプロパティ・値です。
横並びにしたい要素自体に命令を出すのではなく、その要素の親要素に指定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

justify-content

display:flexを指定して横並びにした要素に対して、水平方向の揃え位置を指定するプロパティです。
値には以下のものがあります

• :flex-start　　　　　 →コンテンツの揃え位置を起点に指定する（通常左端に配置）
• :flex-end　　　　　 →コンテンツの揃え位置を終点に指定する（通常右端に配置）
• :center　　　　　　 →親要素の幅に対して中央に揃える（通常左右均等に配置）
• :space-between　　 →親要素の幅の中で余白を含む均等配置
• :space-around　　　→親要素の幅の中で余白を含む均等配置（起点と終点にも均等に余白がつく）

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

align-items

display:flexを指定して横並びにした要素に対して、垂直方向の揃え位置を指定するプロパティです。
値には以下のものがあります

• :flex-start　　　→開始位置に揃える
• :center　　　　 →中央に揃える
• :flex-end　　　 →終了位置に揃える

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

※注意
align-itemsの命令を指定しないと、flexで並列に並ぶ要素の高さは 「一番高いもの、または親要素の高さ」に自動的に伸縮します。
テキスト同士を並列に並べる場合問題はありませんが、テキストと画像などを並べる場合、画像の高さが伸縮して比率がおかしくなってしまうので注意しましょう。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

flex-direction

display:flexを指定して横並びにした要素に対して、どの方向に並べるかを指定することができます。
値は下記のものがあります

• :row　　　　　　　→左から右に揃える
• :row-reverse　　　 →右から左に揃える
• :column　　　　　 →上から下に揃える
• :column-reverse　  →下から上に揃える

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

flex-wrap

display:flexを指定して横並びにした要素に対して、1行に並べて配置するか、複数行に折り返して配置するかを指定することができます。
値は下記のものがあります

• :wrap　　　　  →親要素の幅をコンテンツが超えたら折り返す
• :nowrap　　　  →折り返さない
• :wrap-reverse　→親要素の幅をコンテンツが超えたら折り返し、行の並び順が入れ替わる

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

display:flexをゲーム感覚で勉強できるツールがあります🐸
参考：https://flexboxfroggy.com/#ja

位置を指定する

position

要素の位置を任意の場所に指定したいときに使うプロパティです。よく使われるポイントとしては、「トップに戻るボタン」が挙げられます。
値には以下のものがあります。

• :static　　　→初期値の状態、位置は変更されない
• :relative　　→相対的な配置場所を決める
• :absolute　  →絶対的な配置場所を決める
• :fixed　　　→画面の指定の場所に固定する

上記で位置の基準を決めた後、どこに配置したいのか基準からの距離を指定します。
基本的に上下・左右どちらか2点から指定します。

• top:数値　　　　→上からの距離
• bottom:数値　　→下からの距離
• left:数値　　　　→左からの距離
• right:数値　　　→右からの距離

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

display:block;

表示形式を指定するための命令です。
インライン要素に指定することでブロックレベル要素に変えることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

文字の装飾、編集

color

要素内のテキストの色を指定するプロパティです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

font-size

要素内のテキストの大きさを指定するプロパティです。
数値の後ろに「px」「%」「em」などの単位をつけて指定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

font-family

要素内のテキストの文字の種類を指定するプロパティです。
値には「フォント名」もしくは「総称名（明朝体やゴシック体など）」を入力します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

フォントはブラウザやOSの環境によって閲覧できる種類が異なるため、いくつかのフォントを指定し、最終的にどれも表示ができなければ総称名、というように記述しておくのが一般的です。

最初に記述したフォントがなければ次のフォント、それもなければまた次のフォント、という順番で表示されます。一つ一つのフォントをカンマでくぎります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

※閲覧環境に左右されず同じフォントの表示を可能にする方法として、WEBフォントというものがあります。
参考：Google fonts
https://fonts.google.com/

枠線を引く

border

要素に枠線を引くためのプロパティです。
値には必ず「線の太さ」「種類」「色の指定」の3つを指定する必要があります。
値の順番はどの順番でもOKです。

線の種類はいくつかあります。

• solid・・・実線（直線）
• dotted・・・点線
• dashed・・・破線
• double・・・二重線

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

border:値　で指定した場合、上下左右に全て同じ枠線が引かれます。
4方向それぞれに指定することも可能です。

• border-top:　　　 →上に線を指定する
• border-bottom:　  →下に線を指定する
• border-left:　　　 →左に線を指定する
• border-right:　　  →右に線を指定する

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

背景を透過する

background:rgba(R出力値,G出力値,B出力値,アルファ出力値)

要素の背景を透過させるプロパティです。backgroundもしくはbackground-colorの値に

背景色（rgbの出力値）
＋
アルファ値（不透明度のこと、0〜1の間で表し、0に近いほど透明に近い）

を指定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

角丸表現

border-radius

要素にこの命令をすることで角丸の表現ができます。値に数値を入れて角丸の半径を指定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

ブラウザ設定を打ち消す

list-style:none

ulの箇条書きの・や、olの1.2.3.などの表記を消すための表記です。
ulかolもしくはliどちらに命令を出しても効かせることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

text-decoration:none

aタグでリンクを設置したときに表示される下線を消すための表記です。
aタグに対して命令を出します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

プロパティ（応用編）

・trantionプロパティ、animationプロパティ紹介記事
変化をつける、アニメーション表現を行うためのプロパティです。
https://nnc-studio.jp/plugin/2023/04/12/css_animation/

・transformプロパティ紹介記事
移動、拡大、回転、立体表現を行うためのプロパティです。
https://nnc-studio.jp/plugin/2023/05/18/css-transform/

セレクタの指定方法（応用）　〜of type

例えばulの中にliが複数あり、何番目のli、というように限定的な指定をすることができます。

nth-of-type()

要素の順番を指定することができます。
（）の中に数値、もしくはeven（偶数）・odd（奇数）を記述して指定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

first-of-type・last-of-type

複数ある特定の要素の中で一番最初・一番最後にある要素を指定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

参考リンク

・もうdisplay:flexで悩まない！初心者向けCSSレイアウト徹底解説
https://nnc-studio.jp/plugin/2024/09/09/display-flex/

・【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
https://willcloud.jp/knowhow/font-family/

・Google fonts
https://fonts.google.com/

・2023年版｜Google Fontsの使い方解説＋オススメのフォント紹介！
https://pengi-n.co.jp/blog/googlefont/

・検証ツール（デベロッパーモード）の使い方
https://prog-8.com/docs/html-dev

・初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
https://saruwakakun.com/html-css/basic/chrome-dev-tool?fbclid=IwAR1r7-OjWgOIQXB9YVX8gXXDY-ND2JlZThjvJTeP1HCZvzF6u5PW5wVnu7Y