質問の多い事項について、簡単なサンプルで回答しています。
まず基本的なことですが、HTML側の img タグに width を書かないようにします。HTML側にサイズ指定があると、それが優先されてしまいます。
画像単体であれば CSSでサイズを%指定すれば可変サイズになります。
img{ width: 50%; }
ただし、画像を配置したボックスが固定サイズだと、そのボックスに対する 比率になるので、変化が生じません。そこで実際には、以下のように全体をフレキシブル（リキッドレイアウト）にする必要があります。
<div id="container">
<article>
<img src="sample.jpg">
：#container { width: 80%; }
article { width: 60%; }
article 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文字 */
この問題は、多くの人を悩ませているようで、Webで検索すると様々な方法が解説されていますが、一般に以下のようにするとうまくいくようです。
<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>
.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%;
}
ブラウザは、各セレクタごとにデフォルトスタイルを持っていて、ユーザーのスタイルシートに特に指定がない場合は、デフォルトの余白や行間情報が適用されます。で、時にはこれが邪魔な存在になるわけです。そこで・・
CSSファイルの先頭に以下のような記述を加えてみて下さい。
* {
margin: 0px;
padding: 0px;
line-height: 100%;
}
＊(アスタリスク)はユニバーサルセレクタといって、すべてのセレクタに適用されます。この記述をすることで、ブラウザがデフォルトで持っているマージンの設定等を、すべてリセットすることができます。
すべてを0リセットした上で、必要な箇所ごとにマージン、パディング、行間を設定する・・という流れで作るのがスムーズです。
＜img＞はインライン要素であるため、位置の扱いは文字と同様になります。文字というのは、デフォルトではベースラインに合わせて置くので親領域の下端にはぴったりと合いません。以下のような解決方法があるのでいずれかをお試しください。
img { vertical-align: bottom; }img{ display: block; }
HTMLと同一階層にあった CSSファイルを、例えばCSSという名前のフォルダへ移動すると、ファイルの相対的な位置関係が変わるので、パスが通らなくなります。例えば、以下のようなファイルレイアウトの場合は・・
この場合は、CSSでは以下のようにURL指定する必要があります。
background-image: url(../images/back.gif);
../という表記は「現在の場所からひとつ上の階層へ上がる」ことを意味します。上のような階層構造の場合、style.css の位置からは images が見えないので、一旦上の階層に出てから images＞back.gif と辿る・・ということです。
インライン要素の場合 text-align: center; で解決しますが、ボックス要素は text-align ではセンタリングできません。一般に以下のような方法があります。
#container{
width: 480px; /* 要素の幅を具体的に指定します */
margin: auto; /* 左右の余白を自動にすることで中央に配置されます */
}#container{
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
width: 600px;
height: 400px;
}尚、Web は縦方向については「成り行き」で考えることが多いので、縦方向での中央については設定が面倒です。・・というより、縦：中央は考えない方が賢明です。また、これはCSSだけで実現する方法よりも、JavaScript を使ってユーザーのが画面の高さを取得する方がよいでしょう。
Google:JavaScript 画面中央配置
<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>nav ul{
width: 50%;
margin: auto;
display: flex;
flex-direction: row;
}
nav ul li{
width: 25%;
}
nav ul li a {
display: block;
}
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;
}
画面の小さなスマートフォンでは、スクロールするとメニュー（ナビ）が見えなくなって不便・・という問題が生じます。そこで利用されるのが position: fixed;です。これを使うとスクロール操作に関わらずメニューをブラウザの画面上の同じ位置に固定させることができます。
nav {
position: fixed;
top 0px;
left 40px;
}
相対位置指定と固定位置指定を組み合わせたもので、スクロールが指定値に達するまでは相対位置を保って移動し、その後は固定になります。便利です。
nav {
position: sticky;
top: 0;
}
単にナビをウインドウに固定するのではなく、スクロールアップの途中でナビをウインドウトップに固定するには・・という応用バージョンです。
以下、DEMOの要点のみ、ソースを記載して説明します。
なお、このサンプルではjQuery が必要です。
<nav id="SiteNavi">
： 途中省略
</nav>
スクロール時に固定したい要素に id = "SiteNavi"を定義します。header {
height: 120px;
}
#SiteNavi {
position: absolute;
top: 120px;
：
以下詳細略
}
#SiteNavi.fixed {
position: fixed;
top: 0px;
}
ヘッダーの120px分はスクロールアップで見えなくなりますが、その下にあるSiteNavi は、それが120pxを超えてスクロールしたとき、つまり、ウインドウの上端を越えそうになったところで、上端( top : 0px )に固定になります。$(function() {
$(window).on('scroll', function() {
if ($(this).scrollTop() > 120) {
$('#SiteNavi').addClass('fixed');
} else {
$('#SiteNavi').removeClass('fixed');
}
});
});
120という数字は、スクロールで消える分の header の高さです。CSSの :checked擬似クラスを使うと、チェックの有無ごとに異なるスタイルを設定するかたちでメニューの開閉を行うことができます。
本件の説明記事は別ページに移動しました。 ＞ CSS/SlideMenu
ターゲットと吹き出し（ツールチップ）を同じボックス内に置いて、ボックスのホバリング時に吹き出しが表示されるようにします。以下は、その要点部分のみ書いたものです。
<div class="box"> <P>ここにマウスをのせて下さい。</p> <p class="balloon">説明文が表示されます。</p> </div>
.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;)になっていて、マウスホバー時に表示(display: block;)されるようにします。位置については、親要素を position: relative; として、そこを基準に 子要素の場所を position: absolute; で指定する・・ということです。.box .balloon{
position: absolute;
：
visibility: hidden;
opacity: 0;
transition: .5s;
}
.box:hover .balloon{
visibility: visible;
opacity: 1;
}
CSSアニメーションの transition を使うと、ふんわりと出すことができます。その場合は、display ではなく、visibility と opacity を使って、不透明度が変化するように設定します。要点のみ記載したものです。Balloon.css という便利な CSSライブラリ があります。
これを読み込むだけで、上下左右好きな方向に吹き出し（ツールチップ）を表示することが可能になります。
download > http://kazzkiq.github.io/balloon.css/
必要なのは、 balloon.min.css のみです。
<link rel="stylesheet" href="path/to/balloon.min.css">
<ul> <li data-balloon-length="large" data-balloon="任意のテキスト" data-balloon-pos="up">上の例</li> <li data-balloon-length="large" data-balloon="任意のテキスト" data-balloon-pos="left">左の例</li> <li data-balloon-length="large" data-balloon="任意のテキスト" data-balloon-pos="right">右の例</li> <li data-balloon-length="large" data-balloon="任意のテキスト" data-balloon-pos="down">下の例</li> </ul>
メインメニューのマウスホバー時に、下位のサブメニューが出現する例です。
JavaScript等は使わず、CSSの hover 擬似クラスのみで実現可能です。
記事は NavigationDesign のページへ移動しました。
基本的には、上の事例の応用になりますが、area タグはブロックでもインラインでもない特殊なタグで、CSSのみではホバリング動作はうまくいきません。そこで実際には、以下のようにJavaScriptを使って実装することが多いようです。
<div id="MAP">
<img src="3x3.gif" usemap="#sample">
<map name="sample">
<area onmouseover="ShowMessage(0)" shape="rect" coords="0,0,99,99" href="#">
<area onmouseover="ShowMessage(1)" shape="rect" coords="100,0,199,99" href="#">
<area onmouseover="ShowMessage(2)" shape="rect" coords="200,0,299,99" href="#">
：
途中略
</map>
</div>
<div id="MESSAGE">
<h1>TITLE</h1>
<p>description</p>
</div>
各 area 上にマウスオーバーの際の動作を定義しています。引数は、エリアを特定するための番号です。マウスオーバーの際の関連メッセージは、MESSAGE の中に埋め込まれます。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 を定義した上で、渡された引数に応じて、該当するHTML をMESSAGE 部分に適用する・・という発想で記述しています。最も簡単なのは、position: fixed; でウインドウの下に固定する方法です。
footer {
width: 100%;
position: fixed;
bottom 0;
left 0;
}
すべての要素を囲む#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＞タグの中身、つまり文字にしか反応しません。このままだと、例えばメニュー上でリンク文字が３文字であれば３文字分の範囲にしかマウスが反応せず、操作性が悪い・・ということになります。反応エリアを拡大するは、以下のように＜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のソースをご覧ください。画像とキャプションをまとめて羅列している部分が見えると思います。また、そのままCSSの方を見ていただくと、最後の３項目、.box, .thumb, .notesが、サムネイルとキャプションに関する記述です。一行に何個入るかは、親要素の幅によります。以下、要点のみ掲載。
<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> #gallery{
width: 960px;
}
.box {
float: left;
width: 100px;
height: 240px;
margin-right: 40px;
margin-bottom: 40px;
}#gallery{
width: 960px;
display: flex;
}
.box {
width: 100px;
height: 240px;
margin-right: 40px;
margin-bottom: 40px;
}
画面表示と印刷でスタイルを区別したい場合は・・・
<link rel="stylesheet" type="text/css" media="print" href="print.css">
@media print {
header {
height: 40px;
border-bottom: 1px solid #000;
}
}
この話は時間の問題で、やがて不要になると思います。
現状では、PIE.htcを使うという方法があります。
PIE CSS3 decorations for IE
#selector {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
behavior: url(“css/PIE.htc”);
}