floatを使ったレイアウト１２

基礎 CSS

ボックスの幅と位置を指定するソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの幅と位置を指定する</title> <link rel="stylesheet" href="css/style12.css" media="screen,print"> </head> <body> <div id="container"> <div id="primary"> <primary><br>１段目<br>２段目<br>３段目<br>４段目<br>５段目<br>…</div></div></body></html>

2012-12-20

floatを使ったレイアウト１３

基礎 CSS

☆★データーでの確認★☆左右の配置を入れ替えヘッダーを追加するソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style13.css" media="print,screen"> </head> <body> <div id="container"> <div id="header"> <header><br>１段目<br> </div> </div></body></html>

2012-12-19

リストを使ったナビゲーション

基礎 CSS

縦並びのボックス paddingは問題なし marginは相殺される横並びのボックス marginは通常計算（相殺されません） paddingはブラウザにより影響 borderも計算に入れる borderの数値を大きくしただけで、崩れるこの解釈は、ブラウザごとに違う。上記ような崩…

2012-12-17

ボックス内にボックスがある場合のマージンの相殺

基礎 CSS

☆★データーでの確認★☆ ボックス内にボックスがある場合のマージンの相殺要素間の上下マージンの相殺相殺するマージン値の大きいボックスのマージンが採用される。「#container」の「margin: 0;」なので、「#header」の「margin: 10px;」が採用されて、「#…

2012-12-17

隠し文字０２

基礎 CSS

すべてが「スパム」ではない意図的に見えない文字を設定しておくこと黒色背景の上に、黒い文字（1px）などは違法（事例があります）「display:none;」もスパム扱いと言われている（事例は不明。噂の域をでない。） OFF-LEFT 一般的な手法リンク文字のみ…

2012-12-16

floatを使ったレイアウト０９

基礎 CSS

段組を束ねるボックスを作るソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>段組を束ねるボックスを作る</title> <link rel="stylesheet" href="css/style10.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header><br>１段目<br> </div> </div></body></html>

2012-12-16

floatを使ったレイアウト１０

基礎 CSS

可変するボックスに負のマージンを指定するソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>可変するボックスに負のマージンを指定する</title> <link rel="stylesheet" href="css/style11.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header><br>１段目<br> </div></div></body></html>

2012-12-15

floatを使ったレイアウト０７

基礎 CSS

フッターを配置して回り込みを解除するソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フッターを配置して回り込みを解除する</title> <link rel="stylesheet" href="css/style8.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header> </div> </div></body></html>

2012-12-15

floatを使ったレイアウト０８

基礎 CSS

三つのボックスを左右に寄せるソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>三つのボックスを左右に寄せる</title> <link rel="stylesheet" href="css/style9.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header><br>１段目<br> </div> </div></body></html>

2012-12-14

CSSによるページデザイン

基礎 CSS

情報を「線形化」する情報は上の行から順に読まれる HTMLはブロック化しないと横並びはできない右に並べるときに設定するのが「float : right」 idセレクタで指定する「idセレクタ」は固有名詞的扱いで、１ページに一度まで。グループ名をつける横並び…

2012-12-14

floatを使ったレイアウト０４

基礎 CSS

IE6で、マージンが２倍になってしまうバグ width を指定したボックスには border も padding も指定しない。フロートのコンテナブロックには幅を指定する。サンプルコード下記のコードで、IE6はマージンが20pxになる。マージンが２倍になってしまうバグ…

2012-12-14

floatを使ったレイアウト０５

基礎 CSS

float (水上・空中を)浮動する，漂う浮き上がるため、続く文字が下に潜り込もうとする floatを使うときは「width」も忘れずに（囲むブロックにも「width」は必須）ボックスの幅と位置を指定するソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの幅と位置を指定する</title> <link rel="stylesheet" href="css/style6.css" media="screen,print"> </head> <body></body></html>…

2012-12-14

floatを使ったレイアウト０６

基礎 CSS

左右の配置を入れ替えヘッダーを追加するソースコード【 HTML 】 <html lang="ja"> <head> <mata charset="UTF-8"> <title>左右の配置を入れ替えヘッダーを追加する</title> <link rel="stylesheet" href="css/style7.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header><br>１段目<br> </div></div></body></html>

2012-12-13

疑似クラス

基礎 CSS

擬似クラス（リンク部分の指定方法） [ a ] 要素のリンク時のカーソルの表示状態を設定 [ link ] 「未訪問」 [ visited ] 「訪問済み」 [ hover ] 「カーソルがリンクに重なったとき」 [ active ] 「リンクに対してアクティブな瞬間」 [ : ] 「コロンをそれ…

2012-12-13

position: relative,position: absolute

CSS 課題授業

