CSS/Tips をテンプレートにして作成

開始行:
*CSS Tips 質問の多い事項について、簡単なサンプルで回答しています。 ~ #contents2_1 ~ #hr ~ ***ウィンドウの拡大縮小に合わせて画像のサイズを変えたい まず基本的なことですが、HTML側の img タグに width を書か... 　画像単体であれば CSSでサイズを%指定すれば可変サイズにな... img{ width: 50%; } ただし、画像を配置したボックスが固定サイズだと、そのボッ... -HTML <div id="container"> <article> <img src="sample.jpg"> ： -CSS #container { width: 80%; } article { width: 60%; } article img { width: 50%; } 以上のように書いてあるとすると、ウインドウサイズに対する... 0.8 x 0.6 x 0.5 のサイズになります。 &size(12){※実際には 各ボックスの magin、padding も加味す... ~ ~ ***ウィンドウの拡大縮小に合わせて文字サイズを変えたい CSSの font-size で、ビューポート-パーセンテージ：vw(viewp... font-size: 2vw; /* 画面幅 = 50文字 */ ~ ~ ***YouTubeの埋め込み幅をフレキシブルにするには この問題は、多くの人を悩ませているようで、Webで検索すると... -HTML：iframe を <div> で囲んで、CLASS名を与えます。 <div class="youtube"> <iframe src="https://www.youtube.com/embed/EexXu1UhLMY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> -CSS：かなりトリッキーな書き方ですが、以下のパターンが良... .youtube { position: relative; padding-bottom: 56.25%; /* 16:9の場合*/ height: 0; overflow: hidden; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ~ ~ ***marginやpaddingをゼロにしているのに余白が残る ブラウザは、各セレクタごとにデフォルトスタイルを持ってい... CSSファイルの先頭に以下のような記述を加えてみて下さい。 * { margin: 0px; padding: 0px; line-height: 100%; } ＊(アスタリスク)はユニバーサルセレクタといって、すべての... 　すべてを0リセットした上で、必要な箇所ごとにマージン、パ... ~ ~ ***画像の下に隙間ができる（これを消したい） ＜img＞はインライン要素であるため、位置の扱いは文字と同様... -img の vertical-align を bottom にする　← 大半がこれで解決 img { vertical-align: bottom; } -img のdisplay属性を block にしてサイズを指定 img{ display: block; } ~ ~ ***スタイルシートで定義した背景画像が表示されなくなった HTMLと同一階層にあった CSSファイルを、例えばCSSという名前... -index.html -css --style.css -images --back.gif この場合は、CSSでは以下のようにURL指定する必要があります。 background-image: url(../images/back.gif); ''../''という表記は「現在の場所からひとつ上の階層へ上がる... ~ ~ ***要素を中央に置くには インライン要素の場合 text-align: center; で解決しますが、... -''margin: auto; を使う方法'' #container{ width: 480px; /* 要素の幅を具体的に指定します */ margin: auto; /* 左右の余白を自動にすることで中... } -''position を使う方法'' 例えば #container領域を画面中央に配置するには、position: ... //ただし、前提として親要素にheight : 100%; が適用されてい... #container{ position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -200px; width: 600px; height: 400px; } 尚、Web は縦方向については「成り行き」で考えることが多い... [[Google:JavaScript 画面中央配置]] ~ ~ ***ナビ（横並び）を画面中央に配列する方法 -HTML <nav> <ul> <li><a href="#" >home</a></li> <li><a href="#">about me</a></li> <li><a href="#">works</a></li> <li><a href="#">contact</a></li> </ul> </nav> -CSS（margin: auto; で左右の余白を均等にする方法） nav ul{ width: 50%; margin: auto; display: flex; flex-direction: row; } nav ul li{ width: 25%; } nav ul li a { display: block; } --nav ul にdisplay: flex; を定義して幅を制限（上の例では5... --項目が４つあるので、nav ul li の幅は 1/4 つまり 25% に... -CSS（別解：nav 要素の text-align: center; を使う方法） nav { text-align: center; } nav ul { width: 50%; display: inline-flex; flex-direction: row; } nav ul li { width: 25%; } nav ul li a { display: block; } --nav に text-align: cener; を定義します。 --nav ul を inline-flex として幅を制限（上の例では50%に）... --項目が４つあるので、nav ul li の幅は 1/4 つまり 25% に... ~ ~ ***ナビを画面に固定する方法１ 画面の小さなスマートフォンでは、スクロールするとメニュー... nav { position: fixed; top 0px; left 40px; } ~ ~ ***ナビを画面に固定する方法２ //&color(red){将来的にはOKですが、現状ではサポートしない... 相対位置指定と固定位置指定を組み合わせたもので、スクロー... nav { position: sticky; top: 0; } ~ ~ ***ナビを画面に固定する方法３（JS）　[[→''DEMO'' >https:/... 単にナビをウインドウに固定するのではなく、スクロールアッ... 以下、DEMOの要点のみ、ソースを記載して説明します。 なお、このサンプルでは[[jQuery]] が必要です。 -HTML <nav id="SiteNavi"> ：　途中省略 </nav> スクロール時に固定したい要素に id = "SiteNavi"を定義しま... -CSS header { height: 120px; } #SiteNavi { position: absolute; top: 120px; ：　 以下詳細略 } #SiteNavi.fixed { position: fixed; top: 0px; } ヘッダーの120px分はスクロールアップで見えなくなりますが、... -JavaScript $(function() { $(window).on('scroll', function() { if ($(this).scrollTop() > 120) { $('#SiteNavi').addClass('fixed'); } else { $('#SiteNavi').removeClass('fixed'); } }); }); 120という数字は、スクロールで消える分の header の高さです。 スクロールが120px越えたら、SiteNavi に fixed クラスを付加 それ以外の場合は、SiteNavi から fixed クラスを削除 ~ ~ ***CSSのみでメニューのトグル表示　[[→DEMO>https://koichi-... CSSの :checked擬似クラスを使うと、チェックの有無ごとに異... &color(red){本件の説明記事は別ページに移動しました。};　... ~ ~ ***マウスホバーで吹き出し　[[→DEMO>https://design.kyusan-... ターゲットと吹き出し（ツールチップ）を同じボックス内に置... -HTML <div class="box"> <P>ここにマウスをのせて下さい。</p> <p class="balloon">説明文が表示されます。</p> </div> -CSS .box{ position: relative; width: 240px; padding: 40px; background: silver; } .box .balloon{ position: absolute; top: 140px; left: 0px; width: 240px; padding: 40px; background: red; color: white; display: none; } .box:hover .balloon{ display: block; } 通常は吹き出し部分が非表示(display: none;)になっていて、... -CSS 別解（transition で演出） .box .balloon{ position: absolute; 　： visibility: hidden; opacity: 0; transition: .5s; } .box:hover .balloon{ visibility: visible; opacity: 1; } [[CSSアニメーション>CSS/Animation]]の ''transition'' を使... ~ ~ ***マウスホバーで吹き出し 2　[[→DEMO>https://design.kyusa... ''Balloon.css'' という便利な ''CSSライブラリ'' があります。 これを読み込むだけで、上下左右好きな方向に吹き出し（ツー... download > http://kazzkiq.github.io/balloon.css/ 必要なのは、 ''balloon.min.css'' のみです。 -HTMLのHEAD部分：以下の一行を追加（path/to/の部分は各自の... <link rel="stylesheet" href="path/to/balloon.min.css"> -HTMLのBODY部分：以下のように書くだけです。 <ul> <li data-balloon-length="large" data-balloon="任意のテ... <li data-balloon-length="large" data-balloon="任意のテ... <li data-balloon-length="large" data-balloon="任意のテ... <li data-balloon-length="large" data-balloon="任意のテ... </ul> --data-balloon：吹き出しの中に入るテキスト --data-balloon-length：吹き出しの大きさ small, medium, la... --data-balloon-pos：吹き出しの位置 up, left, right, down ~ ~ ***マウスホバーでサブメニュー メインメニューのマウスホバー時に、下位のサブメニューが出... JavaScript等は使わず、CSSの hover 擬似クラスのみで実現可... [[記事は NavigationDesign のページへ移動しました。>Naviga... ~ ~ ***画像の部分領域でマウスホバー　[[→DEMO>https://design.k... 基本的には、上の事例の応用になりますが、area タグはブロッ... -HTML <div id="MAP"> <img src="3x3.gif" usemap="#sample"> <map name="sample"> <area onmouseover="ShowMessage(0)" shape="rect" coor... <area onmouseover="ShowMessage(1)" shape="rect" coor... <area onmouseover="ShowMessage(2)" shape="rect" coor... 　　　　： 　　　途中略 </map> </div> <div id="MESSAGE"> <h1>TITLE</h1> <p>description</p> </div> 各 area 上にマウスオーバーの際の動作を定義しています。引... -JavaScript function ShowMessage(n){ var text = []; //配列を用意して必要数分の説明... text[0] = "<h1>00</h1><p>エリア00についての説明</p>"; text[1] = "<h1>01</h1><p>エリア01についての説明</p>"; text[2] = "<h1>02</h1><p>エリア02についての説明</p>"; 　　　　： 　　　途中略 MESSAGE.innerHTML = text[n]; // 当該番号の情報を埋め... } 必要な分だけ HTML を定義した上で、渡された引数に応じて、... 尚、ここではシンプルに書くことを優先し、[[DOM>JavaScript/... ~ ~ ***フッターをページの一番下に固定したい CASE１ 最も簡単なのは、position: fixed; でウインドウの下に固定す... footer { width: 100%; position: fixed; bottom 0; left 0; } ~ ***フッターをページの一番下に固定したい CASE２　[[→ DEMO ... すべての要素を囲む#containerがあり、その中にfooterが含ま... 　ボックスの height は、その親要素の height に依存するの... //http://peterned.home.xs4all.nl/examples/csslayout1.html 要点を書き出すと以下のような感じです。 html,body { height: 100%; } : #container { position: relative; height: auto !important; min-height: 100%; } : footer { position:absolute; bottom:0; } ~ ~ ***リンクの反応エリアを拡大したい リンク動作は＜a＞タグの中身、つまり文字にしか反応しません... ul li{ /* ここには幅や高さの情報は書かない */ } ul li a{ display: block; width: 180px; padding: 10px; background-color: white; color: black; } ul li a:hover{ background-color: black; color: white; } ~ ~ ***ギャラリーページにサムネイルを並べるには　→[[''DEMO'' ... DEMOのソースをご覧ください。画像とキャプションをまとめて... -HTML：以下のようにサムネイルブロックを繰り返し記述するだ... <div id="gallery"> <div class="box"> <img class="thumb" src="images/monalisa.jpg"> <p class="notes"> La Gioconda (1519）<br> Leonardo da Vinci<br> 30 × 21 inch<br> </p> </div> <div class="box"> <img class="thumb" src="images/xxxxxxx.jpg"> 　　： </div> <div class="box"> <img class="thumb" src="images/xxxxxxxx.jpg"> 　　： </div> ： 以下同様に羅列 </div> -CSS：以下のようにサムネイルブロックを左回り込みするだけ... #gallery{ width: 960px; } .box { float: left; width: 100px; height: 240px; margin-right: 40px; margin-bottom: 40px; } -CSS別解：サムネイルブロックの親要素を display: flex; で... 利点は、柔軟な配列が簡単にできることです。→参考：[[CSS/Fl... &size(12){※最近のブラウザは Flexboxに対応していますので、... #gallery{ width: 960px; display: flex; } .box { width: 100px; height: 240px; margin-right: 40px; margin-bottom: 40px; } ~ ~ ***印刷用のCSSについて 画面表示と印刷でスタイルを区別したい場合は・・・ -印刷用のCSSを用意して、その読み込み時に media="print" を... <link rel="stylesheet" type="text/css" media="print" hr... -CSSに直接メディアクエリーを書く @media print { header { height: 40px; border-bottom: 1px solid #000; } } -ブラウザでの確認方法 #image(debug_print_css.png,right,40%) 印刷用のCSS は、当然ブラウザの画面（media="screen"）には... 　しかし、これでは作業効率が悪いので、例えば Chrome には... -ページが表示された状態で 右クリック＞[ 検証 ] -開発パネル右上の三連ドットボタンから MoreTools > Rendering -右上図のパネルが開くので、 Emulate CSS media ＞ [ print ] ~ ~ ***IEでCSS3を使いたい &color(red){この話は時間の問題で、やがて不要になると思い... 現状では、PIE.htcを使うという方法があります。 [[PIE CSS3 decorations for IE>Google:PIE CSS3 decorations... -DLすると複数のファイルがありますが、必要なのは「PIE.htc」 これを任意のフォルダに置きます。　→　「css/PIE.htc」 -使い方は、CSS3を適応させたい部分で以下のように書くだけで... #selector { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; behavior: url(“css/PIE.htc”); } ~ ~

