KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】フロントエンド技術の総復習#2「CSSの基本」

この記事をシェアする

前回に引き続きフロントエンドの勉強でございます。

<前回の記事>
www.kimuson.com

前回はHTMLの基礎的な部分をやっていきました。
今回はちょっと早起きして、実際にスタイリングの勉強を始めていきます。

今日やったこと

主にCSSの書き方をおさらいしました。

文字サイズ

.px {font-size: 20px}
.em {font-size: 1.2em}

文字の大きさはpx,emそれぞれ単位を付け加えて設定する。
ちなみに、pxは縦のピクセルの大きさemは現在のフォントサイズに対する倍率を表す。

文字の色

#mozi1 {color: blue}

文字寄せ

.center {text-align: center}
.right {text-align: right}

何も設定していないとデフォルトで左寄せになる。
中央寄せはcenter、右寄せはrightで設定する。

線の種類

.solid {border: solid 2px gray}
.dotted {border: dotted 2px gray}
.dashed {border: dashed 2px gray}
.double {border: double 5px gray}
.px1 {border: solid 1px orange}
出力結果

f:id:samuraikid520:20180126082457p:plain

線の種類は沢山ある。(正直覚えられないので、都度ググってみるのがいいかも。)

線の位置

上と左にだけ線を引く場合
	.rei1 {border-top :solid 2px #FFA07A;border-left: solid 2px #FFA07A}
下と右にだけ線を引く場合
	.rei2 {border-bottom: solid 2px #FFA07A;border-right: solid 2px #FFA07A}

画像の縦横比を保持する

 .testimg p img{width: 100px;
  max-width: 100%;
  height: auto;
}

「 height: auto;」を設定すればよし!

最終的な今日の進捗

f:id:samuraikid520:20180126083353p:plain
f:id:samuraikid520:20180126083407p:plain
f:id:samuraikid520:20180126083411p:plain

まとめ

今日はCSSの基礎の部分をやっていきました。
次回も引き続きCSS(余白の取り扱いなど)をやっていきます。