【webデザイン】模写コーディング②苦手なプロパティたち｜display編

2024年8月5日 15:57

こんばんは🌛

先日はSTUDIOに寄り道してみたり
転職活動していたりと
模写コーディングの続きができていなかったので
久しぶりの投稿です。

久々CSS触ったら忘れている事が多すぎて
模写コーディング入門編なのに
全然コード書けなかった（泣）

とりあえず書いてみて
わからないところは
ソースコード見てしまいました。ｽﾐﾏｾﾝ。
あとはサイトの解説見て
また忘れそうなとこは記録しておきます。

そもそも

CSSの構造はこんな感じ↓

h1 { color : blue }

セレクタ：どこに対してデザインを施すか（h1タグに）
プロパティ：セレクタに対して何を操作するか（colorを）
値：フォントサイズ、文字の色等のプロパティに対してどうするか（青に）

構造は分かっていても
セレクタとかプロパティとか急に言われると
それなんだっけ？？？て解説入ってこないから
IT用語に慣れるようにいちいちnoteに書きます（笑）

displayのblock・inline・inline-blockの違い

display:〇〇; よく使うけど
ちょっと時間が経つと違いが分からなくなってしまう、、、
模写コーディングで使用した内容で
まとめていきます！

◼︎displayの初期値

block
・p（段落）
・div
・ul（リストを囲む要素）
・li（リスト項目）
・h1~h6（見出し）
・header（ヘッダー）　
・main（文章の中で中心となるコンテンツ）　
・footer（フッター）など

inline
・a（リンク）
・span
・img（画像）　など

◼︎blockの特徴

① 前後で改行が入るので、縦に要素が並ぶ
② 幅・高さ：指定できる
③ 余白：指定できる
④ 要素の配置：指定できない

◼︎inlineの特徴

基本的にはblockの中で用いられる。

文章の一部として認識され、
テキストの装飾やリンクに使われることがある。

① 前後で改行が入らないので、横に要素が並ぶ
② 幅・高さ：指定できない
③ 左右の余白：指定できる
　上下の余白：調整できない
④ 要素の配置：指定できる

◼︎inline-blockの特徴

インライン要素とブロックレベル要素の
良いとこ取り！

① 前後で改行が入らないので、横に要素が並ぶ（inlineと同じ）
② 幅・高さ：指定できる（blockと同じ）
③ 余白：指定できる（blockと同じ
④ 要素の配置：指定できる（inlineと同じ）

→できることが増えた！

◼︎実際の使用例

「About」のセクションタイトルに注目！

<h2 class="section-title">About</h2>

<h2>の初期値はblock要素。
このままでは画面中央に配置することはできません。
そこで、、、

.section-title {
    display: inline-block;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 60px;
    border-bottom: solid 1px #383e45;
}

display: inline-block を設定し
text-align: center と組み合わせて使用することで、
要素自体(Aboutというテキスト)を
親要素内で中央に揃えることができました！

また、inlineではなくinline-blockにしたことで
margin-bottom: 60px;（下の余白）も指定できました。

下記サイトを参考に備忘録を作成しました！
とてもとてもわかりやすいのでぜひご覧ください

display:flex !?

display: flex は、
要素を「フレックスコンテナ」に変えるために使用する。
これにより、その子要素（「フレックスアイテム」）を
フレックスボックスのレイアウト機能を使って
柔軟に配置することができる。

待て待てフレックスボックスって何、、、

概要: フレックスコンテナ内のアイテムを
　　主軸（横方向）および交差軸（縦方向）で
柔軟に配置するための技術。
主要プロパティ:
display: flex — フレックスコンテナを作成
justify-content — 主軸に沿ったアイテムの配置
align-items — 交差軸に沿ったアイテムの配置
flex-direction — 主軸の方向の指定
flex-wrap — アイテムの折り返し設定

chatGPT先生より

フレックスボックスは
レイアウトを適用させたい子要素の要素と、
それらをラップする親要素のコンテナから
構成されている。

#bicycle ul（親） に display:flex を
指定することで、
子要素のレイアウトを変更出来る。

<section id="bicycle" class="wrapper">
            <h2 class="section-title">Bicycle</h2>
            <ul>
                <li>
                    <img src="image/bicycle1.jpg">
                    <h3 class="content-title">タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </li>
                <li>
                    <img src="image/bicycle2.jpg">
                    <h3 class="content-title">タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </li>
                <li>
                    <img src="image/bicycle3.jpg">
                    <h3 class="content-title">タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </li>
            </ul>

</section>

#bicycle ul {
    display: flex;
    /* 両端揃え */
    justify-content: space-between;
}

display:flex したら
justify-content: space-between と組み合わせ
フレックスコンテナ内のアイテムを
両端揃えにし中間に均等なスペースを分配することができました。

同じサイトのこちらの記事もとても参考になりました！
まだまだ書ききれない機能があるので
徐々に理解できればと思います（汗）

次回の予定

ひとまずCodejump模写コーディング入門編は
終わったのですが
慣れないプロパティ様が多いので
次回も苦手な部分をまとめていければと思います！

今日もお疲れ様でした〜🌝

【webデザイン】模写コーディング②苦手なプロパティたち ｜display編