【告知】ノマドエンジニア養成ブートキャンプ

【DAY3.】30DAYSトライアル3日目をわかりやすく解説

Progate中級編

 

おはこんばにちは、ミヤビです。

 

今回は、#30DAYSトライアル のDAY3.について解説します。

 

 

✔︎本記事の内容

  • DAY3.『Progate HTML & CSS 中級編(3章まで)』の解説

 

✔︎30DAYSトライアル1stの最終目標

  • 月5万を稼ぐスキルを目指す
  • 未経験からWEB系エンジニアの転職を目指す
  • 未経験からWEB系ノマドエンジニアを目指す

 

さて、Progateは中級編から有料です。

 

30DAYSトライアルのProgate期間はたった1週間なので、1,000円課金すれば、人生が豊かになれますよ。

【DAY3.】Progate HTML & CSS 中級編(3章まで)を解説

さて、中級編から少しレベルアップします。

とはいえ、ビビらなくてオッケーなので、とりま手を動かしましょう。

DAY3.の抑えるべきポイント

DAY3.から本格的なWEBサイト作りが始まります。

 

 

レイアウト(箱)のイメージが必須です

 

分かりにくければ、マトリョーシカをイメージしてみて下さい。

 

  • まず、top-wrapperというclassがある
  • その中にcontainerというclassがある
  • その中にbtn-wrapperというclassがある
  • その中に「btn signup」「btn facebook」「 btn twitter」というclassがある

 

大きな箱の中に、中位の箱がいくつかあって、そのそれぞれの箱の中にまた小さな箱があるイメージです。

 

上記画像だと、こんな感じです。

 

<div class="top-wrapper">
  <div class="container">
    <h1>LEARN TO CODE.</h1>
    <h1>LEARN TO BE CREATIVE.</h1>
    <p>Progateはオンラインプログラミング学習サービスです。</p>
    <p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p>
    <div class="btn-wrapper">
      <a href="#" class="btn signup">新規登録はこちら</a>
      <p>or sign up with</p>
      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
    </div>
  </div>
</div>

 

まずは、divタグとclass指定で箱のイメージを意識しましょう。

 

背景画像の指定は2種類あります

WEBサイトに画像を載せる方法は2種類あります。

 

  • HTML:<img src=”画像のurl.png”>
  • CSS:background-image: url(画像のurl.png);

 

HTMLで画像を表示させる場合は、画像を説明的に使う場合です。

 

CSSで画像を表示させる場合は、画像の上に文字や説明を表示させるなど装飾的な場合に使います。

 

要素を中央に配置しよう

要素を中央に配置する方法は2つあります。

 

  • margin: 0 auto;
  • text-align: center;

 

margin: 0 auto;

containerクラスのような大きなブロックに対して指定します。

 

「margin: 0 auto;」とは、上下のmarginが0で、左右のmarginが自動に設定されるという意味です。

 

厳密にはwidthを設定する必要がありまして、親要素のwidthとの差分のmarginを左右均等に割り振ります。

 

その結果、要素は中央寄せになります。

 

text-align: center;

テキストやボタンのような、インライン要素、インラインブロック要素に対して指定します。

 

その他にも、leftとrightに指定することもできます。

 

インラインブロックとdisplay

インラインブロックの説明

 

要素には3種類あって、、、

 

  • ブロック要素(div、p、h1~6など)
  • インライン要素(a、span、imgなど)
  • インラインブロック要素

 

それぞれの特徴は、上記の画像のとおりです。

 

初期設定は、基本的にブロックかインライン要素に指定されています。

 

必要があれば、CSSのdisplayプロパティで変更しましょう。

 

displayプロパティは控えめにいって便利すぎ

基本的な使い方は、要素を横にズラッと並べたい時ですね。

 

あとはpaddingやmarginを上下左右に指定したい場合ですね。

 

ナビゲーションメニューやリンクボタンを横に配置する場合は便利です。

 

【CSS】displayの使い方を総まとめ!inlineやblockの違いは?

Font Awesomeの使い方

使い方は下記のとおり。

 

  • Font AwesomeをCSSで読み込む
  • spanタグに、faクラスとfa-アイコン名classを指定する

 

HTMLのheadタグ内に下記をコピペでオッケー。

 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Font Awesomeの例 -->
<span class="fa fa-youtube">YouTube</span>

 

他にもFont Awesomeの使い方はあるので、下記を参考にして下さい。

 

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

CSSの用法を覚えよう

「全体から部分」「上から下」を意識してCSSを入力しましょう。

 

箱(マトリョシカ)のイメージです。

 

本件で重要なCSSをピックアップ

 

  • background-size: cover; 表示範囲を埋め尽くす
  • background-color: rgba(); 背景色のみを透明化する
  • opacity:; 要素の中身を全て透明化する
  • margin: 0 auto; width指定で要素を中央に寄せる
  • text-align: center; テキストなどの要素を中央に寄せる
  • letter-spacing:; 文字の間隔を調整する
  • display: inline-block; インラインブロックに変更する
  • border-radius: ; 角を丸くする
  • :hover セレクタにカーソルが乗った時にCSSを指定する
  • transition: all xs; 変化を付けたい時にhoverと組み合わせる。

 

千里の道も一歩から

Progate中級編は、初心者にとっては少しハードルが高かったと思います。

 

一回では理解できない人が多いと思われるので、何周か繰り返して学習しましょう。

 

とはいえ、コードを暗記する必要はないです。

 

わからなければ、ググるとコードは出てきますし、class名やCSSの値に正解はありません。

 

自分でコードをアレンジして実験してみるとより理解は深まるハズです。

 

さて、次はDAY4.Progate中級編の残りを全て終わらせましょう。

 

 

女性とコード 【DAY4.】30DAYSトライアル4日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】