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

女性とコード

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

 

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

 

 

✔︎本記事の内容

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

 

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

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

 

Progate中級編では、いい感じなWEBサイトが作れるようになります。

 

HTMLでは、箱のイメージをしつつ、CSSでオシャレなデザインに仕上げます。

 

今回学ぶCSSに関しては、今後もかなりお世話になると思うので、繰り返し勉強し身につけましょう。

 

自分のブログなんかのCSSをいじれるようにもなるので、ここから幅が広がりますよ。

【DAY4.】Progate HTML & CSS 中級編(最後まで)を解説

中級編もサクッと終わらせてしまいましょう。

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

さて、中級編まで学習してきましたが、、、

 

  • 先にHTMLを仕上げる
  • その後CSSを仕上げる

 

余談ですが、仕上げる手順は上記のようにしましょう。

 

 

HTMLでは、<div>タグを多用するので、箱の意識が大切です。

 

CSSは、ボリューミーなので、繰り返し学習して内容を理解しましょう。

 

HTMLでは箱の意識を忘れないこと

HTMLはこのように箱の構造になっています。

 

マトリョーシカを意識してみて下さい。

 

<div class="lesson">
  <div class="lesson-icon">
  <img src="#">
  <p>HTML & CSS</p>
  </div>
  <p class="txt-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます</p>
</div>

 

こんな感じですね。

 

<div>タグをどこからどこまで囲むのかをミスるとエラーで苦しみます。

 

頭を少し使いますが、<div>タグを設定したら、その箱がどんな構造になるのかをイメージしながらコーディングしましょう。

 

要素を横並びにしたい時の注意点

今回の場合なら、、、

 

  • float: left;
  • width: 25%;

 

25%×4 = 100%ですので、ちょうど4つのコンテンツが左から順に横並びになります。

 

100%を超えた場合は、最後のコンテンツは下にズレます。

 

初心者泣かせのposition relativeとabsolute

positionとは、要素の基準位置を決めるプロパティになります。

 

position relativeとabsoluteで躓くと思いますが、ちづみさんが下記で分かりやすく解説しています。

 

 

  • position: relative; 基準は今いる場所の左上(親要素に指定される)
  • position: absolute;基準はウィンド又は親要素の左上
  • position: fixed; 基準を固定する

 

今回の場合だとこんなCSSでもできちゃいます。

 

<!-- 親要素に指定する  -->
.lesson-icon {
position: relative; 
}
<!-- 乗せたい子要素を親要素の中心に持ってくるよ  -->
.lesson-icon p {
position: absolute;
top: 50%;
left: 50%;
transform:
translateY(-50%)
translateX(-50%)
}

 

乗せたい要素はエビ(ab)を乗せると覚えよう!

立体的なボタンを作ろう

立体的なボタンを作る手順を解説します。

 

  • ボタンに影をつける
  • ボタンを押したら凹むように見せる(影と同じ分だけ下げる)

 

box-shadowとactive、position: relativeを組み合わせよう

<span class="btn message">立体的なボタンの作り方</span>
<!-- btnのCSSは省略  -->
<!-- X軸に0px、Y軸に7px、#1a7940色の影が付いたボタンができるよ  -->
.message {
box-shadow: 0 7px #1a7940;
padding: 15px 40px;
background-color: #5dca88;
cursor: pointer;
}

<!-- activeを使ってボタンを凹むように見せるよ  -->
.message:active {
position: relative;
top: 7px;
box-shadow: none;
}

 

これで、ボタンをクリックした時にボタンが凹むようになります。

 

ぜひ、自分なりにCSSを変更してアレンジしてみて下さい。

headerを固定して奥行きを付けよう

headerを固定する手順は下記のとおり。

 

  • position: fixedで固定する
  • z-indexで奥行きをつける

 

まず、position:fixedでheaderを固定しましょう。

 

次に、z-indexで画面をスクロールした時に、固定したheaderの下にスクロール画面が潜り込むように設定します。

 

たとえば、僕のサイトのレスポンシブ設定は下記のように設定してます。

 

@media only screen and (max-width: 670px)
.header {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
}

イケイケな感じに仕上がります。

 

ちなみに、「z-index」とは、z軸の高さを表します。

 

今回の場合だと、headerがz軸方向(画面側)に10の高さという設定になります。

 

結果、画面スクロールした時に、headerの下にもぐりこむことになります。

挫折は最高の友達です

さて、これで中級編まで終了しましたね。

 

内容はとても濃く、ここまでの内容がわりと理解できていれば、HTMLとCSSの基礎は出来上がっていると思います。

 

とはいえ、むずかしいなと思った人も多いハズです。

 

ここで挫折はまだ早すぎますが、わからなければ自分で調べて課題を解決させる力を付けましょう。

 

プログラミングはググる力が大事です。

 

さて、次のステップはデイトラDAY5.です。

 

レスポンシブサイト(タブレットやスマホ用サイト)の作り方ですが、今の時代はパソコンよりもスマホで検索する人の方が圧倒的です。

 

つまり、レスポンシブ対応ができていないと顧客目線ではないので、評価が悪くなってしまいます。

 

レスポンシブ対応を必ず身につけて、月5万を稼ぐスキルを目指しましょう。

 


スマホデザイン 【DAY5.】30DAYSトライアル5日目をわかりやすく解説

 

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