概要
まっさらな状態からレスポンシブサイト作りに挑戦してみた。
やったことを全部書き留めておきます。
1. HTML & CSS の学習
Progate に有料登録。
ひとまず、HTML & CSS の初級編と中級編を一気にやってしまう。（所要時間：３時間）
学んだこと
- HTMLの基本構造
- head内の書き方
- ブロック要素とインライン要素
- marginとpadding
- inputの使い方
- cssのセレクタ
- opacity, rgba
- display
- hover, active
- 相対位置と絶対位置
- Font Awesomeでアイコンをもってくる
- 中央揃えのやり方
2. 復習としてサイトを作る
2.1 サイトの設計図を書く
ざっくりとどういう配置にするのかをノートに書いておく。
今回は架空のアーティストのサイトをつくってみました。
盛り込んだ要素
- ヘッダーを固定表示
- ヘッダーのメニューにリンクを貼る
- hoverで色が変わるようにする
- 画像
- twitterなどのアイコン
- 送信ボタン
2.2 IDEとしてVisual Studio Codeをインストール
https://code.visualstudio.com/
評判が良さそうなので選択。
2.3 コーディング
他のコピペなど用いずに、０から入力。（所要時間 ４時間くらい）
Google Chromeで逐一更新しながら確認。
実際のコードはGitHubにあげました。
https://github.com/shintaro-hirose/test_1
苦労したこと・対応
- クラス名に意外と悩む → class="news-infomation" みたく、親要素名にハイフンでつなげる
- floatした要素が親要素からはみ出る → HTML上級編で解決！
- aのhoverが要素全体に効かない → displayでブロック化する
- 中央揃えについて、margin:0 auto; と text-align:center; の違いを理解する
- 最初にpaddingとmarginを0にすれば考えやすい
残った課題
- レスポンシブ化されていない
- メニュータブのボタンを押下しても何も起きない（ページ内で自動スクロールしてほしい）
3. 小休憩（Youtube動画）
疲れてきたので、以下の動画を1.5倍速視聴。
Build An HTML5 Website With A Responsive Layout
一回しか使わないところはclassのかわりにidを使ったり、レスポンシブの方法がだいたい掴めたり、役に立ちました。
4. HTML & CSS 上級編でレスポンシブデザインを学習
おなじみProgateにて。（所要時間：１時間）
学んだこと
- タブレットとスマホの横幅に対応させることが目的
- メディアクエリ
- ブレイクポイントをつくる
- box-sizing:border-box; で幅がborderまで含んだ値になる
- veiwport
- ヘッダーのメニューアイコンの作り方
5. さきほどのサイトをレスポンシブ化
こちら↓
https://shintaro-hirose.github.io/test_1/
具体的には
- viewportの設定
- ブレイクポイントを1000px, 670pxに設定
- 1000px以下では
- メニュータブの横幅ひろげ、文字間をつめる
- 670px以下では
- ヘッダーロゴを左詰め
- ヘッダーメニューを非表示、アイコンを表示
- ニュースの見出しと情報を縦ならびに
- アルバム情報の横幅を50%から100%に
- 登録ボタンの横幅を100%に
- twitterなどのアイコンの文字間をつめる
苦労したこと・対応
- widthとheightの絶対値が設定されているところの変更 → はじめからpxではなく%を使う
- list 全体を中央配置にして、それぞれのliを均等に配置するのに手間取る
課題
- hoverやaction、translateをもっと使いたい
- ボタン押下でのページ内スクロールができるようになりたい
6. 感想
Progateで学習して理解した部分も、実際に0からコードを書こうとすると難しいことがわかった。
htmlとcssを愚直に書いていったため結構な時間がかかった。
フレームワークを使えばより簡単に書けるそうなので、早く学びたい。