HTML&CSSノートfrom Progate3

9365 ワード
CSS HTML Progate HTML テキストリンク

はじめに

Progateの勉強メモ

HTML

header と footer

<div class="header"></div>や<div class="footer></footer>と書く代わりに以下のように書くことができます。

<!--<div class="header"></div>の代わり-->
<header></header>
<!--<div class="footer></footer>の代わり-->
<footer></footer>

　複数のクラスの設定

class="name1 name2 ..とすることで二つ以上のクラスを設定できる

<div class="btn red"></div>
<div class="btn blue"></div>

CSS

背景に画像を表示する

背景に画像を表示させるときにはbackground-imageを使います
また、画像の大きさが足りない時には繰り返して表示されてしまいます
なのでbackground-size:cover;とすることで画像を適した大きさに表示することができます

div {
  /*背景にimg.jpgを表示*/
  background-image: url(img.jpg);
  /*画像を適した大きさにする*/
  background-size: cover;
}

透明度

opacityを使うことで透明度の設定をすることができます
範囲は 1 ～ 0 までで 0 が一番透明で 1 が一番はっきり表示されます

文字間の空白

letter-spacingを使うことで文字間の空白を調整することができる

div {
  /*文字間の空白を2ピクセルにする*/
  letter-spacing: 2px;
  /*文字間の空白を10ピクセルにする*/
  letter-spacing: 10px;
}

display プロパティ

タグごとに決まっている display プロパティの初期値を変えることができます

display の値 意味
block 要素は横に広がる
inline 要素は横に並ぶ
inline-block block と inline の中間

わかりやすい解説はこちら

マウスが上に来たら色を変える

div:hoverとすることでマウスが指定した要素の上に来た時だけ css を適用するようにする

/*divの上にマウスが来たら要素の背景を青に帰る*/
div:hover {
  background-color: blue;
}

角を丸くする

border-radiusプロパティを使うことで角を丸くすることができます
値には円の半径の値を入れます

.box {
  /*半径3pxの円の形に角を変える*/
  border-radius: 3px;
}

文字のそろえを変える

text-alignプロパティを指定することで文字のそろえを変えることができます

text-alignの値 そろえの位置
left 左揃え
center 中央揃え
right 右揃え

ブロックレベルで中央揃えにするときにはmargin:0 autoを使い、テキストやボタンを時にはtext-alignを使います

rgb プロパティ

色を指定するためのプロパティです
rgba(R,G,B)の順番に指定する

/*以下の二つは同じ色*/
.rgba {
  color: rgb(73, 201, 192);
}
.rrggbb {
  color: #49c9c0;
}

rgba()として 4 つ目の引数に透明度を入れることができる

/*透明度は0.5*/
.rgba {
  /*background-colorのみ透明度0.5にする*/
  background-color: rgba(73, 201, 192, 0.5);
}
.rrggbb {
  /*rrggbbクラス全体を透明度0.5にする*/
  background-color: rgb(73, 201, 192);
  opacity: 0.5;
}

transition プロパティ

アニメーションを追加するのに使います
transition: target duration;と指定します
:hoverと一緒に使われます

div {
  /*divのすべてに対して1秒間アニメーションを追加する*/
  transition: all 1s;
}

div:hover {
  background-color: blue;
}

line-height プロパティ

テキスト全体の縦の大きさを決めるプロパティ

/*文字が上にある*/
.btn {
  height: 70px;
}
/*文字が縦の真ん中に行く*/
.btn {
  height: 70px;
  line-height: 70px;
}

font awesome

web ページで使うアイコンとかがある便利なもの
公式サイト
<head>に以下のように書き込むだけで使える

<head>
  <link
    rel="stylesheet"
    href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css"
    media="all"
  />
</head>
C言語プログラミング--1ガイドライン
linux c statfsシステム呼び出し