#4 progateでHTMLを学んでwebエンジニアを目指す!~レスポンシブデザイン~

HTML&CSS
この記事は約7分で読めます。
スポンサーリンク

フロントエンドエンジニアを目指してHTML&CSSを勉強中の管理人。

この記事のシリーズはそんな勉強の記録です。

webエンジニアへの道

webエンジニアを目指して勉強する当ブログ管理人の記録です

progate学習記録

プログラミングのオンライン学習サービス[progate]を使って学習した記録です

学んだコース

今回修了したコースは、progateの【HTML&CSS上級編】。

ついに上級編まで終わらせることができました。

progateを始めてから4日で到達というスピードですが、しっかり頭に入っているかは心配です(笑)

HTML&CSS上級編では、スマホ/タブレット/PCの画面サイズによってHTMLの見た目を変えるレスポンシブデザインについて学びました。

学んだ内容をアウトプット!

今回も勉強した内容を使ってオリジナルのwebページを作ってみました。

今回は「企業のサービス紹介のページ」という設定で作りました。

webページの設定

私がwebページを作るにあたり、適当に設定した企業の情報はシャワー代行サービスの会社。

朝起きて、シャワー浴びるの面倒くさいな~と思ったのでシャワーを代わりに浴びてくれる会社を想定。

代わりに浴びられてもどうしようもないですが。。笑

ワイヤーフレームも作ってみた

どうやら世の中のwebデザイナーは、仕事を受けるときにページのレイアウトを決めるワイヤーフレームなるものを作っているらしい。

ちょっと調べて、まだ早いと思いつつもなんとなく作ってみた。

普通は

  • ページに盛り込む内容を出す
  • 内容を同じグループにわける
  • グループごとの優先順位を決める
  • レイアウトする

という流れらしいけど、初めてなのでいきなりレイアウト。

でもまだ作れるレイアウトが限られているのでワイヤーフレームを無視したデザインになってしまった。

作った意味が無くなっちゃったけど、ワイヤーフレームを作るという経験も積んでいきたい。

作成したwebページ

今回実際に私が作成したwebページはこちら。

今回はレスポンシブデザインも対応させたので、スマホやタブレットでもレイアウトが崩れず見えると思います。

ボタンのアニメーションやマウスがリンクに乗った時のアニメーションも作ったので見てみてくださいな!
(どこにもリンクつながっていないので安心して)

progateを始めて4日でこんなものが作れるようになるよ…!

Shower Freedom

課題としては、習ったレイアウト(背景に文字を重ねる)のトップしか今のところうまく作れないということ。

これからもっとレイアウトや表現方法を学んでいきたい!

学んだ内容の備忘録(HTML&CSS)

ここからはprogateの【HTML&CSS上級編】で学んだ内容の備忘録です

レスポンシブデザインとは

webページは、見る人が使うデバイスによって画面のサイズが異なる。

スマホなら狭いし、タブレットは中くらい、パソコンは大きいといった具合。

このとき、パソコンを対象にしてページを作っていると小さい画面で見た時に文字が大きかったりレイアウトが崩れたりしてしまう。

これを防ぐためにサイズによって別々のCSSを書いておく必要がある。

viewportの設定

レスポンシブデザインをするとき、まずviewportの設定をしておかないと正しく反映されない。

headタグ内に次のように書く。

コードの意味は今のところ分からない

<head>
   <meta name="viewport" content = "width=device-width,initial-scale=1.0">
</head>

メディアクエリでCSSを別々に書く

実際にサイズによってCSSを変えるときは次のように書く。

下の場合、最大サイズ(画面サイズ)が1000px以下の時に適応される。

@media(max-width:1000px){
  .hoge{
     font-size:24px;
   }
}

min-sizeとすれば逆に最小のサイズで指定もできる。する必要があるのかはわからない。

ちょっと引っ掛かりポイントだなと思ったのが、CSSが適用される順番は上からだということ。

例えば以下のコード

@media(max-width:670px){
  .hoge{
     font-size:16px;
   }
}

@media(max-width:1000px){
  .hoge{
     font-size:24px;
   }
}

この場合に横幅670px以下のデバイスで見た時、

  1. max-width:670pxの部分が適用
  2. max-width:1000pxの部分が適用(上書き)

となってしまい、結果的にmax-width:670pxのところは打ち消されてしまう。

したがって、必ずサイズが大きい順に書く必要がある。

ブレイクポイントとは

上記のコードでの1000pxや670pxのことをブレイクポイントという。

一般的なスマホのサイズなどによって変わってくるらしい。

今回は670pxと1000pxをブレイクポイントとした。

レスポンシブデザインで直すところ

演習してみてレスポンシブデザインでなおすところはこんなところなのかな?と感じたのでメモ。

  • 文字サイズ
  • ヘッダーのメニュー
  • フッターの表示
  • コンテンツの横幅
  • ボタンの横幅
  • 文字の揃え位置

パソコンでpaddingやmarginをピクセル単位(px)でとっていると、スマホやタブレットの時に見栄えが悪くなりがちな気がする。

5pxとかちいさいのならまだしも、無理やり200pxとかで位置を調整しているとスマホ用の画面では大きすぎるときがある。

位置の調整までレスポンシブデザインの設定で書き直すか、最初から%などの相対的な値で指定したほうが楽だと思った。

border-boxでpaddingを範囲に含める

普通、要素のwidthにpaddingの値は含まれない。

widthが50%、左右のpaddingが10pxと設定して2つ並べると、(50%+10px)x2 で100%を超えてはみ出してしまう。

こんな時paddingごとwidthに含めて設定できる。

*{
   box-sizing:border-box;
}

*というのは「すべてに対して」という意味。

一部分だけで考えると後で見直したときごちゃごちゃしてわかりにくいから全体にやっておくことが多いだとか。

paddingは含まれてもmarginは含まれないので注意。

子要素でfloatにしているときの親要素の高さ

普通にやっていると、親要素の高さは子要素を包む形で変化する。

しかし、子要素がすべてfloatのときは親要素の高さが0になる

そんな時は空のdivとclearを利用して無理やりfloatではない子要素を作ってあげる。

hoge1とhoge2がfloatで、clearにでfloatをリセットしている。

<div class="wrapper">
   <div class ="hoge1">
      ...
   </div>
   <div class ="hoge2">
      ...
   </div>
   <div class="clear"></div>
</div>
.hoge1{
   float:left;
}
.hoge2{
   float:left;
}
.clear{
   clear:left;
}

これを上級編でいわれたので、初級編や中級編でアウトプットを作っているとき頭を抱えていた。。

もっと早くいってほしかった~~

まとめ

今回はprogateを始めて4日目、【HTML&CSS上級編】で学んだ内容の確認と実際にアウトプットとして作ったサイトを紹介しました。

HTMLの知識が全然ない素人でも、4日で自力でこんなサイトをつくれるのはうれしい。
(他の言語のプログラミング経験はあるけど..)

こういった言語に初めて触る人でも、時間を書ければ絶対にかけるようになると思う!

これからもフロントエンドエンジニアを目指して勉強をしていくので、これから勉強を始めたいという方や今現在勉強をしているという方はお互い頑張っていきましょう!

Twitterで活動しているのでよかったらみてみてください~~
(このボタン⇩も直接html&cssで書きました!)

コメント

タイトルとURLをコピーしました