初心者からのWebサイト制作
今月2018年の9月より完全初心者から約３週間。
トップページ草案を作成しました。
制作時間はスキマ時間と夜中に起きて数時間ほど。
これまでの学習経過と、素人ながらにどのような事を対応したのか記します。
PC版(720px以上)
モバイル版(600px未満)
学習に使用したサイトや本
【学習に使用したサイト】ドットインストール、progate
【学習に使用したBook】
HTMLやCSSの基本文法は「HTML5&CSS3レッスンブック」、ページレイアウトやレスポンシブ対応は「HTML5&CSS3デザインブック」という順番で進めました。
ドットインストールという学習サイトにて「基礎文法入門」、「CSS基礎文法入門」辺りの無料講座を受講。
私は下記の点を意識しながら学習しました。
ココがポイント
- 動画を見ながらシャドーイング(同じコードを打つ。)
- 何か値を入れるときは動画とは違う値を代入してみる。
オンラインで学習できる環境があるならば、ドットインストールでコードを勉強。
通勤時間などではレッスンブックで復習、一通りコードを理解したら、デザインブックでレイアウトやテクニックを学びました。
googleフォントの使い方
googleフォントを使いました。
日本語フォントはまだ少ないのですが、キレイなフォントがあるので、一度覗いてみてください。
フォントを変えるだけでも文章の印象がガラリと変わるので、気に入るフォントを見つけるまで何パターンか試してみると良いと思います。
使い方はサイトの右側にある「search」のLanguageをJapaneseに切り替えると日本語フォントが表示されます。
ちなみにこのブログでは「Kosugi Maru」に設定しています。
使用方法は、まず使いたいフォントの右上の「＋」をクリックします。
クリックすると下に「1 Family Selected」という黒いバーが現れるので、そちらをクリックします。
「linkタグ」をHTMLのHead部に、「font- family」の部分をCSSの適用したい場所に記述します。
ただ、「font-family」の部分は他に設定したいフォントがあれば、その順に記載しておくと良いです。
当ブログでは下記のように設定しています。
font-family:'Kosugi Maru',"meiryo","メイリオ","MSPゴシック",sans-serif;
当初はメイリオを一番最初にしていたいのですが、'Kosugi Maru'のフォントが気に入ったので、最初に設定しています。
Awesomeフォント
AwesomeフォントはtwitterやFacebookなどの各種SNSアイコンや、絵文字のようなアイコンをフォントとして使用できる便利なフォントです。
Awesomeフォントの使い方はサイト上部のSearch icons..に使用したいアイコンを英語で入力します。
例でtwitterと検索すると、無料の場合はtwitterもしくはtwitter-squareが出てきますが、どちらか好きな方を選びます。(例ではtwitterを選んでいます。)
右下の「Start Using This Icon」を選択します。
無料で使用する場合は「FA Free」を選択し、「Next」を選択し、次のページに表示される「link」タグをgoogleフォントと同様にHTMLのHeadにコピペします。
実際に使用する場所に貼り付けるコードは先ほどの図の上にある「i class」から始まるタグをコピーして使用します。
レスポンシブ対応
「レスポンシブ対応」とは解像度の異なるパソコンやスマートフォンでも見やすいように適時表示を変える対応です。
「モバイルファースト」という考え方が広まりつつあり、閲覧しているデバイスの解像度に応じて、見やすい表示に切り替えてあげる必要があります。
レスポンシブ対応については「HTML5&CSS3デザインブック」が分かりやすく、この本でレイアウトのイメージを掴みました。
ブログ風サイトとビジネス風サイトの２パターンでサンプルがあり、雰囲気の異なるデザインを学ぶことができます。
最適なブレイクポイントは？
「ブレイクポイント」とは、上記で説明した解像度に応じて表示を切り替える際にどの解像度を基準として切り替えるかの値となります。
スマホによって解像度も異なるので、どの解像度を境に切り替えるか悩みました。
The Ultimate Guide To iPhone Resolutions
iPhone歴代の解像度などは上記ページを参考にしました。
iPhone6以降を持っている方が多いと思うので、横414px辺りが基準になるかと思いました。
しかし、最近では小さい液晶でも高解像度を出力できるよう、1マスに2～3ピクセル分表示できる密度が高いディプレイが採用されており、
実解像度は2倍や3倍で表示される機種もあります。
そうなると、iPhone6以降で横が750pxになるので、キリの良い720pxを1つ目のブレイクポイントとしました。
下記のサンプルページを作成するにあたり、まずはどのようなレイアウトにするかメモ帳で図を描きました。
【PC版(横720px以上)】
■Header（タイトルロゴやナビゲーションバー)
横幅一杯に表示。
■Body（サイドメニューやメインコンテンツ）
サイドメニュー３ 対 メインコンテンツ(黒板)７の割合で分割。
■Footer部（プライバシーポリシーや著作権表記)
横幅一杯に表示。
【スマホ版１(横719px以下600px以上)】
■Header（タイトルロゴやナビゲーションバー)
横幅一杯に表示。
■Body（サイドメニューやメインコンテンツ）
サイドメニュー → メインコンテンツの順にそれぞれ横幅一杯に表示。
■Footer（プライバシーポリシーや著作権表記)
横幅一杯に表示。
ですので、Body部だけ横並びから縦並びに変更し、それぞれを横幅一杯に広げました。
レスポンシブ対応するためにはhead内に下記のmetaタグを記載します。
<meta name="viewport" content="width=device-width,initial-scale=1">
こちらを記述することで横幅が各デバイスのサイズに変更されます。
各解像度によって表示を切り替えるためには下記を記載します。
@media screen and (max-width:○○px) {
;
}
上記の(max-width:○○px)は、ビューエリアの最大幅で、この解像度よりも小さくなったら、{ }内の記述が反映されます。
基本的にCSSは上から下へ上書きされていくので、この記述のように反映させたい重要度の高い記述は一番下へ書いてあげた方が良いです。
ちなみに、第2のブレイクポイントとして、600pxを設定しています。
理由は、ナビゲーションバーを横幅を各150pxに設定していたので、600px付近で2列になってしまいました。
そのため、600px以下の場合はAwesomeフォントを非表示にすることで、横一列に表示するように対応しました。
素人ながらにこれらを反映し、サンプルページを作成しました。
こだわりはメインコンテンツの黒板と黒板消しをdivでお絵描きしてみました。
宜しければご感想お待ちしております。
まとめ
2018年9月1日から勉強を始めて約3週間。
ドットインストールやprogateなどのオンラインかつ無料で学べるサイトが増え、初心者でも挫折せずにプログラミングを学べる環境が出来ていると思います。
動画を見ているだけだと分かったつもりになりますが、実際に作り始めると、親要素に子要素が入らないとかそういう初歩的な所でつまずいてました。
やはり実際に作ってみるのは大切だと思います。
今後はデザインツールと、サイトに動きやデータベースアクセス等の機能を盛り込んでいきたいので、
JavascriptやPHPを学びつつ、自らデザイン出来るようにしたいと思います。
