CSSを使って、ブログ系サイトのようなデザインのページを制作します。
完成例 どこかのブログのようなデザインのページ以下の内容を参考にサイトを作成してください。
- 作業用のフォルダとして blog フォルダを新規作成してください。（作り方は、前回の課題の「フォルダとindexの作成方法」を参考にするなどしてください）
- 以下のファイルに必要な素材がまとめて圧縮保存してあります。ダウンロードし、blog フォルダ内に展開してください。
課題用圧縮ファイル css2pack.zip ← ここからダウンロード圧縮フォルダ内には以下のようなファイルが含まれています。font-awesome-4.7.0
box.css
- 主に
index.htmlとmystyle.cssを使用します。それぞれに対して、下記の課題の指示通り編集を行ってください。- 作成したらblogフォルダ全体を圧縮フォルダで圧縮し、moodle にアップロードしてください。
提出ファイル名は学生番号 氏名 ブログ.zipとします。
作業工程が複雑になりますので、このページの練習問題では、いきなり完成形を目指すのではなく、まずは基本的なレイアウト構造を持つページを作り、余白などデザインの調整を行った後、必要に応じてパーツの追加など細かな修正を行い、ページを完成させていく流れになっています。
- ボックスを並べてレイアウトの基本をつくる
- ボックスの中にコンテンツを入れて、レイアウトを調整する
- さらに微調整して、仕上げる
序盤でミスがあると、その後の全ての作業に影響が及び、修正が難しくなるので、作業の各段階で問題なくページが表示されることを確認しながら進めましょう。
編集したら、そのつど動作チェック！を心がけましょう。
この課題で作成するサイトは、近年ウェブページ制作で求められる「レスポンシブ・デザイン」を意識したものになっています。
レスポンシブ・デザインとは「様々なデバイスに対応できるデザイン」のことです。簡単に言うと「スマホでもパソコンでもそれっぽく見えるデザイン」ということです。
近年のウェブページ制作では、スマホやパソコンなど、様々なデバイスへの対応が求められるので、デザインもさまざまな画面サイズでの表示をサポートするようなものが必要なのです。
まずは作業に移る前に、以下の記事を読んで「レスポンシブ・デザイン」に必要となる基礎知識を身につけておきましょう。
ここからが本番です！
上の基礎知識編で練習用ファイルを作った場合は一旦閉じて、新しいファイルを作成して始めましょう。
基礎知識を踏まえた上で、以下の内容を参考にしながら、ページを作成しましょう。
今回はここまでです。次週、デザイン等を加えて完成度を上げていきますので、よろしくおねがいします！
ここまで作成した状態でblogフォルダ全体を一旦圧縮フォルダで圧縮し、moodle にアップロードしてください。
提出ファイル名は学生番号 氏名 ブログ.zipとします。
今回の部分を完成させると、以下のようになるはずです。参考にしてください。
