webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

第1回実技試験の内容

f:id:yachin29:20181005094107j:plain


今回の制作の仕様

  1. header要素の幅1000px高さは350px、同じサイズの画像を自身で制作し、「FELICA kitchen」の文字を修飾し画像に入れる。
  2. cssファイルは外部リンクでリンクさせ、適切なリセットをかける事
  3. h1はテキストで「FELICA kitchen」を挿入し、cssで隠す
  4. ボタンは5つを均等の幅で設置し、高さは50px
  5. コンテント要素は幅660px 高さ500px、フッターは高さ50pxでコピーマークを挿入
  6. コンテントに表示させる画像を400x300pxにトリミングし文章は回り込みをさせる
  7. sidebar要素にはテキストリンク(外部リンク、リンク先は任意)を3つ入れるように
  8. 各要素の空きは10px、要素内の空き・色は適宜
  9. ナビゲーションボタンをホバーした際に文字色と背景色が変わるように
  10. sidebarとfooter内にwebアイコン(Font Awesome)を表示させる事


使用するテキスト

FELICA kitchen


毎日食べたい、おうちみたいなごはんやおやつ

FELICA kitchenは、あなたのもうひとつの「おうち」になりたいごはんやさんです。
毎日食べたくなるような、どこかホッとするごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えします。
気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。ただいま、夏限定のメニューを多数ご用意しております。
ぜひお越しください。

コピーライトマーク FELICA kitchen

画像は自身で用意しトリミングする事
ヘッダー画像(サイズ1000x350)
コンテント画像(サイズ400x300)