webサイト制作の勉強|2017月7月クラスブログ

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

CSS基礎

第1回実技試験

今回の制作の仕様 header要素の幅960px高さは350px header画像は自身で制作し、「CAFE de FELICA」の文字を画像に入れる h1はテキストを挿入し、cssで隠す ボタンは4つを均等の幅で設置し、高さは50px コンテント要素の幅650px 高さ500px フッター要素の高さ…

2カラム演習問題

ヘッダー要素の幅960px 高さ300px コンテント要素の幅600px 高さ400px フッター要素の高さ50px 各要素の空き10px 各要素の背景色は適宜 ボタンは5つを均等の幅で設置 ボタンの高さは50px ナビゲーションボタンをホバーした際に文字色と背景色が変わるように…

複数ページの制作

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

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

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

positionの使い方

http://yachin29.com/photoshop/position.zip

CSSスプライト

CSSスプライトとは複数の画像を1つの画像にまとめる事でサイトの読み込み速度を速くする手法です。FacebookやGoogleでも使われている手法です。background-positionを使用して背景画像を動かします。 メリット 画像の読み込みが1回で済むので、サイトの読…

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

今回は今までhtmlファイル内に記述していたcssをcssファイル(style.css)に記述していく方法でやります。 htmlファイルが複数になっていくと、cssファイルを別に作り、そちらに書いていくようになるので、今の内になれてしまいましょう。 また、完成したデ…

CSS演習問題

演習1 <body> style要素 style element HTML文書内にまとめて設定します。 </body> 解答例 <html lang="ja"> <head> <meta charset="utf-8"> <title>演習問題1</title> <style> html,body,h1,h2,p { margin: 0; padding: 0; line-height: 1.0; } body { } h1 { color:#0e8d87; padding: 20px 0; } h2 { background: #355584; color: …</meta></head></html>

font-familyの指定 2017年版

font-familyの指定 font-familyとは表示される文字フォントの指定です。 基本的には表示させたいフォント(綺麗なフォント)から順に指定してきます。 注意が必要なのがwindowsで、windowsで使われる標準フォントはバージョンによって違うので、それを加味し…

隠し文字の設定

ナビゲーションを画像にする場合、気をつけたいのがliに記述している文字の扱いです。今回は文字も含めて画像にしているので、このままでは画像の文字とliに記述している文字がダブってしまい、画像の文字が読めなくなってしまいます。ここで絶対にやっては…

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

擬似クラス 擬似クラスでまず覚えるべきは以下の4つです。 link 通常リンク(未アクセス)のスタイル visited アクセス済みリンクのスタイル hover ポイント時のスタイル active アクティブ時のスタイル です。この4つの擬似クラスを指定する際には、 link …

フロートを使ったレイアウト

divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。 しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。 floatを使う事でHTML内の文章構造を変える事なく比較的自…

divの使い方と1カラムレイアウト

divタグ ・・ひとかたまりの範囲として定義する divタグはそれ自身は特に意味を持っていませんが、DIVで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。 カラムと…

CSS基礎

CSS(Cascading Style Sheets) CSSとは、HTMLの要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。 h1やpなどの意味付け…

ナビゲーションボタンを画像に置き換える

ナビゲーションボタンを画像に置き換え、2カラムレイアウトに組み込みましょう。index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>2カラムの練習</title> <link rel="stylesheet" href="style.css" > </head> <body> <div id="container"> <header></header> <nav> <ul> <li id="home"><a href="#">Home</a></li> <li id="food"></li></ul></nav></div></body></html>

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

今回はボタンを1つ1つ画像にして背景画像で指定します。hover時の画像も別に制作してみましょう。home.png home_h.png <html lang="ja"> <head> <meta charset="utf-8"> <title>ナビゲーションの作成</title> <style> html,body,ul,li { margin:0; padding:0; line-height:1.0; } a { text-decoration:none; color:#FFFFFF; } u</meta></head></html>…

ブロックレベル要素とインライン要素

HTMLには色々な要素(h1とかp)がありますが、その要素は大きく分けて「ブロックレベル要素」と「インライン要素」の2つに分かれます。 この「ブロックレベル要素」と「インライン要素」の違いと特性をしっかりと理解する事で、実際に制作する際によく生じて…

CSS基礎2

CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。 margin marginとは要素の外側に出来る隙間の事です。 padding paddingとは要素の内側に出来る隙間です。言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトで…

リセットCSS

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