毎年恒例、HapInS Advent Calendar！！
2024年13日目の担当するのは塚本です！
去年 ↓ の記事を書いたこいつです(´・ω・)
今回のテーマはHTML/CSS！
僕が実装をする時にどんなことを考え意識し書いているのか？
塚本の脳内を公開しようと思います！
では、やっていきましょう！
なぜ今更HTML/CSS？
と思った方も多いかと思います…
理由は単純で意外と苦手な方が多いからです…
普段、仕事をしていて以下のような場面に遭遇します
～ ある日 ～
塚本「」ｶﾀｶﾀｶﾀｯﾀｰﾝ‼
メンバー「こういう実装したいんやがどう書けばええんや？CSS嫌い！」
～ 別の日 ～
塚本「さーて、画面の改修するかー」ｶﾀｶﾀｶﾀｯﾀｰﾝ‼
塚本（なんや…このコード…世紀末すぎんか…？）
こんな感じです
原因は以下の二つかなと考えています
1. 何がエラーなのか分からない
プログラミングと異なり、誤った記述をしてもログとして出てこないことが多いです
2.何が正解か分からない
例えばコンテンツを中央に寄せたい場合、
text-align: centerで実現できますがposition: absoluteでも実現できます
つまりゴールに対して手段は複数あるのにどれが正しいのか分からないということですね
まあ実際のところ好き嫌いの世界なので仕方がないですが、
ちょっとした考え方やコツを知るだけである程度はまともに書けるようになります
ほな、考え方やコツってなんや？
慣れd
プログラミングと同じです
シンプルに考える事
これに尽きます
例としてコンテンツとコンテンツの余白を空けたい場合を見てみましょう
paddingとmargin、皆さんも一度は聞いたことがあるかと思います
皆さんならどちらを使用しますか？
僕がコンテンツ間の余白を空ける場合に使用するのはmarginです
「いやいやｗなんでやねんｗ」
「どっちも余白空けられるやんｗ」
と思う方もいるかと思います
では、見てみましょう。
画像の1、2の箱の間にpaddingとmarginそれぞれ10pxで余白を付けます。
結果は…おや？
あ、線が邪魔ですね。
ブラウザのdevtoolsで見てもしっかり余白が空いています。
完璧ですね。
とはなりません
paddingとmarginには大きな違いがありましたね。
paddingはコンテンツの内側に余白を設定し、
marginはコンテンツの外側に余白を設定します。
つまり何が言いたいかといいますと…
CSSのプロパティにはそれぞれ役割がしっかり存在しているのです
この役割を意識するとゴールに対して取るべき手段というのがかなり絞り込めます。
ここまで長々と書いて来ましたが「あれ？結構単純じゃね？」って思いませんか？
シンプルに考えればCSSって単純なんですよ。
そして開発するもデザインも良く見てみてください。
コンテンツを縦横に並べて色付けて画像配置して…
たったそれだけのことなんです。
であれば使用するCSSプロパティなんて数種類です笑
数種類を覚えそれぞれの役割を意識すれば基本的なwebサイトは作ることが出来ます。
ちなみに…
コンテンツを中央に寄せたい場合にtext-align: centerやposition: absolute 、margin: 0 auto等がありますが、
僕なら何を使うでしょうか？
正解者には1阿僧祇ポイント差し上げます。
いや、それだけ？分からんて
ですよね(´・ω・)
それでは僕が0から画面を実装する際にどのようなことを考えながら実装しているのかを解説します。
step1 構造を考える
いきなり何だこれ…！って感じですよね。
これは僕が修行時代に実際の案件で書いたメモです。
前段で「コンテンツを縦横に並べて色付けて画像配置して… 」と言いましたね？
それを可視化したものになります。
デザインを見てどことどこをdivでまとめて、AとBのコンテンツは横並びにして…
といった具合です。
どんなデザインでも基本的に画像のように要素を縦横に組み合わせたものになります。
流石に現在はこのようなメモは書かないですが頭の中で同じことを行っています。
最初は紙だったりタブレットだったりとにかく書きましょう。
速度、精度は二の次です。
step2 実装
あとは実装していくだけです。
step1で書いたメモの通りにコンテンツをdivで括り縦横に並べる。
テキストのサイズや色を整える。
これだけですね。
慣れてくれば「あー、ここ横並びだから〇〇で～」みたいに自分の中でパターンが出来てきます。
ぶっちゃけこれ以上言う事もないんですが尺稼ぎのために僕が良く使うCSSプロパティでも紹介していきます。
display: flex
使用頻度、堂々の第1位です。
正直これさえ覚えればあとは何とでもなります。
コンテンツの縦並べ、横並べ、X方向Y方向の位置指定まで…
paddingとmargin
余白関係は基本これです。
ただ、今回お話した通りそれぞれの役割は意識してください。
step1のメモを頼りに枠組みだけ実装してみました。
コードを見て貰えれば分かるかと思いますが、
display: flex で配置、paddingで内部の余白、background-colorで背景色を定義してるだけです。
その他にもwidthとかtext-alignとか書いていますがそんなに難しくないですよね？
codepen.io
最後に
色々と書いて来ましたがいかがでしょうか？
LPやコーポサイトみたいな凝ったデザインの実装は結構考えることが多く大変ですが、
それでも基本は今回お話した内容をベースに実装を進める事になります。
好き嫌いがハッキリ分かれる分野ですが仕事上、
どうしても避けることが出来ない場合もあります。
そんな時に今回の内容が少しでも役に立てればなと思います。
おまけ
今回手書きのメモが出てきましたね？
あれ慣れれば頭の中で同じことをやっていると言いましたが、
僕くらいの変態になると街中を歩いていてビルや建物を見た際に
「ここの窓とここの窓をdivで括ってdisplay: flexで横並びにして～」みたいな遊びができるようになります。
皆さんも是非お試しあれ。
