manabiya学び舎プレイグラウンド

COURSE · 4 CHAPTERS · 63 LESSONS

HTML & CSS

Webページの見た目をつくる

この章について読む

タグで文章に意味をつける

  1. 01タグではさんでみようHTMLは文章をタグではさんで書く。いちばん小さな書き方から始めよう。5枚 · 13問 問題へ
  2. 02見出しをつけよう<h1>〜<h6> の見出しと段落を組み合わせて、文章に骨組みを作ろう。5枚 · 13問 問題へ
  3. 03リンクでつなごう<a> タグと href 属性で、ほかのページへ飛べる文字を作ろう。5枚 · 13問 問題へ
  4. 04画像をならべよう<img> タグと src 属性で、ページに絵や写真を置こう。終了タグのないタグに出会うよ。5枚 · 13問 問題へ
  5. 05箇条書きを作ろう入れ物の <ul>／<ol> と項目の <li> を入れ子にして、リストを組み立てよう。5枚 · 13問 問題へ
  6. 06はじめてのHTML見出しと段落のタグで、はじめてのWebページを作ろう。5枚 · 8問 問題へ
  7. 07リストとリンクを学ぼう箇条書きの ul/li と、ページをつなぐ a タグを使えるようになろう。6枚 · 8問 問題へ
  8. 08CSSのきほんCSSでページに色や大きさの「見た目」をつけよう。5枚 · 11問 問題へ
  9. 09class と divclass 属性で「この要素だけ」にスタイルをあてよう。5枚 · 11問 問題へ

CSSで見た目を変える

  1. 10CSSで文字に色をつけるセレクタ・プロパティ・値の3点セットで、文字の色を変えてみよう。6枚 · 13問 問題へ
  2. 11文字の大きさと書体font-size で大きさ、font-family で書体を変えて、同じHTMLの見え方を作りかえよう。5枚 · 13問 問題へ
  3. 12要素を「箱」としてあつかうbackground-color・width・height で、文字ではなく要素そのものの領域を変えてみよう。5枚 · 13問 問題へ
  4. 13class で名前をつけるclass 属性で要素に名前をつけて、同じタグでもちがうスタイルを当てられるようにしよう。5枚 · 13問 問題へ

ページ全体の骨組み

  1. 14HTMLファイルの骨組みhead と body の役割を知って、ページの名前を決める <title> を書けるようになろう。6枚 · 13問 問題へ
  2. 15CSSファイルを読みこむ<link> タグで HTML から style.css を呼び出し、文書と見た目をファイル単位で分けよう。5枚 · 13問 問題へ

パーツごとに組む

  1. 16ページを領域に分ける<div> と class でページを上・中・下の領域に分けて、レイアウトの土台を作ろう。5枚 · 13問 問題へ
  2. 17ヘッダーの中身を組むページ上部の帯に、ロゴとメニューを入れ子で並べよう。4枚 · 13問 問題へ
  3. 18ヘッダーを横並びにするfloat を使って、縦に積まれた要素を横に並べよう。4枚 · 13問 問題へ
  4. 19ヘッダーの中の位置をそろえる行の高さを帯の高さに合わせて、文字を上下の真ん中に置こう。4枚 · 13問 問題へ
  5. 20フッターの中身を組むページの足元の帯に、店名・リンク・著作権表示を並べよう。4枚 · 13問 問題へ
  6. 21フッターを右と左に振り分けるfloat: right を覚えて、左に名前・右にリンクの帯を作ろう。4枚 · 13問 問題へ
  7. 22メインの箱を中央に置く本文の幅を決めて、ページのまん中に置こう。5枚 · 13問 問題へ
  8. 23同じ形のかたまりを並べる一覧に並ぶ中身を、まったく同じ構造のかたまりとして書こう。5枚 · 13問 問題へ

枠と余白で整える

  1. 24枠線をつける太さ・種類・色の3つを指定して、箱に枠線を引こう。4枚 · 13問 問題へ
  2. 25内側の余白と外側の余白padding と margin を使い分けて、窮屈な見た目に余裕を作ろう。5枚 · 13問 問題へ
  3. 26フォームの部品を並べる入力欄・選択欄・ボタンを form の中に組み立てよう。5枚 · 13問 問題へ
  4. 27フォームの見た目を整えるラベルを1行に、入力欄を大きく、ボタンを押しやすく仕上げよう。4枚 · 13問 問題へ