現在、パソコン(パーソナルコンピュータ)を使う多くの人々の間で「ネットを使う」「ネットにつなぐ」などの言葉を使うとき、それは多くの場合「インターネット上の web ページを見る」ことを意味します。web ページとそれを取り巻くいろいろな技術は、コンピュータネットワークでの情報表現・情報流通において支配的な位置を占めています。
ここでは、このような web ページを制作するための、基本的な考え方や技術を紹介します。
はじめに
- web関連技術の重要性と複雑さ
- webのしくみ: 予備知識: テキストファイル
- webのしくみ: HTML とブラウザ
- webサーバーと「サイト」
- webページ制作ソフトウェア・ブログ・各種 SNS の時代に HTML の基礎技術を学ぶのは?
- HTML は「ハイパーテキスト」の「マークアップ言語」
- 文書構造と見ばえ指定の分離
基本事項
HTML と CSS の基本事項を紹介します。
- HTMLの基本事項
- CSS記述の基本事項
- ボックスの構造(ボックスモデル)
- CSS での基本フロー(Normal flow)
- フロートの概要
- フロートの解除とclearfix
- CSS3でのフロートにかわるレイアウト手法 : CSS Flexbox, CSS Grid Layout
- CSS:レスポンシブデザインで使われる最小限のメディアクエリ
- レスポンシブデザインのための viewport の設定
- HTML5.1以降の picture 要素: メディアクエリによって画像を出し分ける
- YouTube の iframe のレスポンシブ化
フレームワーク Bootstrap を利用した web 制作
CSSフレームワークである Bootstrap を利用した web ページの制作について、以下に紹介します。
- Bootstrap:ファイルの準備
- Bootstrap:<head>内の記述(4.4.1)
- Bootstrap:グリッドシステム(4.4.1)
- Bootstrap:ナビゲーションバー(4.4.1)
- Bootstrap:カルーセル(4.4.1)
- Bootstrap 4.4.1 ページ例
参考文献
- 大藤 幹 : よくわかるHTML5+CSS3の教科書【第2版】
, (株)マイナビ, 2014.
- WINGSプロジェクト,宮本麻矢他 : Bootstrap 4 フロントエンド開発の教科書, 技術評論社, 2018.
- 相澤 祐介 : Bootstrapファーストガイド―CSS設計の手間を大幅に削減!
, (株)カットシステム, 2014. ISBN 978-4-87783-360-2
- HTML5 リファレンス http://www.htmq.com/html5/
- スタイルシートリファレンス http://www.htmq.com/style/index.shtml
- CSS3 リファレンス http://www.htmq.com/css3/
- CSS2.1 Specifications http://www.w3.org/TR/CSS2/
- CSS Current Work : CSS Specifications https://www.w3.org/Style/CSS/current-work
- Web 色見本 http://www.colordic.org/
- 長文ダミーテキスト生成 http://lipsum.sugutsukaeru.jp/
- ダミー画像生成 http://dummyimage.com/
- Bootstrap http://getbootstrap.com/