プログラミングの勉強日記

2020年8月24日
現在しているインターンでCSSの綺麗な書き方（見やすい）書き方を学んだのでまとめる。
更新があればその都度追記していきたいと思う。

改行を作らない

　ソースコードは短く簡潔に書くことが大切なので、ソースコードには改行をしないようにする。

.top{margin:0;font-size:16px;}.second{background-color:red;}

セレクタと中括弧の間にスペースが必要

　CSSはセレクタとプロパティと値で構成されていて、どの要素かを指定する部分をセレクタという。(クラス名とかID名にもスペースを空ける）

p{/* 処理 */}

プロパティと値の間はスペースが必要

　以下のようにコロンと値の間にはスペースが必要。

.top{width:100%;}

まとめられる内容はまとめて書く(paddingやmargin)

　以下のようなコードの場合はpadding: 値で四方向すべてを、padding: 上下 左右で水平方向を、padding: 上 右 下 左のようにまとめて書くことができる。

.top{padding-left:10px;padding-right:10px;margin-top:2px;margin-bottom:3px;margin-right:4px;margin-left:6px;}

　なので上記のコードは以下にまとめられる。

.top{padding:010px;margin:2px4px3px6px;}