BikeHP
Codestep（記事の下にURL）のHPからXDを見て作成。
作業時間
11時間ほど。
こんな感じ
学んだこと
大きい枠から作ってみることに。
imgタグ(HTML)とbackground-image(CSS)の使い分け
結論
：必要不可欠なものはimgタグ。
そうでなくなくても困らないものはbackground。
＜問題＞
写真の下に隙間ができる。
＜回答＞
インライン要素は下に隙間ができる。（paddingやmarginではない。）
※HTMLが気を利かせて、若干の隙間（インデント）を開けてくれているようだ。
→対処法として、親要素のfont-sizeを0にするか。vertical-align: middle;（インライン要素を垂直方向（縦）に動かす）か要素自体をblock要素にするか。
＜今後参考＞
文字数が変わる可能性があるときは、長い時と短い時などチェックをする。最大のwidthは必要。
必要に応じて改行の管理をする。
white-space: nowrap; // 改行しない
overflow: hidden; // 隠す。
text-overflow: ellipsis; // ...で表現する。
＜今後参考＞
heightをつけないと子要素は親要素からはみ出る。親要素も100%だと大元の親要素と同じ大きさになるので、はみ出る。
短くてもscrollでる。
→overflow: auto;にすると出ない。
ただ、親要素のheightをmax-heightで設定すると、できない。
→max-heightは要素の高さを一定の場所まで固定したくないときに使用するとよい。
指定した高さまでは、子要素に合わせて動けるが、子要素がその高さ以上になるとはみ出てしまう。
＜何となく結論＞
親要素の高さを指定して、文字数が変わるところは適宜、スクロールをつけておく。
またそのまま親要素が伸びていい場合は、height: auto;で子要素のheightをつけない。
基本高さはあまり指定しない。（不変のものは大枠だけつけるのはアリかな？）
widthは大きくなった時、小さくなった時に、、、みたいなのは念頭に置いて作る。
やはり上から作る方がいいのかな。
その要素の最後のものを指定する場合は、その要素自体に&:last-childをつける。
プラスワン
navタグ aタグを使ってページ遷移をつける
idを指定すればそこに飛べる。
ロゴにもaタグ
「href=”index.html”」
その際、まとめてaタグの
a {
*`/* 今回は、サイト内のリンクに下線が表示されないように設定します */`*
`text-decoration: none;
}`
共通するものは先に指定しておく。
写真以外heightを指定していない。
御作法？
img {
/* 画像が画面の横幅からはみ出るのを防ぐためにmaxサイズを設定します */
max-width: 100%;
}
