中級編 ワーク一覧
先に「ワーク用ファイル一式」をダウンロード&展開しておいてください。- メニューバーを作ってみよう
- パンくずリストを作ろう
- Youtubeのアスペクト比率を一定にしよう
- GoogleMapのアスペクト比率を一定にしよう
- ブロック要素のアスペクト比率を一定にしよう
- デザイン4大原則に則る！
- ベースカラー/メインカラー/アクセントカラー
- コントラスト比とジャンプ率について
- 黄金比と白銀比
- F12ツールとテキストエディタの使い方まとめ
- Wordpressのファイル構造を実際にFTP上からチェックしよう
ワーク「パンくずリストを作ろう！」
ポイント：下記のパンくずは、リストタグで組んでいます。どのように実現しているでしょうか？サンプル
答えを見る
HTML
CSS
ワーク「Youtubeのアスペクト比率を一定にしよう！」
ポイント1：YoutubeやGoogleMapはどちらもiframe。つまり外部サイトから引っ張ってきたものです。ポイント2：16:9にする場合はpadding-bottomの値を56.25%(100÷16×9)に。4:3にするか場合は75%(100÷4×3)にします。それぞれCSSを設置していきましょう。
ポイント3：下にYOUTUBEプレイヤーがありますが、ブラウザの窓を大きくしたり、小さくしてみてください。アスペクト比率は変わりません。
サンプル
答えを見る
HTML
CSS
ワーク「GoogleMapのアスペクト比率を一定にしよう！」
ポイント1：GoogleMapでもYoutubeでもiframeで埋め込んだものなら使えます。ポイント2：こちらは4:3比率にあわせました。
ポイント3：iframeなので遅延読み込みの対象にもなります。
サンプル
答えを見る
HTML
CSS
ワーク「ブロック要素のアスペクト比率を一定にしよう！」
ポイント1：背景画像はこちらからダウンロードしてください。サンプル
ここにテキストが入ります。画像サイズは1600×900pxです。このDIVは絶対指定してあり、上下左右に5％の余白を内側・外側に入れてあります。微調整しつつ、ヘッダーなどのレイアウトに役立ててください。