フロントエンドエンジニアが教える3つの本格れいあうと
スタンダード・グリッド・シングルページレイアウトの作り方
本書はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍
現在主流なWebページのデザインスタイル、「スタンダードレイアウント」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。
実際のWeb制作の現場と同様に、サイトのデザインを元にして骨格をみきわめ、枠組みから中身まで一通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なくみにつけることができます。
３つのサイトを作成することで、「本格的なサイトを作れた」「こういったレイアウトの場合こうコーディングすればいいというぐたいてきなテクニックがわかった」というような手ごたえを得やすく、まなぶことへのモチベーションが下がらずに高まる構成にしています。
駆け出しのフロントエンドエンジニアや、HTML/CSSコーディングに興味はあっても実践的な機会がないデザイナー、バックエンドエンジニアなどが、実際にサイトを作ることを通してスキルアップすることを目標とした一冊です。
ゼロからコーディングを3回も繰り返せば、だんだんとイメージをコードに変換するコツを掴めてくるでしょう。
本書ではモダンなコーディングを意識している。ウェブでの表現は、日々リッチになっていく。
Part1
https://www.shoeisha.com/book/hp/mcoding/1/
このパートでは、一番スタンダードなレイアウトのサイト制作を通してHTML5でのマークアップの仕方やHTML/CSSコーディングの流れをつかんでいきます。
このレイアウトの特徴
よのなかのさまざまな形のWebサイトがありますが、その中でも多くのサイトにあてはまるのが、「ヘッダー、フッター、サイドメニュー、メイン領域を持つレイアウトです。
サイト内で共通となるヘッダー、フッター、サイドメニューにサイト内の各コンテンツへのリンクを配置することで、すべてのページから効率的に各コンテンツへの導線をひくことができるため、ポータルサイト、コーポレートサイト、ショッピングサイト、ニュースサイト、ブログなど情報量が多くページ数の多いサイトに向いています。
閲覧者にとっても見慣れたレイアウトなので、どこがメインのコンテンツであるのかが直観的にわかり、視線が迷うことが少ないです。その反面、第一印象のインパクトには欠けるため、トップページは個性的なレイアウトで印象的なビジュアルにし、下層ページからこのスタンダードなレイアウトに切り替えるパターンも見られます。
サイトを構成する要素
ヘッダー：サイトロゴ、ナビゲーションメニュー
サイドメニュー：ランキング、ドキュメントリスト、検索ボックス
メイン領域：特集コンテンツ、更新履歴、記事ブロック
フッター：フッターメニュー、コピーライト
Chapter02 ベースのコーディング
それぞれの箇所のコーディングに入る前に、サイト全体に影響する部分のコーディングを行います。
・ファイル構成
今回作成するスタンダードレイアウトサイトのファイル構成を確認しましょう。
ベースとなるファイルは、翔泳社のダウンロードサイトで配布している。
シンプルになったHTML5の記述
HTML5からはDOCTYOE宣言やmeta要素、外部ファイルの読み込みを簡潔に書けるようになりました。
HTML4:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
HTML5:<!DOCTYPE html>
HTML4:<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
HTML5:<meta charset=”UTF-8″>
HTML4:<script type=”text/javascript” src=”main.js”></script>
HTML5:<script src=”main.js></script>
HTML4:<link rel=”stylesheet” type=”text/css” href=”main.css”>
HTML5:<link rel=”sytlesheet” href=”main.css”>
手順
1．ヘッドのマークアップ
2.ボディーで領域要素を指定する header <div class=”wrapper”> <main class=”main”> <div class=”sidemenu”> <footer>
body要素内にヘッダー、メイン領域、サイドメニュー、フッターになる要素を配置しました。メイン領域とサイドメニューを横並びにするため、その2つを囲む、.wrapperというdiv要素も定義しています。
いまの時点ではページを見ても、内容がなく高さが0の要素があるだけなので何も表示されていない。
※ONE POINT
header footer main要素
HTML5ではいくつかの新しい要素が追加されました。先ほどのHTML内で使用したheader、footer、main要素もHTML5で追加された新しい要素です。header要素は、あるまとまりの中で木時の1つ1つに対してヘッダーになる情報をマークアップすることができます。main要素はそのページの中でメインになるコンテンツをマークアップするための要素なので、header要素やfooter要素とは違って、１つのページ内で1回しか使用できないという制約があります。
Internet ExplorerやAndroidの古い機種はmain要素に対応しておらず、未知の要素としてインラインレベルで表示されてしまうため、CSSでの幅や高さの指定が聞きません。対策としてdisplay: block;を指定することで想定した表示になる
コメントを残す