LogoMark.png

CSS/Tips

CSS Tips

質問の多い事項について、簡単なサンプルで回答しています。




ウィンドウの拡大縮小に合わせて画像のサイズを変えたい

まず基本的なことですが、HTML側の img タグに width を書かないようにします。HTML側にサイズ指定があると、それが優先されてしまいます。
 画像単体であれば CSSでサイズを%指定すれば可変サイズになります。

img{ width: 50%; }

ただし、画像を配置したボックスが固定サイズだと、そのボックスに対する 比率になるので、変化が生じません。そこで実際には、以下のように全体をフレキシブル(リキッドレイアウト)にする必要があります。

以上のように書いてあるとすると、ウインドウサイズに対する画像サイズは
0.8 x 0.6 x 0.5 のサイズになります。
※実際には 各ボックスの magin、padding も加味する必要があります。



ウィンドウの拡大縮小に合わせて文字サイズを変えたい

CSSの font-size で、ビューポート-パーセンテージ:vw(viewport width)という相対単位を使うと解決します。1.0vw でビューポートの幅の1/100です。

font-size: 2vw;  /* 画面幅 = 50文字 */




YouTubeの埋め込み幅をフレキシブルにするには

この問題は、多くの人を悩ませているようで、Webで検索すると様々な方法が解説されていますが、一般に以下のようにするとうまくいくようです。

marginやpaddingをゼロにしているのに余白が残る

ブラウザは、各セレクタごとにデフォルトスタイルを持っていて、ユーザーのスタイルシートに特に指定がない場合は、デフォルトの余白や行間情報が適用されます。で、時にはこれが邪魔な存在になるわけです。そこで・・
CSSファイルの先頭に以下のような記述を加えてみて下さい。

* {
    margin: 0px;
    padding: 0px;
    line-height: 100%;
}

*(アスタリスク)はユニバーサルセレクタといって、すべてのセレクタに適用されます。この記述をすることで、ブラウザがデフォルトで持っているマージンの設定等を、すべてリセットすることができます。
 すべてを0リセットした上で、必要な箇所ごとにマージン、パディング、行間を設定する・・という流れで作るのがスムーズです。



画像の下に隙間ができる(これを消したい)

<img>はインライン要素であるため、位置の扱いは文字と同様になります。文字というのは、デフォルトではベースラインに合わせて置くので親領域の下端にはぴったりと合いません。以下のような解決方法があるのでいずれかをお試しください。

スタイルシートで定義した背景画像が表示されなくなった

HTMLと同一階層にあった CSSファイルを、例えばCSSという名前のフォルダへ移動すると、ファイルの相対的な位置関係が変わるので、パスが通らなくなります。例えば、以下のようなファイルレイアウトの場合は・・

この場合は、CSSでは以下のようにURL指定する必要があります。

background-image: url(../images/back.gif);

../という表記は「現在の場所からひとつ上の階層へ上がる」ことを意味します。上のような階層構造の場合、style.css の位置からは images が見えないので、一旦上の階層に出てから images>back.gif と辿る・・ということです。



要素を中央に置くには

インライン要素の場合 text-align: center; で解決しますが、ボックス要素は text-align ではセンタリングできません。一般に以下のような方法があります。

尚、Web は縦方向については「成り行き」で考えることが多いので、縦方向での中央については設定が面倒です。・・というより、縦:中央は考えない方が賢明です。また、これはCSSだけで実現する方法よりも、JavaScript を使ってユーザーのが画面の高さを取得する方がよいでしょう。
Google:JavaScript 画面中央配置



ナビ(横並び)を画面中央に配列する方法




ナビを画面に固定する方法1

画面の小さなスマートフォンでは、スクロールするとメニュー(ナビ)が見えなくなって不便・・という問題が生じます。そこで利用されるのが position: fixed;です。これを使うとスクロール操作に関わらずメニューをブラウザの画面上の同じ位置に固定させることができます。

nav {
    position: fixed;
    top 0px;
    left 40px;
}




ナビを画面に固定する方法2 HTML5 DEMO Site

