Webエンジニア目指して#4

Progate HTML CSS

どうも休みの日１日１食マンです

 

早速有料入ってProgateのHTML&CSS中級、ヘッダーの部分をやりました。

キリがいいのでここでいったんまとめます

CSS

  • background-image:url(画像URL);　背景画像　　
  • background-size: cover;　画面サイズに合わせた背景の拡大縮小
  • margin:0 auto;　中央寄せ
    →margin:auto; 特に前もって親のmargin指定してなかったらautoだけでいいみたいです。あと「ブロック要素の中央寄せです。」（2019/8/16追記）
  • opacity:(0.0~1.0);　透明度（0:透明←→1:不透明）
  • letter-spacing:5px　文字間隔5px
  • widthやheightはインラインに使えない（ブロックレベルのみ）
    →display:inline-block; で解決　（インラインブロック化）
    →このプロパティには他にinlineとblockがある
  • divは"btn red" "btn blue"のように半角スペースで区切るとbtnクラスに内包してredクラス、blueクラスを指定できる
    内包しません。複数クラスを適用します。上の例だとbtnとredのスタイルが適用されます。それぞれのスタイルが被ると、cssの処理順に従って下の情報が優先されます。(2019/9/27追記)
  • セレクタ:hover{}でマウスオーバー時にCSSを適用させることができる
  • border-radius:5px　ブロックの角を半径5pxで丸める
  • text-align:center; インライン系の要素を中央寄せ
    →他にはleft rightがある
    →margin:0 auto;と似ているがmarginはブロック、text-alignはインライン

HTML

  • アイコン埋め込みについては ttps://fontawesome.com がアイコン素材豊富
  • 使いかたは上記リンクにあるため簡潔に書くと、DLしたCSSをHTMLのheadで読み込んで、HTMLで<span class="fa fa-facebook"></span>
    この例ではfacebookのアイコンが表示される
    faクラスのほかにfar(regular)、fas(solid)、fal(light)がある

流石にwebデザイン3級程度じゃここら辺からもうほとんど知らないですね。表現方法を次から次へ学べるので面白いです。高校の時web部入っとけばよかったなあ

 

ではでは。