Webデザインの気付きメモ

会社のHPを色々といじっていく中で当たった問題点などを解決策ともに掲載。

使用ツールはGoogle Chrome デベロッパーツール（クローム開いてF12）
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider
・「Ctrl+F」で要素の検索　
Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック | コリス

CSS

・floatは要素を右や左に寄せる時に使う。(だけど、↓　display: inline-blockが楽)

floatしたら、floatさせる要素の直の親要素にclearfixを付けて、必ず解除する！

基本widthを指定して崩れないようにする！

positionでstatic以外の値が指定されている要素にはfloatは効かない！

参考にしたサイト

・CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ！

・CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

・display: inline-blockは横並びにしたいときに使える。

ブロックみたいに横に積んだり、縦に積んだりできる。
ボタンやリンクなどの要素を指定する時に便利。
Floatはclearfixが必要だが、こちらはいらない。Floatをdisplay: inline-blockに置き換えるだけ。

参考にしたサイト
・CSS - inline-block
・CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！

・Pタグのボックス要素の中のテキストを垂直方向中央揃えにする

CSSでline-heightを使う。
PXより、数値で指定するとやりやすいかも。

参考にしたサイト
・テキストの縦方向の中央揃えについて - Qiita
・行間を調整したい！CSSのline-heightの使い方 | TechAcademyマガジン

・CSSが一部分だけ読み込まれない。

F12画面で再読込ボタンを長押しし、ハード読み込みボタンを押すと、サーバーから直接読み込むので、キャシュ経由のCSS読み込みがされないのを解消してくれる。

参考にしたサイト
・CSS変更が反映されない時に試してほしい方法。ブラウザのキャッシュを削除したくない時におすすめ！ | ルカルカアフィリエイト

・画像やテキストを中央揃えする

参考にしたサイト
・【CSS】様々な要素を中央揃えにする方法 | クリエイタークリップ

フォント

フォントサイズは16PX、18PXくらいで

pxとemの違いについてのまとめ | ちゃんとしたブログ

・リンクの文字を指定して大きくする

リンクだけが小さくなるなどの場合、
 <p class="nousya"> 納車方法は<a class="nousya_a" href="sugunori.html">スグ乗りお届けサービス</a>です。</p>という形でクラス属性を指定して、CSSでフォントサイズを変更することが可能。
もちろんPの方のクラス属性もフォントサイズなどを変更できる。