HTML+CSS
ナビゲーションを画像にする場合、気をつけたいのがliに記述している文字の扱いです。今回は文字も含めて画像にしているので、このままでは画像の文字とliに記述している文字がダブってしまい、画像の文字が読めなくなってしまいます。ここで絶対にやっては…
各ブラウザ（IE、FireFox、Chrome、safariなど）は、要素毎にデフォルトでスタイルを独自にもっており、ブラウザーによって表示が異なる場合があります。それらをリセットするスタイルシートを一般的に「リセットCSS」と呼びます。 元々持っているブラウザー…
では実際にマークアップをしてみましょう。 新規ファイルを作る ファイルを新規作成する場合は、［ファイル］メニュー →［新規作成］を選択します。 ファイルの保存 まず中身を記述する前に必ずファイルの保存をしましょう。ファイルを保存する場合は、［フ…
font-familyの指定 font-familyとは表示される文字フォントの指定です。 基本的には表示させたいフォント（綺麗なフォント）から順に指定してきます。 注意が必要なのがwindowsで、windowsで使われる標準フォントはバージョンによって違うので、それを加味し…
illustratorで作ったカンプを実際にコーディングしてみましょう。 要素や文字の大きさや色、マージンなどの値もカンプのデータをベースに作っていきます。しかし、全てカンプと完全に同じに作っていくのは非常に難しいので、コーディング段階での微調整は必…
1カラムレイアウト 2カラムレイアウト 2カラムレイアウトの場合、floatを使い、div要素を横に並べます。 ここで一番大事なのはHTMLの文章構造を変える事無く、CSSでレイアウトしていく事です。 floatを使う事でHTML内の文章構造を変える事なく比較的自由なレ…
HTMLには色々な要素（h1とかp）がありますが、その要素は大きく分けて「ブロックレベル要素」と「インライン要素」の2つに分かれます。 この「ブロックレベル要素」と「インライン要素」の違いと特性をしっかりと理解する事で、実際に制作する際によく生じて…
ソースコード <html lang="ja"> <head> <meta charset="utf-8"> <title>私の好きな本3冊</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>私の好きな本3冊</h1> <div class="box"> <h2>新平家物語</h2> <p class="ph"><img src="img/01b.jpg" height="300" alt="#"></p> </div></div></body></html>
使用するテキスト 卵料理カフェ Cockeyolly Home ニュース メニュー 今月のおすすめ オリジナル雑貨 マップ メール 今月のおすすめ きのこのオムライス ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地…
ナビゲーションボタンを作る際のポイント マウスクリック（ホバー）により、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 高さは、「line-height」か「padding」で指定する、 …
各ブラウザ（IE、FireFox、Chrome、safariなど）は、要素毎にデフォルトでスタイルを独自にもっており、ブラウザーによって表示が異なる場合があります。それらをリセットするスタイルシートを一般的に「リセットCSS」と呼びます。 元々持っているブラウザー…
行は 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 補色 こ…
各要素のサイズが指定通りになっているか必ず確認する 文章構造とレイアウトを混同しない 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カラムレイアウトはwebサイトの基本レイアウトです。Floatの特性をしっかりと理解し、必ず作成出来るようになりましょう。 サイズ・色ともに適宜 各要素の隙間は10px 背景画像はPhotoshopを使い、自身で作成 cssはエンベットせずに必ずcssファイルに記述 cs…
日本の四季 日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。 春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、 そうしているうちに桜が咲き、夏が来る。 そして秋になり、また冬を迎える。 このように、日本の気候は…
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>