position: relative（相対的）要素本来の位置（左上）からの移動距離を基準値とする。 position: absolute（絶対的）包含ブロック『基準値:relative（左上）』からの移動距離ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>両側をまたぐフッターを配置する</title> <link rel="stylesheet" href="css/style2.css" media="screen,print"> </head> <body> </body></html>

2012-12-13

position: relative,position: absolute02

CSS 課題授業

header内ブロックを右側に配置ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>position</title> <link rel="stylesheet" href="css/style3.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <div id="header_info"> <ul> <li><a href="#">このサイトについて</a></li></ul></div></div></div></body></html>

2012-12-13

疑似クラス０２

基礎 CSS

リンクの色（擬似クラス：Pseudo-classes）要素の性質スタイルを適用させたい場合に使う。主に「a要素」のリンク時のカーソルの表示状態を設定。 6種類の疑似クラス [ lang ]指定された言語スタイル [ link ]通常リンク（未アクセス）のスタイル [ visited…

2012-12-13

floatを使ったレイアウト０２

基礎 CSS

floatプロパティを使ったレイアウトソースコード【HTML】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>floatプロパティを使ったレイアウト</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"><header>…</div></div></body></html>

2012-12-13

floatを使ったレイアウト０３

基礎 CSS

左右にフロート指定同じ方向にフロート指定フロートとマージン指定 floatと親ボックスの「高さ」

2012-12-12

ボックスモデル

基礎 CSS

ボックスを構成する要素ボックス幅コンテント領域幅＋パディング＋ボーダーの太さ＋マージンコンテント領域がボックス幅ではないので、注意が必要です。コンテント：widthとheightプロパティで規定される長方形ボーダー：border 本来は「border-w…

2012-12-12

実践演習(1)[ 画像を入れる ]

webサイト制作 CSS 課題授業

☆★データーでの確認★☆ headerに画像を入れるソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>実践演習</title> <link rel="stylesheet" href="css/style02.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"><h1>石垣島観光ガイド</h1></div> </div></body></html>

2012-12-12

実践演習(2)

webサイト制作 CSS 課題授業

☆★データーでの確認★☆ レイアウトソースコード【 HTML 】 <html lang="ja"> <head> <mata charset="UTF-8"> <title>Cafe Cockeyolly</title> <link rel="stylesheet" href="css/style5.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <h1></h1></div></div></body></html>

2012-12-12

実践演習(3)

webサイト制作 CSS 課題授業

☆★データーでの確認★☆背景画像幅600pxでドロップシャドーソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>川崎アゼリア・オープン懸賞</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <h1></h1></div></div></body></html>

2012-12-11

スタイルの優先順位と特殊性

基礎 CSS

スタイルの優先順位 !important,id,class,各要素の優先順位スタイルの特殊性（specificity）スタイルの読み込み順序のルール（あとから読み込んだものを優先する）は、あくまで特殊性が同じスタイルに適用される

2012-12-11

文字サイズとline-height

基礎 CSS

文字サイズ 0.875em は「14px」相当 line-height 「line-height」を設定して、背景色を文字の上下に見せるために使う。日本語の場合、「0.5em＋ディセンダの空き」により下が空きすぎに見える。あえて「display:block」を指定し、上下の padding を別々に設…

2012-12-11

実践演習(1)

webサイト制作 CSS 課題授業

☆★データーでの確認★☆ 文字色、文字サイズ、背景色 color、font-size、margin、padding、background-color ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>実践演習</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <div id="container"> <h1>石垣島観光ガイド</h1> </div></body></html>

2012-12-10

CSS Spriteでボタン作成

CSS 授業

☆★データーでの確認★☆ CSS Spriteとはロールオーバー時の画像置換を、ひとつの画像の一部分の面を見せながら、画像を移動させ変化したように見せる手法。スプライト描画（IT用語）ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS Sprit</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <div id="nav"> <ul> <…</ul></div></body></html>

2012-12-10

横ナビ演習（１）

CSS 課題授業

ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <div id="nav"> <ul> <li class="first"><a href="#">リストメニュー１</a></li> <li><a href="#">リストメニュー２</a></li> <li><a href="#">リストメニュー…</a></li></ul></div></body></html>

2012-12-10

ナビ演習（２）

CSS 課題授業

ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style2.css" media="screen,print"> </head> <body> <div id="nav"> <ul> <li class="first"><a href="#">リストメニュー１</a></li> <li><a href="#">リストメニュー２</a></li> <li><a href="#">リストメニュ…</a></li></ul></div></body></html>

2012-12-10

ナビ演習（３）

CSS 課題授業

ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style3.css" media="screen,print"> </head> <body> <div id="nav"> <ul> <li><a href="#">メニューのリンク１</a></li> <li><a href="#">メニューのリンク２</a></li> <li><a href="#">メニューのリンク３</a></li>…</ul></div></body></html>