はじめに
みなさんこんにちは、torihaziです
HTML CSSでレイアウト組むのって難しいですね。
ただ難しいってどういうムズカシイなのか自分の中で整理がついていなくて
余計混乱しています。
ボックスモデルは理解していますし、flexもある程度はできるつもりです。
今回は何かを解決したという趣旨ではなく
ただひたすらやったこと、疑問に思ったことを記載し
考え、仮説を立て、失敗して、解決する、ということをやっていきたいと思います。
ではしみじみ始めていきましょう。
気づき・疑問
max-width ってなんで設定するの
最大横幅を決定するためにあると思う。 使い所がわからない。
レスポンシブデザインを作る上で欠かせない、らしい。
これ以上は大きくならないことを目的として設定する。
- max-width はwidthとセットで使うことが多い。
- どんなにしても この値よりかは大きくならない
body の下ですぐに div要素のコンテナで全体を囲むのは？
どういう時だろうか。
- 横幅いっぱいにするようなコンテンツがないとき
- まとめてコンテンツを中央寄せしたいような時
1つでも横幅いっぱいになるようなコンテンツがある限りは
そのコンテンツをコンテナに含めてしまったらそのコンテナのcssの影響を受けてしまう。
だから最初はコンテナに入れずにdiv要素を分けたのか。
- 横幅いっぱいにするようなコンテンツがない時
これがコンテナに入れるか否かの判断でいいと思う。
last-childの使い所
要素:last-childと記載
最後の要素だけ適用する時
margin: 0 auto;が効かない？
要素を中央寄せにしたい場合は margin: 0 autoにすればいいと脳死で覚えてしまっている
marginというのはボックスモデルにおいて一番外にある枠にある
以下の時 section の indexを中央寄せしたかった。
section id=indexのところに margin: 0 autoを指定してもダメだった。
ただ div class=innerに指定するとうまくいった。
margin: 0 autoが効かない原因
- widthを指定していない
- インライン要素である
などがあった。
しっくりこない。
- 親要素に対して中央寄せする必要があるならば、 対象の直下子要素にwidthを指定する
- そのwidthは親要素より小さくなければならない
- そのブロックを動かせる余地がないといけない。
<div class="container">
<header id="header">
<h1 class="page-title">
<a href="index.html"><img src="img/logo.svg" alt="test"></a>
</h1>
</header>
<main>
<div id="mainvisual">
<img src="img/mainvisual.jpg" alt="test">
</div>
<div class="inner">
<section id="index">
<h2 class="index-title">INDEX</h2>
<ol class="index-list">
<li>タイトルタイトルタイトルタイトルタイトル</li>
<li>タイトルタイトルタイトルタイトルタイトル</li>
<li>タイトルタイトルタイトルタイトルタイトル</li>
<li>タイトルタイトルタイトルタイトルタイトル</li>
<li>タイトルタイトルタイトルタイトルタイトル</li>
</ol>
</section>
<section>
</section>
<section>
</section>
</div>
</main>
<footer id="footer">
</footer>
</div>
#index {
background-color: #f5f5f5;
margin: 0 auto; ->これを .inner の方に指定するとうまくいった。
}
h2 にtext-align centerしても中央寄せしない
text-alignはブロック要素内ののインライン要素を中央寄せする
これはただのタイポだった。
olタグの liで数字がはみ出る
li 要素にmargin-leftを付与することで解決
cssのクラス名について
なぜつけるかは、cssの方で特定するため。
無駄に煩雑かする必要はない。
作成したhtml要素に悉くクラス名をつける癖があるが、目的はcssの方で特定すること。
別につけなくてもいい。
IDを使用するなどして、わかりやすくかつ短い指定方法にすることを心がけること。
CSS にUTF8?
cssのファイル最初に@charset "utf-8";を記載する
そうすることで今から使用するのは文字コードがUTF8ですよ、と宣言している
flexボックスの子要素で全幅を埋める
flexboxを指定した要素にjustify-content: space-betweenを指定してもだめ。
flexアイテムにflex-grow: 1を指定すれば良い。
こうすることでコンテナに幅余白があった際にアイテム幅をどのくらい伸ばすかを指定できる
(2024/1/22)
この交互になっているレイアウトてどうするの。
- まず画像とテキストを含む div要素(class box)を２つ作成する
- それぞれに flexを指定
- 偶数のboxにのみ
flex-direction: row-reverseとすればいい
Googleフォントの読み込みってどうやるの？
- Google フォントにとぶ
- 検索欄に対象のフォント名を記載する
- で使う方法などが出てくるのでそのコードをそのままコピペ
- css ファイルにはhtmlにfont-familyをそのまま指定する
微妙に字列が揃わない
Wooden Jewelry の字列に 他のnavに記載してある文字の字列を揃えたい。
flexアイテム垂直方向の位置を中央にする align-items: centerを親のheaderに指定した。
なぜならないか
ロゴ画像が大きいからか。
そのため画像も中央寄せなっているけど、headerの高さと同じだから揃ってないように見えるだけ。
高さをheaderの下枠に揃えよう。
- align-items: flex-endで解決
円の中に文字を書く
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
</ul>
#skill ul {
display: flex;
justify-content: center;
}
#skill li {
display: inline-block; ->width heightを設定するためにinline-blockに
width: 80px; -> 円の横幅
height: 80px; ->円の高さ
border-radius: 50%; -> 円を作り時は同じwidth,height radius 50%がセット
line-height: 80px; <- 円の真ん中にするには heightと同じ高さ
font-size: 1.5rem;
color: #fff;
}
#skill li:nth-child(1) {
background-color: red;
}
#skill li:nth-child(2) {
background-color: blue;
}
#skill li:nth-child(3) {
background-color: yellow;
}
終わりに
一通りやってみて気づいたことが一つあります。
自分は今までHTML や CSSが苦手だと思っていましたが
多分それは明らかな実践不足によるものだ、ということです。
苦手なんていうものではありません。
元々最初からできていなかっただけです。
どういうことができていなかったかというとこれまで上に書いてきたこと。
他にもまだあるかもしれません。
とりあえず実践してみて、いろいろなレイアウトの作成方法を
自分の中にストックできて少しは身についたと思うので
これからはどんどん場数をこなして
多くのレイアウトに触れることによりこの漠然とした不安感を解消していこうと思います。
