CSSまとめ

基本

▼htmlのheadにstyleタグを入れる

  <link rel="stylesheet" href="css/[ファイル名].css">

・文字カラー

※セクレター：　色；

  hi{
    color: red;
  }

▼枠の全てのh1ではなく、枠の中の直下の階層にだけスタイルを適応させたい時（不等号記号を使ってあげる）

  .works > h1{}
  .works > section > h1{}   /*ワークスの直下のsectionの直下のh1の意*/

ブラウザでの表示を見る

▼ブラウザでどう表現されるかを見る時のショートカット

  option＋⌘＋I

・Elementパネルを見るとよい

・画面上で見たいところを「右クリック＞検証」すると、見たい部分がマークされた状態で表示される。

・「user agent sylesheet」はブラウザが標準で持っているCSS

・computedタブでタグがアルファベット順で見られる。

色表現

▼color:rgb(0,255,0);

※同じセレクタに対してプロパティを複数設定すると後に書いた物が優先される

▼１６進数表現

  color: #00ff00;
    ※#00ff00 = #0f0

▼#333は柔らかめの黒で文字色におすすめ

▼背景色におすすめの薄い灰色

  h1{
    background-color: #efefef;
  }

▼ポイント、さし色におすすめ
・#993366(青みがかったピンク)

▼画像の色合いを暗くしてみる [CSS]画像を暗くしてみる | Pilgrim

画像のスタイリング

▼アイコン画像のスタイリング（画像を丸くし、枠の幅を設定、線のタイプは実線、枠の色は白）

  .ico img{    /*アイコンをクラス縛りにしている（全部のアイコンに効かないように）*/
    border-radius: 50%;   /*画像を円形にする（四角の辺の半分を半径として丸めるの意）*/
    border-width: 4px;
    border-style: solid;
    border-color:white;

※画像を角丸四角に

  border-radius: 20px; 

リストの編集

▼一旦余白をリセットしてあげる（一旦消してからの方が調整しやすい）

▼リストのドットを消す

▼子要素を横並びにする

.info p{
  margin: 0;
  margin-bottom: 16px;    /*一旦マージンを０にした後、下のマージンだけ16px分上書きしてあげる*/
}
.info ul{
  margin: 0;
  padding: 0;
  list-style-type: none;    /*リストのドットを消す*/
  display: flex;    /*子要素を横並びにする*/
}

▼横並びにした後、リスト間に余白を作ってあげる*/

  .info ul li{
    margin-right: 8px;
  }

フォントについて

▼このフォントがなかったら、このフォントを使ってねという表現

  font-family: verdana, sans-serif;

▼そのセクションの中で１番の項目にはh1で括るのがセオリー

その後CSSで指定してあげてフォントの加工をしてあげる

※（フォントの太さ、フォントのサイズ、周囲の余白の大きさ、テキストが中央揃えになる）

.info h1 {
  font-weight: normal; /*フォントの太さ*/
  font-size: 24px;
  margin: 0;
  text-align: center; /*中のテキストが中央揃えになる*/
}

▼行間を調整

.works p {
  line-height: 1.8; /*行の高さを文字サイズの1.8*/
}

▼フッターの調整

footer p {
  text-align: center; /*中のテキストが中央揃えになる*/
  font-size: 14px;
  margin-bottom: 60px;
  color: gray;
}

レイアウトの調整、余白の取り方など

レイアウトのためのタグはdiv

▼divタグの名前はclassでつける「.~」

▼真ん中に持っていきたい部分をdivタグで括った時（class="container"）

▼余った余白を均等に割ってくれる（中央揃えになる）

.class {
  background-color: pink;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

▼縦方向に要素を中央揃えにしてあげる*/

.container {
  background-color: pink;
  width: 400;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center; /*縦方向に中央揃え*/
}

▼余白を消したいとき ※computedでbodyやheaderなどのタグをクリックしてcomputedと見比べると余白がどこのBoxで取られているのかがわかる。

※余白を調整したい時は一度marginを０にすると良い。

body {
  margin: 0px; /* ４方向０ｐｘの時 */
  margin: 0; /*同じ意味*/
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

▼ヘッダーのボックスの上下高さを広げたい時*/

header {
  background-color: #efefef;
  padding-top: 32px;
  padding-bottom: 32px;
}

▼レイアウトを横並びにしたい時はflexboxを利用（container > icon,infoの時） →親要素に「display: flex;」とつけてあげると良い

.container {
  background-color: pink;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: flex; /*⇦親要素にflexつける*/
}

▼横並べにしたアイコンとインフォの要素の間を少し開けてあげる

.ico {
  background-color: skyblue;
}
.info {
  background-color: tomato;
  margin-left: 32px;
}

▼リストのインデントを無くして、ulと左揃えにする

footer ul{
  padding-left:0px;
}