【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【2日目】
引き続き、書籍学習を進めます。前回で、共通のレイアウト作成が終了。
gomagaru.hatenablog.com
今回はこれをコピーしてから、フルスクリーンのトップページを作成しました！
Chapter 5 フルスクリーンページを制作する
2月2日(土) 1.5h
用語
・スネークケース...単語間をアンダースコアでつなぐ命名
・キャメルケース...単語の頭文字だけを大文字にする命名
・ブロック要素...1つのブロックとしてみなされ前後に改行が入る。高さや幅の指定が可能。例 : p、h1、div、ulなど
・インライン要素...テキストの一部として扱われ改行は入らない。高さや幅の指定もできない。例: a、img、spanなど
CSSプロパティ/UI
・ボタンにマウスを置いたとき色を反転する
.btn a:hover { text-decoration: none; background-color: #ffffff; // 背景白 color: #009cd3; // 文字青 // 通常時は背景と文字が逆 }
・フルスクリーンページの背景画像設定
1. 背景画像のパス指定
2. タイル状に表示しない設定
3. 画像表示開始位置を指定
4. 背景画像のスクロールを固定
5. 背景画像の大きさを指定
#index { // 画像パス指定 background-image: url(../images/bg-index.jpg); // リピートしない background-repeat: no-repeat; // 表示開始位置を 横位置 縦位置 で指定 background-position: center center; // 背景画像のスクロールを固定 background-attachment: fixed; // 背景画像の大きさをブラウザに合わせて拡大縮小に指定 background-size: cover; }
ポイント
・デザインカンプに忠実なコーディング...1pxまでの正確さは必要はないが、設計の意図を汲み取れるかでWebサイト全体のクオリティに大きな差ができる。
・記述が重複した時は1つにまとめる
・写真画像に文字を重ねる...文字の可読性を考慮する。
薄く編みかけをし、薄い黒色を重ねる。
・フルスクリーンページの背景画像サイズ...ファイルサイズが大きくなりすぎないこと、ディスプレイの大きさの違いで画質が荒れないことを考慮する。
<参考>実際の業務で多いサイズ : 2000×1500px程度
Full HD : 1920×1080px 今回使用画像 : 1260×840px
成果物
まとめと感想
フルスクリーンページをはじめて制作。
1から作るならば、シンプルな分画像と文字の見せ方をよりしっかり考える必要がありそうですね。
また、現在は全体的に基礎学習なので用意された画像とスタイル記述の写経で終わっていますが、それだけだとどうしても不足する部分があるなと...。
元々基本のコーディングが出来るようになったらWebサイトの模写でひらすらコーディング修行をはじめる予定でしたが、
デザイン側の知識、もっと欲しい...。
画像(写真)の選び方・作り方、色の組み合わせ、余白の使い方。
デザインの勉強もしながらそれもコーディングに落とし込めたら、強くなれそうだと思いました！
【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【続・1日目】
引き続き。
今回は環境設定〜Webページ制作・共通レイアウト作成まで。
Chapter 2 ~ 4
2月1日(金) 1.0h
Chapter 2 サイト制作の前に準備しておくこと
テキストエディタ
本ではBracketsでの開発が前提。
Brackets - A modern, open source code editor that understands web design.
使って2週間ほどのVSCodeがあるので、自分はそのままVSCodeを使用。
Visual Studio CodeでMacにフロントエンド開発環境をつくる - Miki's Blog
ショートカットキー
Bracketsでの場合の記述が多かったので、
Mac環境・VSCodeのショートカットキーを調査。
Google検索上位のものが見やすかった...
【Mac版】 VisualStudioCode キーボードショートカット - Qiita
Chapter 3 知っておきたいHTMLのきほんと書き方
※前の本に記載がない・新しい概念・要復習内容についてのみ記載
・head要素は「バーコード」と同じようなものと考える...人の目に触れないが、ブラウザや検索エンジンにとって重要な情報
・section要素とarticle要素の選び方...『複数のsection要素を1つのarticle要素が囲っている』のケースは多いが、文章構造によっては『複数のarticle要素をsection要素が囲う』ケースもあり、両者の間に上下関係があるわけではない
・div要素はレイアウト目的の「箱」
Chapter 4 知っておきたいCSSのきほんと書き方
※前の本に記載がない・新しい概念・要復習内容についてのみ記載
CSSプロパティ
・line-height...行間
・vertical-align...テキストや画像の垂直方向の位置揃え
・margin: 0 auto;...中央揃え、必ずwidthを指定してから記述する
デザインのポイント
・Webサイトの横幅サイズ「960px」...もっともよく使われるPCディスプレイサイズが1024×768pxであり、横幅が1024pxのディスプレイで問題なく表示される数字であるため、960pxが基準となる
成果物
共通レイアウトが作成できました。
まとめと感想
まずは、制作環境について。今回VSCodeをそのまま使うことにしましたが、
Bracketsの「クイック編集」がとっても気になっています。
(ショートカットキーで編集したいHTML部分関連CSSにアクセスできるらしい...)
テキストエディタどうしよってなった時に、ぜひ最初に試したいと思います。
HTML/CSSについては、前の本で学習した内容でほぼ理解でき、サクサクと制作が進められました。
既に学習したHTML要素やCSSプロパティについて、前書とはまた別の表現で記述されていて、わかりやすい表現が多かった印象です。
margin指定での中央揃えは何度も使っておきながら、横幅の指定が先に必要であることが
あまり印象に残ってなかった(...)ので助かりました...これで覚えた！
そして、今回はじめて共通レイアウトを作るということを実践。
Webサイトの統一されたデザインってこうやって作るのね。
以前はindex.htmlの1ページ作ったら終わりだったので、
作る規模を少し大きくできた一歩目として、何だかうれしくなりました。
次回、Chapter 5、トップページ制作です＼\٩( 'ω' )و //／
【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【1日目】
これから、こちらの本で学習進めていきます〜
新しい本・初日╭( ･ㅂ･)و
HTML&CSSとWebデザインが 1冊できちんと身につく本
- 作者: 服部雄樹
- 出版社/メーカー: 技術評論社
- 発売日: 2017/07/21
- メディア: 大型本
- この商品を含むブログ (1件) を見る
この日、たのしすぎたのかChapter 4まで
一気にぶっ通してしまいましたwww
たいへん学びが多かったので、記事を分けます。
本記事はChapter 1のまとめ。
Chapter1 知っておきたいサイトとデザインのきほん知識
2月1日(金) 1.0h
WebサイトのしくみとWebデザイン
用語
・ワイヤーフレーム...配置を記載した図面
・デザインカンプ...最終的なWebサイトの完成イメージ
・コーディング...デザイン案をコンピュータが処理できる形式に言語化すること
・ソースコード...Webサイトを再現可能な形式にしたもの、音楽でいう楽譜
・文章構造...見出しや文章、画像の論理的な配列
・SEO(Search Engine Optimization)...検索エンジンにヒットしやすくする施策
・ユーサビリティ...使いやすさ
・UI(ユーザーインターフェース)...ユーザーとの接点
・UIコンポーネント...UIの中でもWebサイトのパーツとなるもの(メニュー、ボタン、フォームなど)
・ユニバーサルデザイン...できるだけ多くの人が利用可能なようにしたデザイン
・アクセシビリティ...障害を持つ人など誰でも支障なく利用できるかを測る尺度
・ハイパーテキスト...複数の文章を関連付けるしくみ
・マークアップ...コンピュータが文章構造を理解できるように要素に目印をつけること(例:HTMLタグ)
・セマンティックウェブ...正確にマークアップしコンピュータが自動処理しやすくする
ポイント
・Web検索エンジンが正しく理解できるようなコーディング、SEOを意識する
・デザインありきでなく文章構造が正しいかを意識する
・デザインとは、自己表現ではなく問題解決の手段であり、コミュニケーションを最適化すること
・ユーサビリティに優れていることは良いWebサイトの必須条件
・アクセシビリティへの配慮でユニバーサルデザインを実現できる
Webデザインパターン
用語
・要素...Webページを構成する1つのかたまり
・ヘッダー...Webページの最上部。ロゴやナビゲーションメニュー、電話番号などを掲載
・ナビゲーション...サイト内を案内するもの。以下の種類がある
・グローバルナビゲーション...全ページに共通で表示される
・ローカルナビゲーション...あるコンテンツの中だけで表示される
・パンくずリスト...現在の階層を表したり、その上の階層への移動に用いる
・コンテンツ...各Webページの中身
・サイドバー...補足情報の掲載
・フッター...Webページの最下部。著作権表示や補足情報を掲載
・LP(ランディングページ)...ネット広告やリンククリック時に表示されるページ。一般的には、1ページで問い合わせや購入を促す独立したWebページのこと。
・ボックスモデル...Webページを構成する要素はボックスと呼ばれる四角形の領域を生成するという概念
・リッチデザイン...立体感を持たせたデザイン
・フラットデザイン...平面的でシンプルなデザイン
・カラム...段組、列のこと
レイアウトパターン
1カラム、2カラム、3カラム、グリッドレイアウト、フルスクリーン
WEBレイアウトの基本4パターンそれぞれのメリット・デメリット-エムタメ！
まとめと感想
SEO対策、アクセシビリティなど用語としてはよく聞いていたけれども、デザインとコーディングに必要な概念を
Webサイトのしくみと関連付けて考えたことが新鮮でした。
ユーサビリティ・アクセシビリティについては、
ビヨンセ様の公式Webサイトが訴訟されたというニュースが記憶に新しい。
headlines.yahoo.co.jp
画像を配置しただけのデザインで、とてもスタイリッシュでしたが
視覚障害者の方が内容を一切把握できなかったそう。
まさに今回の学習内容が体現されたようなニュースだなぁと。
私もcaptionやalt属性の設定をサボりがち。改めて、気をつけます...
フラットデザインへのトレンドの変化は、とても意外でした。
変化がはやい分野のようなので、常にアンテナを張って
色々なものから吸収していくことが大事ですね！
次回、【続・1日目】Chapter 2 〜 Chapter4 となります。
【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【6日目】
1冊目、最終章〜！
やっていきましょう＼\٩( 'ω' )و //／
1月31日(木) 2.0h
Chapter 7 Ajax通信のきほんを学ぼう〜jQuery、Vue.jsにもチャレンジ！
CSSプロパティ
position: fixed
要素の位置を固定する
header { position: fixed; /*画面内に固定する*/ top: 0; /*位置。top、left、right、bottom指定可能*/ }
z-index
重なり合う要素の優先度を指定する
header { z-index: 100; /*最小0、最大1000000000、大きいほど上に表示*/ }
JavaScript
配列Arrayオブジェクト
var 配列名 = ['値1', '値2', '値3', ...];
配列名[0]...値1、配列名[1]...値2、...
JSONデータをJavaScriptで扱う
・内部JSONデータからHTMLを生成する
例: <img src="ファイルパス">
1. createElementで新しい要素'img'を作成
2. setAttributeで属性'src'を追加
3. appendChildで属性の値にJSONから取得した値を代入
4.要素を追加
// JSON var images = [ { "path": "img/img_1.jpg", "caption": "It's a dog." "name": "taro" }, ... ] var img; document.createElement('img'); /*img要素生成*/ img.setAttribute('src', images[0].path); /*属性srcにimages配列0番目要素のpathを追加*/ document.getElementById('img_unit').appendChild(img); /*画像表示場所に要素を追加*/
・Ajax通信を利用して外部JSONデータ(.json)を取得
1. XMLHttpRequestオブジェクトでファイル読込
2. openメソッドで通信を開始
3. responseTypeで受け取るデータを指定
4. sendメソッドで値を送信
5. onreadystatechangeイベントで受信データを処理
6. responseプロパティで受信内容を参照
var ajax = new HMLHttpRequest(); ajax.open('GET', 'image.json'); // Get: 取得のみ POST: 送信もする ajax.responseType = 'json'; // text、arraybufferblob、document、jsonから指定 ajax.send(null); // null: 何も送信しないことを明示 ajax.onreadystatechange = function() { if (ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) { // データ取得時の処理。responseから参照 // 例: var data = this.response[i]〜img.setAttribute('src', data.path) } }
readyStateプロパティについて :
| 数値 | 定数 | 意味 |
|---|---|---|
| 0 | UNSENT | インスタンス生成したがopenメソッドはまだ利用せず |
| 1 | OPENED | openメソッドを使用した |
| 2 | HEADERS_RECEIVED | sendメソッドが使用され、ヘッダー部分が受信できた |
| 3 | LOADING | データ受信中 |
| 4 | DONE | 通信終了、すべてのデータを受信済 |
HTTPステータスについて :
| ステータスコード | 意味 |
|---|---|
| 200 | 正常終了 |
| 301 | Webページが移動した |
| 401 | 認証が必要 |
| 404 | ファイルが見つからない |
| 500 | 内部エラー |
for文
for (var i=0; i<10; i++) { // 処理 }
jQuery
jQuery
JavaScriptライブラリ。
｢Download jQuery｣から、｢Download the compressed, production jQuery X.X.X｣でダウンロード。
ファイルをWebページファイル群に｢js｣フォルダを作成して配下に置く。
htmlファイルのbody要素最後で読み込む。
htmlの内容を変更・取得
$('#img_unit').html('ここに画像を表示'); // 内容変更
alert($('#img_unit').html()); // 取得
cssの内容を変更・取得
$('#img_unit').css('margin-top', '100px'); // 内容変更
$('#img_unit').css('margin-top'); // 取得
メソッドチェーン
$('#img_unit').html('ここに画像を表示').css('margin-top', '100px');
要素の作成
$('作成する要素')
要素の追加
A.append(B); Aの要素にBが子要素として追加
A.appendTo(B); Bの要素にAが子要素として追加
成果物
まとめと感想
重ね合わせのレイアウトを実装できた。
また、JSONデータの扱いについて以下の方法を学習できた。
・内部から取得
・外部(.jsonファイル)からAjax通信で取得 - JavaScript、jQuery、Vue.js
JavaSctipr→jQuery→Vue.jsと進む中で、同じ成果物を実装しているのにも関わらず
どんどんソースコードがすっきりしていく様子に感動した。
ライブラリとフレームワークを用いることで全く違った書式となること、
実装の効率が高まること、特色のある機能があることを体験することができた。
ただ、今回は書籍内容に準じて開発を進めておりVue.jsはCDN利用、
使用エディタVSCodeの拡張機能などは利用しなかったため、
記述の補完もなくLive Serverで起動+Chromeデベロッパツールでのデバッグでは
確認できないエラーがあるなど、デバッグに苦労する場面があった。
(Vue.js使用コードにて用意する配列名を｢Photes｣としてしまうスペルミスが原因だった)
開発を本格的に行う時には改めて開発環境を見直したい。
【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【5日目】
Chapter 6 イベントドリブンのきほんを学ぼう〜DOMを使ってストップウォッチを作る
1月28日(月) 1.5h
Bootstrap
ボタンスタイル指定
| クラス | 表示 |
|---|---|
| btn-default | 白 |
| btn-primary | 青 |
| btn-success | 緑 |
| btn-info | 水色 |
| btn-warning | オレンジ |
| btn-danger | 赤 |
| btn-link | テキストの見た目 |
| btn-lg | 大きいボタン |
| btn-sm | 小さいボタン |
JavaScript
HTML内の書式注意 :
document.writeメソッドを利用するとき以外、
<script>要素は必ず<body>要素の最後か、<head>要素内に記述する
DOM(Document Objrct Model)
HTML要素をプログラムの対象(=オブジェクト)として扱う手段。
要素取得メソッド
・getElementsByClassName ... class属性から複数の要素を配列で取得。【書籍p.207 'Name'抜け】
・getElementsByName ... name属性から要素をNodeListで取得。
・getElementsByTagName ... タグ名から要素をHTML.Collectionで取得。
その他メソッド
・innnerHTML ... 要素の内容を書き換える
・remove ... 要素を削除する
<div class="container"> <p id="timer">00:00:00</p> // ID:timerの文章 <script> // ID:timer要素の中身を取得して書き換え document.getElementById('timer').innerHTML = '00:00:01'; // ID:timer要素を削除 document.getElementById('timer').remove(); </script> </div>
if...else文
if ( 条件) { // true時の処理 } else { // false時の処理 }
関数の定義
var 関数名 = function(変数) { // 処理内容 };
イベントドリブン
ユーザが何かしら操作を行った時にプログラムを動かすこと。
イベント ... 「ユーザがクリックした」などの動作。
イベントの種類
| イベント | 説明 |
|---|---|
| keydown | キーボードが押された |
| keypress | キーボードが押し続けられている |
| keyup | キーボードが押された状態から離された |
| mouseenter | マウスカーソルが要素に触れた |
| mouseover | マウスカーソルが要素に触れ続けている |
| mousemove | マウスカーソルが動いた |
| mousedown | マウスボタンを押した |
| mouseup | マウスボタンを離した |
| click | クリックした |
| dbclick | ダブルクリックした |
イベント監視方法
要素 .addEventListener( イベントの種類 , 処理);
document.getElementById('要素id') .addEventListener('click', function() {
});
※無名関数...名前の付いていないファンクション。例えば、上のfunction。関数を新たに定義する事なくイベントへの処理を記述できている。
タイマー処理
開始
処理を間隔ごとにくり返す
タイマーID = setInvertal( 処理, 間隔(ミリ秒) );
終了
clearInterval(タイマーID);
小数点以下を切り捨てる
整数 = Math.floor(小数);
要素にクラスを追加
要素.classList.add('追加クラス名');
例: STARTボタンをSTOPボタンに変える
this.innnerHTML = 'STOP'; this.classList.remove('btn-default'); this.classList.add('btn-danger);
成果物
【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【4日目】
Chapter 5 JavaScriptのきほんを学ぼう
1月26日(土) 0.5h
HTML内にスクリプトを記述する
<div class="container"> <script> // スクリプト </script> </div>
文法
命令の記述
オブジェクト. メソッド( パラメータ )
誰に. どうする( なにを )
コメント
/* 複数行 コメント */ // 1行コメント
変数宣言
var answer = 10; // var 変数名 = 値;
メソッド
画面に文字を表示する
document.write('<p class="date">20XX/01/23</p>');
日時を取得する
// 今日の日付を取得 var today = new Date(); // 現在日時を取得 var today_year = today.getFullYear(); // 年4桁 var today_month = tosay.getMonth(); // 月 var today_date = today.getDate(); // 日 // 任意日時を取得 var new_year = new Date(2017, 1, 1); // 元旦
絶対値
var num = Math.abs(-10); // numは絶対値10
成果物
まとめと感想
Hugoテーマを使う以外で、はじめてJavaScriptのソースをさわった。
変数宣言やメソッドの使い方などは、他言語での感覚と同じように記述できた。
画面に文章を出すときdocument.writeメソッドに与える文字列に
<p>要素を含めて記述する点が印象に残った。
( '<p class="date">' + todayHTML + '</p>' )
次章で、Webページ上のイベント関連を書けるようなので楽しみ。
【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【続・3日目】
多くなったので記事分けました！↓の続き。
【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【3日目】 - Miki's Blog
1月25日(金) 計1.5h
Chapter 4 CSSフレームワークのきほんを学ぼう〜Bootstrapでフォームをつくる
1月25日(金) 1.0h
Boostrap
Bootstrap · The most popular HTML, CSS, and JS library in the world.
米Twitter社が開発したCSSフレームワーク。
書籍はバージョン3に対応。
2019年1月現在の最新版は4.2.x。
トップページ右上のプルダウンより過去ページに飛べる。
今回は書籍に合わせて3をCDNで使用、その後は書籍通り。
CDN(Contents Delivery Network)
専用の配信サーバを準備することで、CSSやJavaScriptなどを
ダウンロードせずに利用出来るようにした仕組み。
同じファイルをサイト毎に複数回ダウンロードすることや
Webブラウザに保存されるキャッシュの無駄を防ぐ。
ノーマライズ
cssファイルでsanitize.cssを読み込まずにノーマライズされた見た目になる。
containerで囲むと左右に余白を設けた中央揃えに。
クラス名と機能の対応はドキュメントを参照。
グリッドシステム
floatで実現した回り込みは、グリッドシステムを利用して実現できる。
col-XX-Xの形で記述。
XX : ブレイクポイントの画像幅を設定できる。
| XX | 画像幅 | |
|---|---|---|
| xs | ~767px | |
| sm | 768~991px | |
| md | 992~1199px | |
| lg | 1200px |
X : 画像幅を12区画(カラム)に分けた時に指定する画像幅の大きさ。
合計12で設定する。
例 : 画像幅767px以下で標準、768px以上で6カラムにする。
(1:1で分かれた横並びにレイアウトする)
... <div class="row"> <div class="col-sm-6"> ... </div> <div class="col-sm-6"> ... </div> </div>
フォーム
文字列フォーム、ドロップダウンリスト、
チェックボックス、ラジオボタンを設定。
大体Chapter 2内容とphp作成時の知識でOK。
Bootstrap特有の事項 :
・横並びに配置する設定
チェックボックス・ラジオボタンを横並びに配置したいとき
labelにinlineクラスを付加する。
checkbox-inline or radio-inline
※書籍p.164のコードそのままではチェックボックスは横並びになる。
書籍p.165の図4-2-10のように縦に並ぶ表示にするには、
label クラスで"checkbox"を追加した。
例: ラジオボタンを横並びに配置
<label class="radio-inline"> <input type="radio" name="q1" id="q1_1" value="A型"> </label> ...
・テキストエリアの横幅100％がデフォルト
Bootstrapを使用していない時は幅を指定する記述が必要になる。
・ボタンに標準スタイルを適用する
例: ｢送信｣ボタンに標準スタイルを適用する
btn-default クラスを付加。
<button type="submit" class="btn btn-default">送信</button>
・赤に白文字で警告を出す
label-danger クラスを付加
例 : ｢お名前｣が必須項目
<label for="name">お名前<span class="label label-dangar">必須</span></label>
フォームのRWD対応で重要な事項 :
・画像幅が狭いときは縦並びにする
優先順位に気をつける。最優先の指定｢!important｣を使用する。
例 : 通常時inlineのラジオボタン
@media only screen and (max-width: 992px) { .radio-inline { display: block; /*ブロック要素にして改行させない*/ margin: 0 !important; /*余白を0に強制*/ } }
・labelの重要性
入力ボックスの要素で、例えば｢span｣を使用すると
指で確実に選択領域に触れなければならず、選択が困難になる。
対して、｢label｣を使用すると、対象の入力ボックスが関連付けられてタップ・クリックでフォーカスされるようになる。
まとめと感想
Bootstrap導入〜簡単なレイアウト指定の基本を学習。
概ねChapter 2で触れた知識にBootstrap機能による補助が加わった感じ。
必須事項への警告表示など、css側に背景色・文字色などの指定要らずで感動。
グリッドシステムはHugoテーマをカスタムした際に触れており
復習、指定するsmやmdの意味について理解が深まった。
RWD対応時にはレイアウトをどう変化させるかユーザー目線で考える必要があるので、実機での確認がベストと思った。
今回のバージョンは古いそうなので、最新版のv4.2を利用して
本を見ずに同じレイアウトで作成するなど練習したい。
以上！次回、JavaScriptへ〜
