コース一覧
レスポンシブWeb制作:スマホ対応して公開する
自分らしさを足そう

レスポンシブWeb制作:スマホ対応して公開する

viewport、メディアクエリ、相対単位、モバイルファーストを使い、PC・スマートフォン両対応のページを完成・公開する10レッスンの無料コースです。

1
レスポンシブデザイン
01. スマホで見ると崩れる15分
02. viewportの設定15分
03. メディアクエリ20分
04. 相対単位20分
05. モバイルファースト25分
06. 章末仕上げ 全画面対応25分
2
総合制作
01. 完成度チェックと修正15分
02. デザインを磨こう15分
03. 自分らしさを足そう20分
04. 完成・公開しよう15分

自分らしさを足そう

中身の形からタグを選ぶ

自分で決める番

ここまでは決まった順番どおりに書いてきました。最後にひとつ、中身から自分で決める番です。読んだ本、行った場所、これから作りたいもの。あなたのサイトなので何でもかまいません。

書き出す前に決める 3 つ

新しいセクションを足すときは、いきなり書かずに、何を伝えるか、どのタグで表すか、どこに置くかを先に決めます。並ぶ項目ならリスト、比べるものなら表、絵と文があるならカード。中身の形からタグを選ぶと、あとの装飾も楽になります。

HTML

<section class="section" id="books"> <h2 class="section-title">読んだ本</h2> <ul class="hobby-list"> <li class="hobby-item">やさしい HTML 入門</li> </ul> </section>

こつは、いまあるクラスをそのまま使うことです。section と section-title を付けるだけで、余白も枠も影もそろいます。ナビゲーションに 1 行足せば、メニューからも飛べます。

説明文にも自分を入れる

セクションの追加は自由課題なので、合格の判定はいまあるセクションだけを見ています。安心して増やしてください。共通の作業としてもうひとつ、ページの説明にいま自分がしていることを足します。プロフィールサイトは、何を作れる人なのかが伝わってはじめて役に立ちます。

課題

  1. ページの説明に、いま学んでいることを足して書き直す
  2. 好きなセクションを 1 つ考えて index.html に足す(自由課題)
  3. 足すときは、いまある section と section-title のクラスをそのまま使う

ヒント

中身の形からタグを選びます。並ぶものならリスト、比べるものなら表です

id を付けてナビゲーションに `a href="#id"` を 1 つ足すと、メニューからも飛べます

説明文はヘッダーの肩書きに、学んでいる言語をつなげると書きやすいです

index.html
style.css
プレビュー

できているか

  • ページの説明に、いま学んでいることが入っている
  • セクションが 6 つ以上ある
エディタを読み込んでいます