Web tips

i
ボタンで切り替わります。ボタンを押すと検索パネルが現れます。
ルビをふる
  • CSS ルビ
  • CSS ふりがな

基本的な考え方

  • ルビ自体は文字サイズを縮小し、ルビ付けされる文字列の直後に、一連の文字列としてならべる
  • ルビ自体の横方向位置づけは、ルビ付けされる部分の頭位置に一致させる
  • さらに縦方向の位置づけは、ルビ自体を上方向に一行弱持ち上げる

智ちに働けば角かどが立つ。

智ちに働けば角かどが立つ。

智ちに働けば角かどが立つ。

実例

山路やまみちを登りながら、こう考えた。

智ちに働けば角かどが立つ。情じょうに棹さおさせば流される。意地を通とおせば窮屈きゅうくつだ。とかくに人の世は住みにくい。

住みにくさが高こうじると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟さとった時、詩が生れて、画えが出来る。

「草枕」夏目漱石

実例の説明

  • ルビ自体と、ルビを付される部分を、それぞれ inline element でクラス分けする（rubyクラス、およびrubiedクラス）
  • ルビ自体の文字サイズは、本文の 50% とする
  • ルビ自体のシフト量を相対指定できるよう、直上のルビ付けされる部分を containing block（relative）とする
  • ルビ自体は、上方に1.1文字、左方に2文字分（行頭のインデント分）シフトさせる
ソース 
    CSS
p { margin: 0; text-indent: 1em; line-height: 200%; }
.rubied { position: relative; }
.ruby {
	line-height: 100%;
	position: absolute; top: -1.1em; left: -2em;
	font-size: 50%;
	white-space: nowrap; /* Opera requires nowrap */
}
    HTML
<p>
<span class="rubied">山路<span
 class="ruby">やまみち</span></span>を登りながら、こう考えた。
</p>
<p>
<span class="rubied">智<span
 class="ruby">ち</span></span>に働けば<span class="rubied">角<span
 class="ruby">かど</span></span>が立つ。<span class="rubied">情<span
 class="ruby">じょう</span></span>に<span class="rubied">棹<span
 class="ruby">さお</span></span>させば流される。意地を<span
 class="rubied">通<span class="ruby">とお</span></span>せば<span
 class="rubied">窮屈<span
 class="ruby">きゅうくつ</span></span>だ。とかくに人の世は住みにくい。
</p>
<p>
 住みにくさが<span class="rubied">高<span class="ruby">こう</span></span
>じると、安い所へ引き越したくなる。どこへ越しても住みにくいと<span
 class="rubied">悟<span class="ruby">さと</span></span
>った時、詩が生れて、<span
 class="rubied">画<span class="ruby">え</span></span>が出来る。
</p>
コンテンツを上書きする
  • CSS コンテンツ 上書き
  • CSS コンテンツを重ねる
  • CSS containing block
お台場にて
背景写真
矢印 次

実例の説明

  • 写真の上に、表題（テキスト）、著作権表示（テキスト）、右矢印マーク（別イメージ）を重ねる
  • 表題、著作権表示、右矢印マーク（それぞれを position: absolute 指定する）を、containing block (#overlay-exp-container) 相対で指定できるように position: relative で定義する
  • さらに、矢印マークのsibling位置（直後）に、矢印マークの上に「次」文字を重ねる為 position: absolute で定義する
ソース 
    CSS
#overlay-exp-container { position: relative; }
#overlay-exp-text {
	position: absolute; top: 30px; left: 30px;
	padding: 0.5em;
	border: 2px ridge #fff;
	background-color: #fff;
	color: #00c;
}
#overlay-exp-copyright {
	position: absolute;
	top: 80px; left: 30px;
	color: #fff;
}
#overlay-exp-photo {
	width: 320px; height: 480px;
	border: 20px solid #fff;
}
#overlay-exp-next {
	width: 64px; height: 64px;
	position: absolute;
	top: 80px; left: 320px;
}
#overlay-exp-next-text {
	position: absolute;
	top: 22px; left: 15px;
	color: #f00;
}
    HTML
<div id="overlay-exp-container">
  <div id="overlay-exp-text">お台場にて</div>
  <div id="overlay-exp-copyright">&copy; 2005 TAGATA Akira</div>
  <img id="overlay-exp-photo" src="DSCF0004.JPG" alt="背景写真" />
  <div id="overlay-exp-next">
    <img src="next.png" alt="矢印" />
    <span id="overlay-exp-next-text">次</span>
  </div>
</div>
影をつける
  • CSS 影
  • CSS opacity
Tips
　人の世［＃「人の世」に傍点］を作ったものは神でもなければ鬼でもない。 やはり向う三軒｜両隣《りょうどな》りにちらちらするただの人である。 ただの人が作った人の世［＃「人の世」に傍点］が住みにくいからとて、越す国はあるまい。 あれば人でなし［＃「人でなし」に傍点］の国へ行くばかりだ。 人でなし［＃「人でなし」に傍点］の国は人の世［＃「人の世」に傍点］よりもなお住みにくかろう。

考え方

  • 既にパネルが position: static で表示されたコンテンツがあると想定する
  • このパネルの右下に位置する場所に、同サイズの暗く半透明の背景を持ったエレメントを挿入する

