CSS
☆★データーでの確認★☆displayを使ってボックスの高さを合わせる displayのtable-cellを使ってボックスの高さを合わせる displayのtable-cellを使ってレイアウト【 書式 】 《 CSS 》 .display_table {display: table; width: 625px; margin-left:25px;} .tab…
☆★データーでの確認★☆CSSでheightを自動調整 ネガティブマージンを使いボックスの高さを合わせる ネガティブマージンの値を指定【 書式 】《 CSS 》 .nav,.section1,.section2,.section3,.section4 { padding-bottom: 32768px; margin-bottom: -32768px;} ソ…
☆★データーでの確認★☆ブロックレベル要素の高さを揃える方法あれこれ | THE HAM MEDIA BLOG 高さの違うボックスを同じ高さにしたい。 ブロックレベル要素の高さを揃える方法あれこれ | THE HAM MEDIA BLOG CSSで揃える方法 一度画面がはみ出るくらい長くpadd…
インテリアショップ 幅850px、左揃え 空きなどの詳細は、適宜設定する 画像は制作できる場合は、制作する 著作情報は、センター揃え（画像は右揃え）でも可 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>インテリアショップcss_test</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <div id="container"> </div></body></html>
font-size指定の歴史 ブラウザのCSSの解釈が不安定だった時代は、複数の指定をJavaScriptで分岐 ユーザビリティを念頭においた、％やem指定でのWebサイト制作が主流 ブラウザの拡大縮小が、テキストベースで行われる時代も、％やem指定が主流 ブラウザがペー…
![はてなブックマーク - CSSテスト - １カラム[ ＩＥ対策 ]](https://b.hatena.ne.jp/entry/image/https://webry.hatenadiary.org/entry/20130501/p2)
企業サイト 素材は、テキストデータ（または独自データ）を利用する ナビゲーションは、作成する ソースコード【 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="container"> <h1 id="logo"></h1></div></body></html>
floatを使ったレイアウト header部の画像を準備 条件コメントを設定 CSSにコメントアウトを記述 条件コメント（Conditional Comments） IEによって解釈されるHTMLソースコード中にある条件付きのステートメント IE6以下のバージョンに適用するCSSを読み込む …
☆★データーでの確認★☆CSSでアコーディオンパネル ホバーを使いパネルが展開してように見せる HTMLの記述 「unordered list」または「definition list」を設定する 「unordered list」の中に「definition list」をネストすることも可能（例では、見出しと本文…
【 参考サイト 】 colis-コリス CSSで画像置換 リンクタグのホーバー時に別の画像を差し替えて動きを見せる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSで画像置換</title> <style> nav { width: 800px; margin: 50px 0 0 5px; } ul { list-style-type: none; overflow: hidden; } li {</meta></head></html>…
☆★データーでの確認★☆CSS Spriteでの設定 １つの画像として書き出す。レスポンスの解消にもなる。 CSSスプライトの潜在的な問題点 CSSスプライトの潜在的な問題の解決方法 【 参考サイト 】 colis-コリス ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSで画像置換</title> <style> /* rese</meta></head></html>…
フォームの基本形 基準となる基本をつくりカスタマイズしていく ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームとテーブルでマークアップする</title> <style type="text/css"> body { font-size: 75%; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-ser</meta></head></html>…
必須項目にフォーカス 送信した後の記入された項目を自動で削除する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォーカス時のスタイルを指定する</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <form action="#" method="POST" id="inquiry"> </form></body></html>
☆★データーでの確認★☆HTMLの記述 『 ul 』「unordered list」または『 dl 』「definition list」を設定する 「unordered list」の中に「definition list」をネストすることも可能（例では、見出しと本文のセット） マウスオーバーではなく、クリックで表示さ…
CSSによるページ構築の手順 この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていく。
文書構造のグループ化 グループ化とは、div要素によるコンテンツのブロック化 「コンテンツのブロック化」であるので、１行を「div要素」で囲まないことが鉄則 見出しと本文のまとまりとを一緒に構造化 情報を「線形化」する砕いて言えば、ワープロソフトの…
IE6で、マージンが２倍になってしまうバグ 下記のコードで、IE6はマージンが20pxになる。 #sidebar{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10px; } マージンが２倍になってしまうバグは、…
floatと親ボックスの「高さ」
CSSは3次元で考える 記述の順序は「外側から」と「重なり順の上から」がある。 一般的にレイヤー構図を意識して記述することが少ないからか「外側から」記述することが多い 記述順序例
スタイルの優先順位
要素間の上下マージンの相殺 どちらも正の値の場合、大きいほう どちらも負の値の場合、小さいほう 一方が正の値、他方が負の値の場合、足し引きした値を設定（5px + 10px = 15px）
fontsizeとlineheight
displayとvisibility 「visibility: hidden」ではボックスが生成されたうえで、不可視化される
position: absolute（絶対的） 包含ブロック（左上）からの移動距離
☆★データーでの確認★☆三段目のボックスを配置する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>三段目のボックスを配置する</title> <link rel="stylesheet" href="css/style19.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header><br>１段目<br> </div></div></body></html>
絶対配置するボックスの親ボックスを作る ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>絶対配置するボックスの親ボックスを作る</title> <link rel="stylesheet" href="css/style14.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header><br>１段目<br> </div></div></body></html>
☆★データーでの確認★☆ レイアウト全体をセンタリングする ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>レイアウト全体をセンタリングする</title> <link rel="stylesheet" href="css/style15.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header><br>１段目<br> </div></div></body></html>
片側だけのフッターを配置する ソースコード【 HTML 】 <html lang="ja"> <head> <title>片側だけのフッターを配置する</title> <link rel="stylesheet" href="css/style16.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header><br>１段目<br> </div> <div id="wrapper"> </div></div></body></html>
両側をまたぐフッターを配置する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>両脇をまたぐフッターを配置する</title> <link rel="stylesheet" href="css/style17.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header><br>１段目<br> </div> </div></body></html>
☆★データーでの確認★☆本文の段組を可変にする ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>本文の段階を可変にする</title> <link rel="stylesheet" href="css/style18.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <header><br>１段目<br> </div>…</div></body></html>
positionとは positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法（基準位置）のみ static 特に配置方法を指定しない。 この値のときには、top、bottom、left、rightは適…
