27日目

今日の学習

CSS

詳解CSS 基礎文法編 (全33回) - プログラミングならドットインストール

baseline

英字が配置されるときのベースライン。

文中に画像を配置する場合も、このベースラインを基準に配置される。

画像や文字の位置を変えたい場合は、vartical-alignを使用して位置を調整する。

opacity

要素の透明度を指定できる。0から1で指定し、1だと通常の状態、0.5だと半透明の状態になる。

画像などの透明度を操作することも可能。

リストのスタイリング

リストの先頭についている記号を変更することができる。

ul {
  リストの先頭を白丸にする
  list-style-type: circle;

  記号をリストの内側にする
  list-style-position: inside;

  記号を任意の画像にする
  list-style-image: url(使用したい画像ファイル);
}

ol {
  1,2,3のような順番をa,b,cのアルファベット順にする
  list-style-type: lower-alpha;
}

一括指定プロパティ

先ほどのリストスタイルを変更するプロパティのように、一括指定でプロパティを変更することが可能なプロパティがある。

ul {
  list-style: circle inside url(***);
}

これで、先ほどのlist-styleプロパティをまとめて指定したことになる。

一括指定プロパティは、初期値が設定されているので、自分が設定したいプロパティをしっかり設定してから記述しないと上書きされてしまう点に注意する。

何気なく使っていたが、borderプロパティなどがそうだった。

overflow

コンテンツが領域から溢れてしまったときに使えるプロパティ。

このあいうえおというのは、青色のコンテンツのものだが長すぎるために溢れてしまっている。

.box {
溢れた部分を隠せる
  overflow: hidden;

溢れた部分をスクロールできるようにする
  overflow: scroll;
}

marginの相殺

垂直方向でmarginが重なると、小さい方が打ち消されるという仕様。

A

B

とコンテンツが並んでいたとして、以下のようにcssが書かれていたとする。

A {
  margin-bottom: 30px;
}

B {
  margin-top: 20px;
}

このmarginが合計されて、AとBの間に50pxの空きができる...と思いきや、より大きいAの数値が優先され、50pxではなく30pxになる。

上下の合計で間を取ろうとせずに、この仕様を覚えておいて注意する。

display

CSSのdisplayプロパティとは？使い方や特徴を解説 | 侍エンジニアブログ

position

positionプロパティは、Progateでやっているときもちょっと意味が分かっていなかったところなので、改めて学習することができてよかった。

このboxの初期値は、static。

relative

staticの状態から、位置をずらしてboxを配置したいときに使用するものがrelative。

.box2 {
  position: relative;
  top: 30px;
  left: 30px;
}

これで、static（初期位置）の状態から、上30px、左30pxずらすという意味になる。実際に実行してみると...。

ちゃんとそれっぽい位置にずれ込んでいる。

fixed

fixedは、ウィンドウの左上を起点にして固定配置してくれるようになる。スクロールしてもずっとそこに残り続けるので、常に画面に表示させたいときに使えそう。

ちょっと分かりにくい写真だが、スクロールしていってもbox2が同じ位置にずっとある。

absolute

absoluteは絶対配置と呼ばれ、親要素がstaticなのかrelativeなのかによって場所が変わる。

• staticの場合
  ウィンドウの左上を基準にして位置を指定

• relativeの場合
  親要素を基準にして位置を指定
  こちらの方がよく使われる