実例の説明

  • 影とパネルの containing block （#container）を用意し、パネルの位置を設定する
  • 影（#silhouette）、パネル（#exp-panel）の順にエレメントを配置し、（テキストに重ねた）影にパネルを重ねる
  • 下のテキストが透けて影らしく見せるため、opacity: 0.5 を指定する
ソース 
    CSS
#container {
	position: relative;
	top: 1em; left: 2em;
}
#exp-panel {
	position: absolute;
	font-size: 200%;
	width: 3em; height: 1em;
	padding: 0.5em;

	background-color: #339;
	border: 0.1em ridge #ccf;
	color: #fff;
	font-family: serif;
	text-align: center;
}
#silhouette {
	position: absolute;
	font-size: 200%;
	width: 3.2em; height: 1.2em;
	padding: 0.5em;

	margin: 0.5em;	/* height */
	background-color: #999;
	opacity: 0.5;
	filter: alpha(opacity=50); /* IE */
}
    HTML
<div id="container">
<div id="silhouette"></div>
<div id="exp-panel">Tips</div>
</div>
　人の世［＃「人の世」に傍点］を作ったものは神でもなければ鬼でもない。
やはり向う三軒｜両隣《りょうどな》りにちらちらするただの人である。
ただの人が作った人の世［＃「人の世」に傍点］が住みにくいからとて、越す国はあるまい。
あれば人でなし［＃「人でなし」に傍点］の国へ行くばかりだ。
人でなし［＃「人でなし」に傍点］の国は人の世［＃「人の世」に傍点］よりもなお住みにくかろう。
positionプロパティ
  • CSS position
  • CSS position relative absolute
  • CSS viewport

エレメントの描画に際し、positionプロパティで与えた値により、当該エレメントの位置付けは、以下の通り定まる。

注：日本語の静的[static]、相対[relatvie]、絶対[absolute]から受ける印象とは大分異なる点に留意が必要

値 基準位置 変位 省略値 コンテンツの重なり
static 他エレメントとの関係で一意に定まる 指定出来ない staticのエレメント同士は原則として重ならない
relatvie 他エレメントとの関係で一意に定まる top/right/bottom/leftプロパティで与える値 0 変位での移動に伴い重なる場合がある
absolute containing block auto; ゼロではないので注意が必要 他エレメントからの影響を受けない分、他エレメントと重なるのが普通
fixed viewport viewport固定なので、他エレメントと重なるのが普通
タイトルを工夫する
  • CSS block box
  • CSS グラデーション
サンプル写真 © 2004 Tagata Akira ダイアモンドヘッドからホノルル市街を望む 足元の緑地は Kapiolani Park 良く晴れた日の丘登りでした

考え方

実例の説明

ソース 
    CSS
#sophis-title-exp {
	float: right;
	position: relative;
	margin: 0.5em;
}
#sophis-pic-copy {
	position: absolute; top: 1.5em; left: 1.5em;
	font-family: monospace;
	color: #fff;
}
#sophis-title-1 { position: absolute; top:  4em; left: 3em; }
#sophis-title-2 { position: absolute; top:  8em; left: 3em; }
#sophis-title-3 { position: absolute; top: 12em; left: 3em; }
.sophis-exp-text {
	position: absolute; width: 22em;
}
.sophis-bg {
	position: absolute; top: -0.7em;
	padding: 0.5em;
	height: 1em;
	border-top: 0.2em solid #fff;
	border-bottom: 0.2em solid #fff;
	background-color: #ffc;
	opacity: 0.3;
	filter: alpha(opacity=30); /* IE */
}
.sophis-bg-1 { width: 22em; left: -1em; }
.sophis-bg-2 { width: 21em; left: -0.5em; }
.sophis-bg-3 { width: 20em; left: 0; }
.sophis-bg-4 { width: 19em; left: 0.5em; }
.sophis-bg-5 { width: 18em; left: 1em; }
    HTML
<div id="sophis-title-exp">
  <img src="img025.jpg" alt="サンプル写真" />
  <span id="sophis-pic-copy">&copy; 2004 Tagata Akira</span>
  <span id="sophis-title-1">
    <span class="sophis-bg sophis-bg-1"></span>
    <span class="sophis-bg sophis-bg-2"></span>
    <span class="sophis-bg sophis-bg-3"></span>
    <span class="sophis-bg sophis-bg-4"></span>
    <span class="sophis-bg sophis-bg-5"></span>
    <span class="sophis-exp-text">ダイアモンドヘッドからホノルル市街を望む</span>
  </span>
  <span id="sophis-title-2">
    <span class="sophis-bg sophis-bg-1"></span>
    <span class="sophis-bg sophis-bg-2"></span>
    <span class="sophis-bg sophis-bg-3"></span>
    <span class="sophis-bg sophis-bg-4"></span>
    <span class="sophis-bg sophis-bg-5"></span>
    <span class="sophis-exp-text">足元の緑地は Kapiolani Park</span>
  </span>
  <span id="sophis-title-3">
    <span class="sophis-bg sophis-bg-1"></span>
    <span class="sophis-bg sophis-bg-2"></span>
    <span class="sophis-bg sophis-bg-3"></span>
    <span class="sophis-bg sophis-bg-4"></span>
    <span class="sophis-bg sophis-bg-5"></span>
    <span class="sophis-exp-text">良く晴れた日の丘登りでした</span>
  </span>
</div>
Valid XHTML 1.0 Transitional