自分があらかじめやっているCSS指定

本業でも個人でもサイト制作のスタイルを追加する前に指定しているものを書く。やっておくと後々の調整作業がちょっと減る。

画像がウィンドウサイズからはみ出ないようにする

最大幅を指定する。

img {
  max-width: 100%;
  height: auto;
}

基本は原寸表示をして、ウィンドウ幅が狭くなったときはそれに合わせて小さくなる。 width: 100%; だと小さいときは拡大されて画像が荒くなってしまうので、 max-width 。

フォントサイズを指定するとき

行間も合わせて指定する。

.title {
  font-size: 24px;
  line-height: 1.3;
}

見出しタイトルみたいに本文よりサイズを大きくする場合に、行間はちょっと詰めると見た目が良さそう。

リンクテキストの余白をつけるとき

ブロック要素にする。

.primary-button {
  /* ブロック要素と余白の指定 */
  display: block;
  padding: 10px;
  text-align: center;
  /* 表示テスト用スタイル */
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  color: #06c;
  background: #fff;
  border:  3px #06c solid;
  transition: all 0.1s;
}

Codepen サンプル
ボタンみたいなスタイルにするとき。

参考： https://developer.mozilla.org/ja/docs/Web/CSS/display

要素の中で位置を固定させたいとき

親要素に position: relative; を指定しておく。

.parent-box {
  /* 位置指定のための position プロパティ */
  position: relative;
  /* 表示テスト用スタイル */
  width: 400px;
  height: 300px;
  margin: 0 auto;
  text-align: center;
  background: #ffffdd;
  color: #666;
}
.child-item {
  /* 位置指定のための position プロパティ */
  position: absolute;
  bottom: 10px;
  right: 10px;
  /* 表示テスト用スタイル */
  width: 32px;
  height: 32px;
  font-size: 14px;
  line-height:32px;
  background: #ddeecc;
  font-weight: bold;
}

CodePen サンプル

本当はあまり使いたくないのだけど、レスポンシブ表示で限定的に位置を固定させたいときに使いがち。

参考： https://developer.mozilla.org/ja/docs/Web/CSS/position

（思い出したらまた更新。