将来的にはOKですが、現状ではサポートしないブラウザがあります。
相対位置指定と固定位置指定を組み合わせたもので、スクロールが指定値に達するまでは相対位置を保って移動し、その後は固定になります。便利です。

nav {
    position: sticky;
    top: 0;
}




ナビを画面に固定する方法3(JS) DEMO

単にナビをウインドウに固定するのではなく、スクロールアップの途中でナビをウインドウトップに固定するには・・という応用バージョンです。
以下、DEMOの要点のみ、ソースを記載して説明します。
なお、このサンプルではjQuery が必要です。

CSSのみでメニューのトグル表示 →DEMO

CSSの :checked擬似クラスを使うと、チェックの有無ごとに異なるスタイルを設定するかたちでメニューの開閉を行うことができます。
本件の説明記事は別ページに移動しました。 > CSS/SlideMenu



マウスホバーで吹き出し →DEMO

ターゲットと吹き出し(ツールチップ)を同じボックス内に置いて、ボックスのホバリング時に吹き出しが表示されるようにします。以下は、その要点部分のみ書いたものです。

マウスホバーで吹き出し 2 →DEMO

Balloon.css という便利な CSSライブラリ があります。
これを読み込むだけで、上下左右好きな方向に吹き出し(ツールチップ)を表示することが可能になります。
download > http://kazzkiq.github.io/balloon.css/
必要なのは、 balloon.min.css のみです。

マウスホバーでサブメニュー

メインメニューのマウスホバー時に、下位のサブメニューが出現する例です。
JavaScript等は使わず、CSSの hover 擬似クラスのみで実現可能です。

記事は NavigationDesign のページへ移動しました。




画像の部分領域でマウスホバー →DEMO

基本的には、上の事例の応用になりますが、area タグはブロックでもインラインでもない特殊なタグで、CSSのみではホバリング動作はうまくいきません。そこで実際には、以下のようにJavaScriptを使って実装することが多いようです。

フッターをページの一番下に固定したい CASE1

最も簡単なのは、position: fixed; でウインドウの下に固定する方法です。

footer {
    width: 100%;
    position: fixed;
    bottom 0;
    left 0;
}


フッターをページの一番下に固定したい CASE2 → DEMO

すべての要素を囲む#containerがあり、その中にfooterが含まれている場合、footerを一番下に固定するには、#containerの高さを100%に、かつ、ページの下に position:absolute; bottom:0; にする…という発想もあります。
 ボックスの height は、その親要素の height に依存するので、高さ100%を実現するには、大元の親要素である、html と body の段階から height:100%; が定義されている必要があります。

要点を書き出すと以下のような感じです。

html,body {
    height: 100%;
}
	     :
#container {
    position: relative;
    height: auto !important;
    min-height: 100%;
}
	     :
footer {
    position:absolute;
    bottom:0;
}




リンクの反応エリアを拡大したい

リンク動作は<a>タグの中身、つまり文字にしか反応しません。このままだと、例えばメニュー上でリンク文字が3文字であれば3文字分の範囲にしかマウスが反応せず、操作性が悪い・・ということになります。反応エリアを拡大するは、以下のように<a>の領域をブロック領域として扱い、幅や高さを定義します。こうすると、<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のソースをご覧ください。画像とキャプションをまとめて羅列している部分が見えると思います。また、そのままCSSの方を見ていただくと、最後の3項目、.box, .thumb, .notesが、サムネイルとキャプションに関する記述です。一行に何個入るかは、親要素の幅によります。以下、要点のみ掲載。

印刷用のCSSについて

画面表示と印刷でスタイルを区別したい場合は・・・

IEでCSS3を使いたい

この話は時間の問題で、やがて不要になると思います。

現状では、PIE.htcを使うという方法があります。
PIE CSS3 decorations for IE

PAGES

GUIDE

DATA

添付ファイル: fileMapArea.zip 92件 [詳細] fileScrollFix.zip 99件 [詳細] filedebug_print_css.png 97件 [詳細]
Last-modified: 2020-06-16 (火) 13:26:04