サイタWeb・デザインスクールホームページ作成講座神奈川 ホームページ・ビギナーズ スクールブログ 制作課題ホーム...

制作課題ホームページ (3/3) Busters編

パソコンのような広い横幅でページを表示するときのデザインと、スマートフォンのような狭い横幅でページを表示するときのデザインは、なかなか一緒にはできません。同じ内容で、異なるデザインのページを別々に用意する方法もありますが、「メディアクエリー」を使うと1つにまとめられます。

挑戦 ☆ メディアクエリー
『株式戦隊 ウィルスバスターズ』偏
で学べること

ページ内容の構造化
ホームページを作る作業は、中に書いた文章が、それぞれどのような種類の情報であるかを示し、グループにまとめていくことです。グループをさらにグループにまとめ、「親要素、子要素」と表現されることもある階層構造を作っていきます。方法は作る人によりさまざまで、決まりは存在しますが、絶対正しい方法というものがあるわけではありません。
このページの制作は、内容の提供のみで、構造化については、まず自分で考えて進めてみてください。わからなかったり迷った時に、横からしっかりアドバイスさせていただきます。

メディアクエリー
出力媒体(メディア) への問い合わせ(クエリー) による選別のこと。パソコンのような広い横幅、タブレットのような中間の横幅、スマートフォンのような狭い横幅、この3つの横幅に合わせる方法を説明します。ページ内容の構造がしっかり作れると、メディアクエリーの書き方自体はそれほど難しくありません。
完成後、横幅を狭めた時、瞬時にデザインが変わるさまを見るのはなかなかに楽しいです


ホームページを作るのは任意です。難しいところはゆっくり進めれば良いので、この便利な技術にぜひ挑戦してみてください。

※ なお ※
ホームページはすべて架空のものであり
実際の人物や団体等とは関係ありません。

 

(2015年3月31日(火) 18:24)

前の記事

この記事を書いたコーチ

モノ作りが大好きな先生!知識を実践をバランスよく、初心者も大歓迎

ブログ記事 ページ先頭へ