終了行:
*CSS Tips 質問の多い事項について、簡単なサンプルで回答しています。 ~ #contents2_1 ~ #hr ~ ***ウィンドウの拡大縮小に合わせて画像のサイズを変えたい まず基本的なことですが、HTML側の img タグに width を書か... 　画像単体であれば CSSでサイズを%指定すれば可変サイズにな... img{ width: 50%; } ただし、画像を配置したボックスが固定サイズだと、そのボッ... -HTML <div id="container"> <article> <img src="sample.jpg"> ： -CSS #container { width: 80%; } article { width: 60%; } article img { width: 50%; } 以上のように書いてあるとすると、ウインドウサイズに対する... 0.8 x 0.6 x 0.5 のサイズになります。 &size(12){※実際には 各ボックスの magin、padding も加味す... ~ ~ ***ウィンドウの拡大縮小に合わせて文字サイズを変えたい CSSの font-size で、ビューポート-パーセンテージ：vw(viewp... font-size: 2vw; /* 画面幅 = 50文字 */ ~ ~ ***YouTubeの埋め込み幅をフレキシブルにするには この問題は、多くの人を悩ませているようで、Webで検索すると... -HTML：iframe を <div> で囲んで、CLASS名を与えます。 <div class="youtube"> <iframe src="https://www.youtube.com/embed/EexXu1UhLMY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> -CSS：かなりトリッキーな書き方ですが、以下のパターンが良... .youtube { position: relative; padding-bottom: 56.25%; /* 16:9の場合*/ height: 0; overflow: hidden; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ~ ~ ***marginやpaddingをゼロにしているのに余白が残る ブラウザは、各セレクタごとにデフォルトスタイルを持ってい... CSSファイルの先頭に以下のような記述を加えてみて下さい。 * { margin: 0px; padding: 0px; line-height: 100%; } ＊(アスタリスク)はユニバーサルセレクタといって、すべての... 　すべてを0リセットした上で、必要な箇所ごとにマージン、パ... ~ ~ ***画像の下に隙間ができる（これを消したい） ＜img＞はインライン要素であるため、位置の扱いは文字と同様... -img の vertical-align を bottom にする　← 大半がこれで解決 img { vertical-align: bottom; } -img のdisplay属性を block にしてサイズを指定 img{ display: block; } ~ ~ ***スタイルシートで定義した背景画像が表示されなくなった HTMLと同一階層にあった CSSファイルを、例えばCSSという名前... -index.html -css --style.css -images --back.gif この場合は、CSSでは以下のようにURL指定する必要があります。 background-image: url(../images/back.gif); ''../''という表記は「現在の場所からひとつ上の階層へ上がる... ~ ~ ***要素を中央に置くには インライン要素の場合 text-align: center; で解決しますが、... -''margin: auto; を使う方法'' #container{ width: 480px; /* 要素の幅を具体的に指定します */ margin: auto; /* 左右の余白を自動にすることで中... } -''position を使う方法'' 例えば #container領域を画面中央に配置するには、position: ... //ただし、前提として親要素にheight : 100%; が適用されてい... #container{ position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -200px; width: 600px; height: 400px; } 尚、Web は縦方向については「成り行き」で考えることが多い... [[Google:JavaScript 画面中央配置]] ~ ~ ***ナビ（横並び）を画面中央に配列する方法 -HTML <nav> <ul> <li><a href="#" >home</a></li> <li><a href="#">about me</a></li> <li><a href="#">works</a></li> <li><a href="#">contact</a></li> </ul> </nav> -CSS（margin: auto; で左右の余白を均等にする方法） nav ul{ width: 50%; margin: auto; display: flex; flex-direction: row; } nav ul li{ width: 25%; } nav ul li a { display: block; } --nav ul にdisplay: flex; を定義して幅を制限（上の例では5... --項目が４つあるので、nav ul li の幅は 1/4 つまり 25% に... -CSS（別解：nav 要素の text-align: center; を使う方法） nav { text-align: center; } nav ul { width: 50%; display: inline-flex; flex-direction: row; } nav ul li { width: 25%; } nav ul li a { display: block; } --nav に text-align: cener; を定義します。 --nav ul を inline-flex として幅を制限（上の例では50%に）... --項目が４つあるので、nav ul li の幅は 1/4 つまり 25% に... ~ ~ ***ナビを画面に固定する方法１ 画面の小さなスマートフォンでは、スクロールするとメニュー... nav { position: fixed; top 0px; left 40px; } ~ ~ ***ナビを画面に固定する方法２ //&color(red){将来的にはOKですが、現状ではサポートしない... 相対位置指定と固定位置指定を組み合わせたもので、スクロー... nav { position: sticky; top: 0; } ~ ~ ***ナビを画面に固定する方法３（JS）　[[→''DEMO'' >https:/... 単にナビをウインドウに固定するのではなく、スクロールアッ... 以下、DEMOの要点のみ、ソースを記載して説明します。 なお、このサンプルでは[[jQuery]] が必要です。 -HTML <nav id="SiteNavi"> ：　途中省略 </nav> スクロール時に固定したい要素に id = "SiteNavi"を定義しま... -CSS header { height: 120px; } #SiteNavi { position: absolute; top: 120px; ：　 以下詳細略 } #SiteNavi.fixed { position: fixed; top: 0px; } ヘッダーの120px分はスクロールアップで見えなくなりますが、... -JavaScript $(function() { $(window).on('scroll', function() { if ($(this).scrollTop() > 120) { $('#SiteNavi').addClass('fixed'); } else { $('#SiteNavi').removeClass('fixed'); } }); }); 120という数字は、スクロールで消える分の header の高さです。 スクロールが120px越えたら、SiteNavi に fixed クラスを付加 それ以外の場合は、SiteNavi から fixed クラスを削除 ~ ~ ***CSSのみでメニューのトグル表示　[[→DEMO>https://koichi-... CSSの :checked擬似クラスを使うと、チェックの有無ごとに異... &color(red){本件の説明記事は別ページに移動しました。};　... ~ ~ ***マウスホバーで吹き出し　[[→DEMO>https://design.kyusan-... ターゲットと吹き出し（ツールチップ）を同じボックス内に置... -HTML <div class="box"> <P>ここにマウスをのせて下さい。</p> <p class="balloon">説明文が表示されます。</p> </div> -CSS .box{ position: relative; width: 240px; padding: 40px; background: silver; } .box .balloon{ position: absolute; top: 140px; left: 0px; width: 240px; padding: 40px; background: red; color: white; display: none; } .box:hover .balloon{ display: block; } 通常は吹き出し部分が非表示(display: none;)になっていて、... -CSS 別解（transition で演出） .box .balloon{ position: absolute; 　： visibility: hidden; opacity: 0; transition: .5s; } .box:hover .balloon{ visibility: visible; opacity: 1; } [[CSSアニメーション>CSS/Animation]]の ''transition'' を使... ~ ~ ***マウスホバーで吹き出し 2　[[→DEMO>https://design.kyusa... ''Balloon.css'' という便利な ''CSSライブラリ'' があります。 これを読み込むだけで、上下左右好きな方向に吹き出し（ツー... download > http://kazzkiq.github.io/balloon.css/ 必要なのは、 ''balloon.min.css'' のみです。 -HTMLのHEAD部分：以下の一行を追加（path/to/の部分は各自の... <link rel="stylesheet" href="path/to/balloon.min.css"> -HTMLのBODY部分：以下のように書くだけです。 <ul> <li data-balloon-length="large" data-balloon="任意のテ... <li data-balloon-length="large" data-balloon="任意のテ... <li data-balloon-length="large" data-balloon="任意のテ... <li data-balloon-length="large" data-balloon="任意のテ... </ul> --data-balloon：吹き出しの中に入るテキスト --data-balloon-length：吹き出しの大きさ small, medium, la... --data-balloon-pos：吹き出しの位置 up, left, right, down ~ ~ ***マウスホバーでサブメニュー メインメニューのマウスホバー時に、下位のサブメニューが出... JavaScript等は使わず、CSSの hover 擬似クラスのみで実現可... [[記事は NavigationDesign のページへ移動しました。>Naviga... ~ ~ ***画像の部分領域でマウスホバー　[[→DEMO>https://design.k... 基本的には、上の事例の応用になりますが、area タグはブロッ... -HTML <div id="MAP"> <img src="3x3.gif" usemap="#sample"> <map name="sample"> <area onmouseover="ShowMessage(0)" shape="rect" coor... <area onmouseover="ShowMessage(1)" shape="rect" coor... <area onmouseover="ShowMessage(2)" shape="rect" coor... 　　　　： 　　　途中略 </map> </div> <div id="MESSAGE"> <h1>TITLE</h1> <p>description</p> </div> 各 area 上にマウスオーバーの際の動作を定義しています。引... -JavaScript function ShowMessage(n){ var text = []; //配列を用意して必要数分の説明... text[0] = "<h1>00</h1><p>エリア00についての説明</p>"; text[1] = "<h1>01</h1><p>エリア01についての説明</p>"; text[2] = "<h1>02</h1><p>エリア02についての説明</p>"; 　　　　： 　　　途中略 MESSAGE.innerHTML = text[n]; // 当該番号の情報を埋め... } 必要な分だけ HTML を定義した上で、渡された引数に応じて、... 尚、ここではシンプルに書くことを優先し、[[DOM>JavaScript/... ~ ~ ***フッターをページの一番下に固定したい CASE１ 最も簡単なのは、position: fixed; でウインドウの下に固定す... footer { width: 100%; position: fixed; bottom 0; left 0; } ~ ***フッターをページの一番下に固定したい CASE２　[[→ DEMO ... すべての要素を囲む#containerがあり、その中にfooterが含ま... 　ボックスの height は、その親要素の height に依存するの... //http://peterned.home.xs4all.nl/examples/csslayout1.html 要点を書き出すと以下のような感じです。 html,body { height: 100%; } : #container { position: relative; height: auto !important; min-height: 100%; } : footer { position:absolute; bottom:0; } ~ ~ ***リンクの反応エリアを拡大したい リンク動作は＜a＞タグの中身、つまり文字にしか反応しません... ul li{ /* ここには幅や高さの情報は書かない */ } ul li a{ display: block; width: 180px; padding: 10px; background-color: white; color: black; } ul li a:hover{ background-color: black; color: white; } ~ ~ ***ギャラリーページにサムネイルを並べるには　→[[''DEMO'' ... DEMOのソースをご覧ください。画像とキャプションをまとめて... -HTML：以下のようにサムネイルブロックを繰り返し記述するだ... <div id="gallery"> <div class="box"> <img class="thumb" src="images/monalisa.jpg"> <p class="notes"> La Gioconda (1519）<br> Leonardo da Vinci<br> 30 × 21 inch<br> </p> </div> <div class="box"> <img class="thumb" src="images/xxxxxxx.jpg"> 　　： </div> <div class="box"> <img class="thumb" src="images/xxxxxxxx.jpg"> 　　： </div> ： 以下同様に羅列 </div> -CSS：以下のようにサムネイルブロックを左回り込みするだけ... #gallery{ width: 960px; } .box { float: left; width: 100px; height: 240px; margin-right: 40px; margin-bottom: 40px; } -CSS別解：サムネイルブロックの親要素を display: flex; で... 利点は、柔軟な配列が簡単にできることです。→参考：[[CSS/Fl... &size(12){※最近のブラウザは Flexboxに対応していますので、... #gallery{ width: 960px; display: flex; } .box { width: 100px; height: 240px; margin-right: 40px; margin-bottom: 40px; } ~ ~ ***印刷用のCSSについて 画面表示と印刷でスタイルを区別したい場合は・・・ -印刷用のCSSを用意して、その読み込み時に media="print" を... <link rel="stylesheet" type="text/css" media="print" hr... -CSSに直接メディアクエリーを書く @media print { header { height: 40px; border-bottom: 1px solid #000; } } -ブラウザでの確認方法 #image(debug_print_css.png,right,40%) 印刷用のCSS は、当然ブラウザの画面（media="screen"）には... 　しかし、これでは作業効率が悪いので、例えば Chrome には... -ページが表示された状態で 右クリック＞[ 検証 ] -開発パネル右上の三連ドットボタンから MoreTools > Rendering -右上図のパネルが開くので、 Emulate CSS media ＞ [ print ] ~ ~ ***IEでCSS3を使いたい &color(red){この話は時間の問題で、やがて不要になると思い... 現状では、PIE.htcを使うという方法があります。 [[PIE CSS3 decorations for IE>Google:PIE CSS3 decorations... -DLすると複数のファイルがありますが、必要なのは「PIE.htc」 これを任意のフォルダに置きます。　→　「css/PIE.htc」 -使い方は、CSS3を適応させたい部分で以下のように書くだけで... #selector { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; behavior: url(“css/PIE.htc”); } ~ ~

ページ名: