CSSレイアウト、見出しの練習

今までちゃんと意味を理解していないまま、Dreamweaverを使ってマージンやパディングなどを設定していたので、プレビューだけを頼りに調整していました。いま、タグ打ちをしながらやっていると、paddingは背景も伸びるとか、padding同士は足し算ができ、marg…

2009-01-28

ナビゲーション横並びについて質問です。

CSSでレイアウトをすると、前のロールオーバーで設定した画像の下に空きができてしまいました。li{heigt: 28px;}と指定したら空きは詰まったのですが、widthも指定した方が良いのでしょうか？あと、画像を横並びにする場合はサイズを指定するので、li{displa…

2009-01-27

CSSの復習

授業で勉強したCSSについて見直していたら、頭で解っていても出てこない。繰り返して復習しようと思います。 .lead{ line-heigt: 1.5em;・・・1.5emとは自動行送り、bodyに対して text-indent: 1em;・・・（1文字下がり) letter-spacing: 0.3em;・・・・文…

2009-01-26

ロールオーバーについての疑問点

今日画像を２種類作って、ロールオーバーの練習をして画像置換には成功したのですが、画像と画像の間に空きができてしまいました。 ↓ 無事に空きが埋まりました。CSSも修正しました。 HTML <div id="nav"> <ul> <li><a href="#"><img src="images/nav_1.jpg" onmouseover="this.src='images/nav_1_on.jpg'" onmouseout="this.src='images/nav_1.jpg'" alt="ホーム"</a></li> <li><a href="#"></a></li></ul></div>

2009-01-25

WEBデザイン授業３日目

今日の授業では、marginとpaddingの違いやfloatを設定する意味、擬似クラス、ロールオーバーと内容が濃かったのでひとつずつ思い出しながら理解していきたいと思います。 DOCTYPE宣言の入力 <HTML>より上に宣言を置く。 <html lang="ja">・・・日本語で表示 CSSのルールを記述 1.</html></html>…

2009-01-24

復習

ボックスモデル（例）内容領域の幅500px、左右のボーダー5px、左右のマージン5pxの場合「background-colorで背景色を指定すると、色の適用される部分は 500px＋10px＋10px＝520px（ボーダは背景の上に描かれるため、510pxが背景色となる。※ボーダの色に「tr…

2009-01-22

CSSコーディング練習2

@charset "Shift_JIS"; /* 基本設定 ------------------------*/ h1,h2,h3,p,ul,li,a,img,address{ margin: 0; padding: 0; } /* 背景色とパディング ------------------------*/ body{ background: #ffffff; padding: 10px } /* 見出し -------------------…

2009-01-21

div要素グループ分け（銀座菓楽より）

<html> <head> <title>GINZA KARACU</title> </head> <body> <div id="container"> <div id="header"> <h1>GINZA KARACU</h1> </div> <div id="navi"> <ul> <li> GINZA KARACU</li> <li> 菓楽とは</li> <li> 菓楽ケーキショップ</li> <li> 菓楽カフェフード</li> <li> 菓楽カフェドリンク</li> <li> 菓楽スクール</li> <li> インフォメーション</li> <li> 求人</li> </ul> <…</div></div></body></html>

2009-01-20

CSSコーディング練習1

@charset "Shift_JIS";h1,h2,h3,p,ul,li,a,img,address{ margin: 0; padding: 0; } body{ background: #ffffff; padding: 10px } h1{ font-size: small; border-bottom: 2px solid #999999; padding: 5px; margin-top: 10px; } h2{ font-size: x-small; line…

2009-01-19

div要素でグループ分け

<html> <head> <title>ハンバン HANBANGダナハン・ザイン・サンシン HOME-</title> <link href="base.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="navi"> <h1>HANBANG</h1> <p>HANBANGについて</p> <ul> <li>ブランドコンセプト</li> <li>会社概要</li> <li>高麗人参について</li> </ul> <p>商品</p> <ul> <li>ダナハン</li> <li>…</li></ul></div></div></body></html>

2009-01-18

今日の復習（CSS）

明日からCSSの手打ちがんばります。意味を理解して勉強する！この事を意識していると、生活の中でも「何でだろう？」という疑問な事が増えてきたような気がします。今日もとても濃い内容でした。テーブル・caption:表題（必須）・summary:その表のより詳…

2009-01-16

復習

外部CSSファイルのリンク設定 <head>〜</head>内に記述する。<title>の後に。 <link href="..lesson02/basic.css" rel="stylesheet" type="text/css"> rel:relative(レル）メールリンク <a href="mailto :xx@xxx.ne.jp">xx@xxx.ne.jp</a> タグの読み方 img src:image sourceイメージソース width:ウィズ height:ハイ alt:alternate オルト ol:ordered list オーエル ul：unordered list…</link>

2009-01-15

HTMLコーディング練習5（YAHOOトラベルより）

<html> <head> <title>Yahoo!トラベル-伊豆露天風呂付き客室のある宿</title> </head> <body> <h1>Yahoo!トラベル</h1> <p>たびゲーター</p> <p>Yahoo! JAPAN - ヘルプ</p> <p><img src="top_image.jpg" alt="伊豆・箱根湯河原への旅伊豆誰にも邪魔されない湯の旅を露天風呂付き客室のある宿"></p> <p>気持ちの良い屋外の空気を吸いながら、誰にも気兼ねすることなくお風呂をたのしめるのが露天風呂付き客室のよいところ。家族や友人、恋人など、大切</p></body></html>…

2009-01-14

HTMLコーディング練習4（DONQ）

<html> <head> <title>ドンクは創業103周年。おいしい手作りパンをお客様にお届けしています。｜DONQ｜トップページ</title> </head> <body> <h1><img src="images/top_siteidimg.gif" alt="ドンクは明治38年神戸生まれ、仕込みから焼き上げまでの全てをお店で行うことにより、最高品質のパンをお客様にお届けしています。"></h1> <ul> <li>サイトマップ</li> <li>お問い合わせ</li> <li>パートアルバイト情報</li> </ul> <ul> <li>トップページ</li> <li>ドンクの…</li></ul></body></html>

2009-01-13

HTMLコーディング練習3（ワンデーアキュビュー）

<html> <head> <title>コンタクトレンズ「アキュビュー(ACUVUE)」</title> </head> <body> <h1><img src="01/header_img_002.gif" alt="ACUVUE"> <img src="../header_img_003.gif" alt="使い捨てコンタクトレンズの「アキュビュー」"></h1> <p><img src="01/header_img_004.gif" alt="Johnson&Johnson"></p> <ul> <li>お問い合せ</li> <li>よくあるご質問</li> </ul> <p>文字サイ…</p></body></html>

2009-01-13

タグ打ちって・・・

最近、仕事の求人を見ていると「タグ打ち出来る方」って書いているのをよく見かけます。タグ打ちできます！って何なんだろう？と疑問に思いました。このままタグを打ち続けて、意味を理解すれば「私、タグ打ち出来ます！」と言っていいのかな?と。パソコ…

2009-01-12

HTMLコーディング練習1（銀座菓楽より）

<html> <head> <title>GINZA KARACU</title> </head> <body> <h1>GINZA KARACU</h1> <h2><img src="images/header_2_topics.gif" alt="トピックス"></h2> <dl> <dt>2009年1月7日</dt> <dd><a href="http://www.karacu.jp/lunch/index.html">カラクランチ</a>はじめました</dd> <dt>年末年始の営業時間</dt> <dd>年始は2日から営業いたします。また、2日、3日、4日は17時までの営業とさせてい…</dd></dl></body></html>

2009-01-12

HTMLコーディング練習2（ヒューマンリソシア）

<html> <head> <title>派遣、人材派遣、派遣社員など人材紹介の派遣会社【人材発見会社ヒューマンリソシア】</title> </head> <body> <h1>人材発見会社ヒューマンリソシア</h1> <p>「学ぶ」「働く」「支える」を応援するヒューマングループ</p> <ul> <li><a href="http://manabu.athuman.com/" target="_blank">教育</a></li> <li><a href="http://resocia.jp/top.html" target="_blank">人材</a></li> <li></li></ul></body></html>