DAY09/45 シンプルなCSSに着せ替えてみた
おはこんばんにちは！iaです。
すげーーーーー進めた！そしたらもう２時よ笑
ハウルみてなきゃ2.5時間早くできたと思うけど、
金ローのジブリは見逃せないよね(*´-`)
◆もっとシンプルなデザインに
昨日upしたデザインカンプ、気に入ってはいた。
けど、初心者にはむずくないか！？ってことで…
もっとシンプルなものを作りました！メインの画像と説明文につけたアイコンの違いで４パターン
「階段」が「成長」というワードを連想させるしカラフルで可愛い！
これを使うならベースは空の色かな。
説明文アイコンはノートPCとコーヒー。これもブロガーっぽくておしゃれ◎
シンプルで使いやすそう！ベースカラーはA同様水色だね。
濃い赤？オレンジ？の四角をサイト内にも活用できそう。
説明文アイコンはPCと人。うん、無難に可愛い！
私の好きな配色だ〜と思って選んだ！テーマカラーはオレンジ×青で決まり！
だけどシンプルかつ色がビビットだから背景の色合いとかちょっと悩みそう。
説明文アイコンは吹き出しに「！」。可愛いけど、説明文に注目集めすぎかね？
A同様、「階段」を検索した中で出てきた画像。一番シンプル。
そしてプログラミング学習してます感が一番強い。けど、他と比べると地味に見える笑
説明文アイコンは立体の「！」。色を塗れば目立ちそうだけど、やっぱ地味かな〜
よくよく考えたら、HTMLとCSSの関係って、着せ替え人形とそのお洋服みたいだな〜って思う。
だって、リンクするファイルを差し替えるだけでガラッと見た目が変わるんよ！
HTMLファイルのみは、いわば素っ裸の人形状態。笑
初めはシンプルなCSSしか用意できないけど、どんどんオシャレに着替えていきたいものです。
◆レイアウトに苦戦！
CSSの何が難しいって、一番はレイアウトだと思う、今日この頃です。
さっきまで横並びだったのに、コードを書き足しているうちになぜか縦並びに戻っていたり、並べる要素のサイズや位置の調整がうまくいかなかったり、必要なコードを書いているはずなのに反映されなかったり…etc
この記事は1/12に追記しているので、実際に作業していた日、正直のところ何に対してどのように悩んでいたのか忘れちゃったんですが、思い出しながら書きます笑
昨日も微調整していて思ったけれど、つまずくところはいつも同じで、テキストの同じページを見たり、AI子さん（Chat GPT）に似たような質問をしたりを繰り返ししてます。
私が頻繁につまずいていたポイントはこちら
「class=container」を何度も使用する方法
水平方向の移動（中央揃え・右揃え）
垂直方向の移動（中央揃え）
まだ人に説明できるぐらいの理解ができているかと問われると不安だけれど、この部分は復習がてら書きますか〜
1 「class=container」を何度も使用する方法
レイアウトをするとき、親要素になる「コンテナー(class＝container)」と、子要素「アイテム(class=item)」を使います。
大きな「箱」の中に「アイテム」を入れて、並べていくイメージ。
webサイトを作るとき、この「箱」がいくつも出てきますが、同じ並べ方をすることは滅多にないですよね。箱ごとに入れたい文字や画像、そして配置を変えたいはず。
１つ目の箱は「container」のままでいいとして、２つ目以降の箱の名前はどうしたらいいんだ〜！って思いませんか？
まず、クラス名は自由に決めて変えていいはずだからといって、全く違う名前で親要素を設定してみましたが、反映されませんでした。（そもそも何かミスってたのかもしれないけれど）
答えは単純。CSSを書くとき、該当箇所のセクションやID、クラスを２つ以上指定する、もしくは名前を少し変えてあげればいいんです。
例えば、「プロフィール(#profile)」というセクションには、並べ方を変えたい要素が3つあるとします。
A…「アイコン画像」と「名前テキスト」を縦に中央揃えに並べる
B…「A」と「経歴テキスト」を横に並べ、画面の中央に配置する
C…３つの「SNSアイコン画像」を横に並べ、画面の右側に配置する
で、私が書いて問題なく表示されるようになったCSSがこちら
まず、190行〜227行までは全て「#profile」のセクションでまとめているので、この中に書いている内容はセクション内にしか反映されません。
で、「container」の文字を使用しているのがこの３つ。
・202行目の「.flex-container」（A）
・210行目の「.pro-container」（B）
・215行目の「.SNSicon.container」（C）
上２つは接頭語の要領で、単語の頭にハイフンを使って言葉を足しました。
３つ目は２つのクラス名を指定しました。
これで問題なく、表示したいイメージで表示されました◎
この後に続く2と3も、1と同様、プロフィールのセクションを例にみていきます。イメージしやすいよう、先にコードを反映したwebページのスクショをご覧ください。
2 水平方向の移動（中央揃え・右揃え）
次に、水平方向に並べたものを中央に置いたり右に寄せて置く方法です。
まず、中央に配置したいのは（B .pro-container）の部分です。
CSSコードを見てみると
display:flex;
justify-content:center
１行目で「Flexbox」を使用した配置方法であることを指定し、
２行目で中央揃えを指定しています。
このとき、いくら「justify-content:center」を書いても、そもそもの方法指定である「display:flex;」を必ず書かねば反映されません。
次に、右に寄せて配置をしたい（C .SNSicon.container）の部分です。
display: grid;
gap: 20px;
margin-top: 20px;
grid-template-columns: repeat(3, auto);
justify-content: end;
１行目で「CSSグリッド」を使用した配置方法であることを指定。
２行目で３つのアイコンの間の幅（グリッドギャップ）のサイズを指定。
３行目で上方向のマージン（余白）、４行目に横配置の指定をしました。
そして、５行目で右揃えを指定しています。
気づきましたか？
並べる方法は１つ目と２つ目で異なりますが、使っているプロパティは同じなんです。
FlexBoxとグリッドで使用できるプロパティが限られているものもありますが、水平配置には同じ言葉で指定できるみたいです。
ここで１つ疑問が浮かびました。２つの使い分けって何か基準があるのでしょうか？ってことでAI子さんに聞いてみました。
FlexBoxとグリッド 使い分けの基準
1.レイアウトの複雑さ:
シンプルな1次元 → Flexbox
複雑な2次元 → グリッド
2.要素間の関係性:
子要素同士の関係が重要（順序や間隔調整） → Flexbox
全体のレイアウトを計画的に作成 → グリッド
3.ブラウザサポート:
Flexboxの方が広くサポートされていますが、最近はグリッドもほぼ全てのモダンブラウザで使用可能です。
なるほどね〜って感じですが、
まだ体感的にはどっちがいいとかわかりません笑
3 垂直方向の移動（中央揃え）
最後に垂直方向、縦に中央揃えで並べる方法です。
対象は（A .flex-container）、画像とテキストです。
これ実はレイアウトページのテキストを見ても解決せず、AI子さんに頼りました。そしたら出てきた回答の１つがこちら。
text-align: center;
え？これだけ？？？
flexやらgridやらを使って手こずっていたのに！笑
「text」と入っているから文字の中央揃えしかできないと思っていたら、まさかの画像と一緒でも使用可能というね。
確かこれ以外に、２行以上書いて指定する方法もありましたができるだけシンプルに（楽に）したいので、こちらのプロパティを採用しました。
◆まとめ
デザイン然り、CSSコード然り、「シンプルさ」って重要だよね。笑
レイアウトは数をこなすとよく使うプロパティを覚えていく感覚がありました。だけどまだまだ、思い通りに並べ替えられるほどに慣れるには、時間が必要そう。
今日はここまで！
読んでくれてありがとうございました！
スキやコメント、待ってます！