WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

HTML+CSS

2カラムレイアウトの演習

使用するテキスト 卵料理カフェ Cockeyolly Home ニュース メニュー 今月のおすすめ オリジナル雑貨 マップ メール 今月のおすすめ きのこのオムライス ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地…

ナビゲーションボタンの制作

ナビゲーションボタンを作る際のポイント マウスクリック(ホバー)により、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 高さは、「line-height」か「padding」で指定する、 …

リセットCSS

各ブラウザ(IE、FireFox、Chrome、safariなど)は、要素毎にデフォルトでスタイルを独自にもっており、ブラウザーによって表示が異なる場合があります。それらをリセットするスタイルシートを一般的に「リセットCSS」と呼びます。 元々持っているブラウザー…

HTMLの復習

行は row 列は col 宿泊料金表 部屋タイプ ツイン シングル グレード スタンダード エグゼクティブ スイート スタンダード エグゼクティブ 平日 15,800円 20,800円 58,000円 9,800円 14,800円 休前日 19,800円 25,800円 12,800円 17,800円 共通室内設備 Wi-F…

文字色と背景色

www.colordic.orgnipponcolors.com 既存のサイトがどういう色を使っているか、見てみるのも非常に勉強になります。 www.coprosystem.co.jp 既存のサイトの色を取るスポイトツールです。非常に便利なのでFirefoxに入れましょう。 addons.mozilla.org 補色 こ…

第1回実技課題 追試 解答例

各要素のサイズが指定通りになっているか必ず確認する 文章構造とレイアウトを混同しない marginとpaddingの違いをしっかりと理解する ソースコード <html lang="ja"> <head> <meta charset="utf-8"> <title>2カラムの課題</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header">#header</div> <ul class="nav"> </ul></div></body></html>

2カラムレイアウトの復習

2カラムレイアウトはwebサイトの基本レイアウトです。Floatの特性をしっかりと理解し、必ず作成出来るようになりましょう。 サイズ・色ともに適宜 各要素の隙間は10px 背景画像はPhotoshopを使い、自身で作成 cssはエンベットせずに必ずcssファイルに記述 cs…

複数ページの制作

日本の四季 日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。 春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、 そうしているうちに桜が咲き、夏が来る。 そして秋になり、また冬を迎える。 このように、日本の気候は…

Positionレイアウト その2

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>Positionでのレイアウト</title> <link href="css/style2.css" rel="stylesheet"> </head> <body> <div id="container"> <div id="header"> <h1>四季の花</h1> <ul id="nav"> <li id="sp"><a href="#">spring</a></li> <li id="su"><a href="#">sum…</a></li></ul></div></div></body></html>