CSS3 transformのZ軸 時計回転のrotateと縦横回転のXやYを併用する際の注意点

tarnsform: rotate(90deg)の後にrotateX(180deg)を行うのと、rotateX(180deg)の後にrotate(90deg)を行うのでは、表示される内容が違ったので検証して見ました。

CSS3の新しいプロパティtransformにrotateというのがありますが、「rotate」は時計回転、「rotateX」は上下の回転、「rotateY」は左右の回転です。

元画像

ふなっしー

rotate(90deg);

ふなっしー

rotateX(180deg);

ふなっしー

rotateY(180deg);

ふなっしー

このrotateで時計方向に90度回転した状態で、さらにrotateXやrotateYを追加すると、上下や左右の起点はどちらになるのかが疑問でした。

rotateX(180deg)を例にすると、90度回転される前の元画像の上下を基準に回転するのなら次のようになります。

ふなっしー

そうではなく、rotate(90deg)が適用されて横向きになっている画像の上下を回転するのであれば、次のようになります。

ふなっしー

これは試せばいいだけの話なのでやってみました。

rotateを複数適用するCSSの書き方

rotateを複数適用させたい時は、transformに各rotateを半角スペースで区切って書けば出来ます。

ただ、2015年4月13日時点では、ベンダープレフィックスをつけないと反映されないブラウザもありますので、冗長ですが下のようになります。これはrotate(90deg)で画像を時計回転で90度回して、さらにrotateX(180deg)で180度反転させるという場合です。

.class_name {
	transform: rotate(90deg) rotateX(180deg);

	/* ベンダープレフィックス */
	-moz-transform: rotate(90deg) rotateX(180deg);
	-webkit-transform: rotate(90deg) rotateX(180deg);
	-o-transform: rotate(90deg) rotateX(180deg);
	-ms-transform: rotate(90deg) rotateX(180deg);
}

上のcssを実際に適用したら下の通りになりました。

ふなっしー

結論として、rotateを複数適用してもすべて元の画像を基準にされるという事です。考えてみれば当たり前の話で、もし画像のスタイルシートにheightやwidthが指定してあった場合、横になった時にそれが変わってしまうと困ります。

元の状態が基準であるならrotateとrotateXの順序を入れ替えた、次のどちらも同じ結果になるはずです。

  • transform: rotate(90deg) rotateX(180deg);
  • transform: rotateX(180deg) rotate(90deg);

ところが、このように入れ替えてみると違う表示結果となります。

rotateを複数適用する場合、順序が重要

先ほどの順序を次のように入れ替えてみました。

.class_name {
	transform: rotateX(180deg) rotate(90deg);

	/* ベンダープレフィックス */
	-moz-transform: rotateX(180deg) rotate(90deg);
	-webkit-transform: rotateX(180deg) rotate(90deg);
	-o-transform: rotateX(180deg) rotate(90deg);
	-ms-transform: rotateX(180deg) rotate(90deg);
}

その結果です。

ふなっしー

これは次のように推移しているということでしょうか?

  1. 上下を180度回転
  2. 時計方向に90度回転

そうであれば、時計方向は180度反転した後は逆さまになる、つまり反対側から見た状態という事のようです。

ふなっしー => ふなっしー

X軸 Y軸 Z軸

X軸は横線、Y軸は縦線です

X軸Y軸

rotateXは横線を基準に回転するので、rotateX(180deg)は上下の反転になります。また、rotateYは縦線を基準に回転するのでrotateY(180deg)は左右の反転になります。

rotateX(180deg);

ふなっしー

rotateY(180deg);

ふなっしー

XとYで2次元なのですが、rotateにはもうひとつ3次元の座標Z軸があります。

xyz軸

このZ軸はモニター画面の手前からモニター奥に伸びているイメージです。

rotateXやrotateYで180度回転させた画像は奥から見ているのと同じだという事です。

後ろから見ている状態と同じと考えれば時計回転が逆になるのも納得できます。

通常の状態の時計回りは右回り

時計回転はZ軸で変わる

逆の時計回りは左回り

時計回転はZ軸で変わる

rotateZについて

なのでrotateXやrotateYを処理してから時計回転のrotateを行うのと、時計回転のrotateをやってからrotateXやrotateYを行うのでは結果が違うという事だと思います。

下の画像の場合、rotate(90deg)は赤い矢印方向への回転。rotateX(180deg)は、黄色い線側と青い線側の反転です。

時計回転のrotate(90deg)後にrotateX(180deg)

  1. まずrotate(90deg)で赤い矢印方向へ90度回転
  2. その後rotateX(180deg)で黄色い線側と青い線側が反転

ふなっしー=>ふなっしー=>ふなっしー

rotateX(180deg)後に時計回転のrotate(90deg)

  1. まずrotateX(180deg)で黄色い線側と青い線側が反転
  2. その後rotate(90deg)で赤い矢印方向へ90度回転

ふなっしー=>ふなっしー=>ふなっしー

試しにrotateX(180deg) => rotate(90deg)の順のrotateの値を90degではなくマイナスの-90degにしてみます。

rotateX(180deg) => rotate(-90deg)の順
ふなっしー

rotate(90deg) => rotateX(180deg)の順で処理したのと同じ結果になりました。

まとめ

まとめると次のように言えると思います。

  • CSS3のtransformには複数の処理を書ける。
  • 複数の処理を書く場合は半角スペースで区切る。
  • 複数処理の実行は書いてある順番で行われる。
  • 処理の基準となるX、Y、Zの各軸は処理前の画像の状態と常に同じ
  • ただし、時計回転に関してはZ軸の向きによって見え方が変わるので注意!

画像が枠からはみ出さない、簡易的なスタイルシート

以前「絶対はみ出さない画像!自動でサイズ調節するスタイルシート」という記事を書きました。その通りにすれば、ブラウザのサイズに合わせて、画像サイズを自動調整するようになります。

ですが、根本的にimgタグが、わからない人には役に立ちません。そこで、今回は簡易的な方法で、記事の中の、あるいは、サイドバーの中の画像が、はみ出さないようになるスタイルシートの書き方を説明します。

注:この記事は、説明の都合上、600ピクセル以下の狭い画面サイズでは右側が切れて表示されると思いますが、ご了承ください。

画像が枠からはみ出さない、簡易的なスタイルシート

スタイルシートの最後に、次のように書き加えるだけで、画像が枠からはみ出さなくなります。

img{max-width:100%;height:auto;}

サンプル

今回は、Tomさんが船橋西武百貨店で撮影した、ふなっしーの写真を題材にします。

ふなっしー

上のスタイルシートを適用した状態で、写真を400ピクセルの枠と200ピクセルの枠に入れます。左が400ピクセル、右が200ピクセルです。

400ピクセル

記事本文


ふなっしー

200ピクセル

サイドバー


ふなっしー


左の場合、画像の横幅が400ピクセルに満たない時は、そのままの大きさで、400ピクセル以上の時は、400ピクセルのサイズで表示されます。同じように、右の画像は、元々の横幅が200ピクセルない時は、そのままの大きさで、200ピクセル以上の時だけ、200ピクセルに縮小されて表示されるようになります。

横幅いっぱいではなく、隙間を作りたい場合

上のように、余白がない状態ではなく、隙間を開けたいときには、上に書いたスタイルシートのmax-width:100%;の値を変更します。

例えば、max-width:90%;なら、枠の幅の90パーセントのサイズより画像の幅が大きい時は、枠幅の90パーセントの大きさに縮小された画像が、表示されるようになります。

img{max-width:90%;height:auto;}

400ピクセル

記事本文


ふなっしー

200ピクセル

サイドバー


ふなっしー


隙間を左右均等に割り振りたい時は

上の場合、隙間が出来ても、画像は左によっています。それを、バランス良く真ん中に配置したければ、次のようにします。

img{max-width:90%;height:auto;margin:0% 5%}

margin:0% 5%の、最初の0%は、上下の余白、次の5%は、左右の余白です。

左右の余白は、100%から画像の幅のサイズを引いて2で割った数値です。これで、余白が左右に均等に割り振られます。(注:autoでは、うまくいきません)

ただし、そうすると画像の横幅が元々小さくて、はみ出していない画像にも左側に5%の余白がついてしまいます。自分のブログの状況に合わせて対応してください。

400ピクセル

記事本文


ふなっしー

200ピクセル

サイドバー


ふなっしー


アフィリエイトの画像の場合

アフィリエイトの画像の場合、サイズ変更が認められているものと、認められていないものがあります。下のはバリューコマースのものですが、このように明確にサイズ変更が認められているものならいいのですが。

画像のサイズを変更して、トラブルが発生しても、当サイトは一切関知しません。

バリューコマースでは、画像サイズを変更してよいアフィリエイトもある

スマホとPCでレイアウトを切り替える – レスポンシブデザイン

これからのブログはスマートフォンで見やすくする必要がある

最近はスマホアクセスが増加

最近はスマートフォンでのアクセスが増えています。特に一時的なアクセス急増の場合は、Twitterでツイートされたりした時なので、尚更モバイルからのアクセスの割合が増えます。

このキャプチャは実際に、このブログの記事がツイートされた時のアクセスログですが、71%が携帯電話からのアクセスでした。

IE6が消えたと思ったら、スマホなんて面倒なもの作りやがって!と怒っても仕方ありません。頑張って対応したいと思います。

レスポンシブデザイン

先にお断りしておきますが、私はレスポンシブデザインの勉強はまったくしていないので、この記事の内容は自己流です。一般的な流儀に判している可能性もありますことを、ご承知おきください。

最近、こんなコメントを頂きました。

TOMさんのブログをスマホ(iphone)で拝見すると、両サイドがメインの記事の下に来るようになっていますが、裏技でしょうか?
私のブログはそのようにならないのですが・・・

このブログはパソコンで見たときとスマートフォンで見た時はルックスが変わるようにしてあります。下は左がパソコンで見た場合、右がスマホで見た場合の表示のされ方です。ただし、Tomさんはスマホを持っていないので、右はエミュレーションで表示させたものです。実際にスマホで見た時は、もっと崩れていると思います。

PCレイアウト    スマホレイアウト

パソコンの方は、ブラウザのサイズによっても見え方が、変わります。下はヘッダの部分だけを切り取った画像ですが、画面が広い時と、狭い時で横に並ぶ個数が変わっています。

画面が広い時のヘッダ    画面が狭い時のヘッダ

こういう風に状況によってレイアウトが変わるものをレスポンシブデザインと呼ぶそうです。

レスポンシブデザインを実現する方法は、いろいろあると思います。このブログの場合は、主にスタイルシートで作り、スタイルシートだけでやるのが難しいところにJavaScriptを使いました。ただし、何も見ないで作ったので自己流です。一般的な流儀に反しているかもしれません。

3カラムの構造

下は、このブログを書いているファンブログの3カラムスキンの構造です。ファンブログ以外でも、ほぼこれに近い形が多いと思います。

下のスキンは、記事部分が500px(500ピクセル)、左サイドバーが200px、右サイドバーが160pxです。

このブログのスキンは完全オリジナルなので、下のとは違います。

id=”container”

ヘッダ
id=”header”
id=”main”

id=”wrapper”
700px

左サイドバー
id=”sidebarLeft”
200px
記事部分
id=”content”
500px

右サイドバー
id=”sidebarRight”
160px

フッタ
id=”footer”

これをスマホの時だけ、下の構造にします。こうすれば両サイドがメインの記事の下に来ます。下の図は見やすくするために左右に余白がついていますが、この余白をなくせば、スマホの横幅いっぱいで表示されます。

これはスタイルシートを切り替えるだけで実現できます。

id=”container”

ヘッダ
id=”header”
id=”main”

id=”wrapper”

記事部分
id=”content”
左サイドバー
id=”sidebarLeft”
右サイドバー
id=”sidebarRight”
フッタ
id=”footer”

サイドバーを下に落とす

右のサイドバーを下にするには、どうしたらいいでしょうか。それには、パソコンで見る時は700pxあるwrapperの横幅を100%にすればいいです。wrapperの横幅が左右いっぱいに広がれば、右サイドバーは収まりきらないので、下に落ちます。

次に左サイドバーを、記事の下に落とします。これも同じように、記事の部分、idがcontentの部分の横幅を100%に変更します。これで、収まりきらない左サイドバーは記事の下に落ちます。

最後は下に落ちた左右サイドバーの横幅も100%に変更します。そうすれば、スマホで見たときは、上から記事、左サイドバー、右サイドバーの順に横幅いっぱいで表示されます。

つまり、wrapper、content、sidebarLeft、sidebarRightの横幅を、すべて100%にすればいいということです。

ただし、それをやるにはmainの中のHTMLが、下のようになっている必要があります。最初に記事、次に左サイドバー、その次に右サイドバーの順番です。

<div id="main">
	<div id="wrapper">
		<div id="content"></div>
		<div id="sidebarLeft"></div>
	</div>
	<div id="sidebarRight"></div>
</div>

先にある記事が横幅100%になったことで、残りは入りきらずに下に落ちますが、先にサイドバーがあれば、記事が下に落ちます。

どうやってスタイルシートを切り替えるか

スタイルシートを切り替える方法ですが、このブログではbodyタグのidを変更しています。パソコンで見たときにはidなし、スマホで見たときにはidが”sp”となるようにしています。

その実現方法として、JavaScriptを使っています。ユーザーエージェントを見て、スマホブラウザの時に、idをつけるという方法です。ソースコードは下の通りです。

<script type="text/javascript"><!--
(function(){
	if(0<=navigator.userAgent.indexOf('Android')){
		document.body.id='sp';
	}else if(0<=navigator.userAgent.indexOf('iPhone')){
		if(-1==navigator.userAgent.indexOf('iPad')){
			document.body.id='sp';
		}
	}else if(0<=navigator.userAgent.indexOf('iPod')){
		document.body.id='sp';
	}
})();//-->
</script>

このブログで使っているスクリプトから、該当箇所だけ抜き出しました。もし正しく動作しなければご連絡ください。

このスクリプトをコピーして、bodyの開始タグ(<body>)の直後に張り付ければ、スマホの時はidが切り替わるようになります。貼り付ける場所は必ず<body>の直後にしてください。

後は、body#spに対応したスタイルシートを、下のように追加すれば、スマホ用レイアウトで表示されます。

body#sp wrapper,body#sp content,
body#sp sidebarLeft,body#sp sidebarRight{
  width:100%;
}

スマホでだけ表示させたいもの、あるいはスマホでだけ表示させたくないものは、スタイルシートの display で切り替えます。

このブログのヘッダのカテゴリーメニューのように横幅で並ぶ個数を切り替えたいなら、別の記事「横幅に合わせ並ぶ個数を自動調整するスタイルシート」をご覧ください。

画像の大きさを自動調整したいときの参考記事は「絶対はみ出さない画像!自動でサイズ調節するスタイルシート」です。そちらを参考にしてください。


このブログでは、スキンのheadに次のmetaタグを書き込んでいますが、説明は省略します。これを書かなくても、サイドバーを下に落とす目的は達成できます。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

マウスが乗った写真を拡大表示する商品レイアウト

ファンブログにアップロードした画像URLの調べ方は「ファンブログでアップロードした画像の場所」に書いてあります。

Amazonなんかでやっている商品レイアウトで小さな写真を並べておいて、どれかにマウスを乗せると、その写真の拡大図を表示するという手法があります。その実現方法です。この下に6つ並んだダースベイダーのどれかにマウスを合わせると、その写真が下に大きく表示されます。






レゴ (LEGO) スターウォーズ ダースベイダー Star Wars Darth Vader Alarm Clock 目覚まし時計 9002113

LEGOとスターウォーズがコラボレーションしたアラームクロック

  • 手足が可動式なのでお気に入りのスタイルで飾れます。
  • 頭の部分を押してアラームストップ&ライト点灯。
  • デスクサイド、ベッドサイドを演出してくれるクロックです。
【メーカー名】LEGO
【品番・型番】9002113

サイズ:(約)前長23cm、幅15cm / 重量:(約)535g
材質:プラスチック / 生産国:中国
スペック:アラーム(スヌーズ機能付き)ライト付き
     単4乾電池×2本使用(付属)
箱・保証書:有り(6ヶ月)
特記事項:実際の商品とは若干異なる場合がございます。
     予めご了承ください。

3,675円(税抜:3,500円)

送料525円(お買い上げ金額合計8,000円以上で送料無料)

レゴ (LEGO) スターウォーズ ダースベイダー Star Wars Darth Vader Alarm Clock 目覚まし時計 9002113  レゴ (LEGO) スターウォーズ ダースベイダー Star Wars Darth Vader Alarm Clock 目覚まし時計 9002113をカートに入れる

ちなみにこれは「カートに入れる」と本当に買うことができます

え!欲しいですか?困ったなぁ。そんなつもりじゃなくて、ただのサンプルなんだけど!いやぁ困った!でも仕方がない。どうしても欲しい方は レゴ (LEGO) スターウォーズ ダースベイダー Star Wars Darth Vader Alarm Clock 目覚まし時計 9002113をカートに入れる をクリックしてお買い上げください。

ソースコード

今回説明するのは、左上のダースベーダーの写真だけのブロックです。その右の「説明文」や「カートに入れる」ボタンがあるブロックと、写真の下の「ストーム・トルーパー」や「Amazon」「楽天」等へのリンクがまとまっているブロック、この2つは説明には含めません。

先にソースだけをまとめて書きます。これをまるごとブログの記事にコピペして、画像URL1から6に表示したい画像のURLを入れるだけでも上のようになります。ただし、編集画面のオプションで改行を有効にしていると動かないと思います。改行を有効にしていても動くソースは記事の最後です。

“マウスが乗った写真を拡大表示する商品レイアウト”の続きを読む

横幅に合わせ並ぶ個数を自動調整するスタイルシート

ファンブログにアップロードした画像URLの調べ方は「ファンブログでアップロードした画像の場所」に書いてあります。

上のキャプチャー画面はブラウザの表示サイズで横に並ぶ数が自動で変わります。意味がわからない方は、試しに今開いているこのページのサイズを色々と変えてみてください。画像が横に2個並んだり、1個だけになったりします。

ブラウザのサイズ変更ボタン

ブラウザのドラッグ

今回のテクニックを駆使した記事が「ゲーマーブログの収益アップにアクセストレードを強く薦める理由」です。リンクをクリックすると別画面で、その記事が表示されますので、見比べながら説明をご覧いただければ、理解が早いかと思います。

floatとwidthで横の個数を自動調整

上のキャプチャー画面は全部、横幅320ピクセルのアフィリエイトです。ブラウザの表示画面が660ピクセル以上あれば、横2個x縦2個の表示、なければ横1個x縦4個で表示します。ソースコードは以下の通りです。

<style type="text/css">
p.capture{
 float:left;
 margin-right:10px;
}
</style>

<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p style="clear:left;">大きさも色々選べる。</p>

float:leftで画像を左寄せにしています。さらにmargin-right:10pxで画像の右側に10ピクセルの余白を作ります。これで2つ並んでもピッタリとくっついてしまいません。

画像自体が320ピクセルで、右に余白が10ピクセルつくと、合計330ピクセルです。ですから表示領域が660ピクセル以上あれば、横に2個並びます。しかし、足りない時には、横ではなく下に移動します。

最後にclear:leftを絶対に忘れないようにしてください。

“横幅に合わせ並ぶ個数を自動調整するスタイルシート”の続きを読む

絶対はみ出さない画像!自動でサイズ調節するスタイルシート

今回も、ちぎり絵作家NARUさんの、作品「NARUシカ」をお借りして、スタイルシートで画面サイズに合わせて画像の大きさを自動で変え、スマホで見ても絶対にはみ出さない方法を説明します。

この記事はHTMLのimgタグの使い方が分かることを前提にしています。この記事を読んで分からない場合は、imgタグが分からない人向けに書いた、別の記事「画像が枠からはみ出さない、簡易的なスタイルシート」で対応してください。

NARUシカ

画像の大きさを画面サイズに合わせて自動で変える

意味がわからない方は、試しに今開いているこのページのサイズを色々と変えてみてください。常に横幅いっぱいの大きさで、はみ出すことなく、フルサイズ「NARUシカ」が表示されていると思います。

ブラウザのサイズ変更ボタン

ブラウザのドラッグ

自動で大きさを変える時はwidthをパーセントで指定する

このページの「NARUシカ」のソースコードは以下の通りです。

<img src="画像のURL" alt="画像の説明" style="width:100%;height:auto;" />

スタイルシートのwidth100%を指定した結果、画面のサイズを変えても常にフルサイズになります。パーセンテージの基準は自分が入っている場所(node)の大きさです。基準の場所(node)の広さが1000ピクセルのところでwidth:100%を指定すれば、1000ピクセルの横幅で表示されます。

ですから、画像の親nodeが画面全体の50パーセントしかないところで、width:100%を指定しても、親nodeの幅いっぱいまでしか広がりません。

<div style="width:50%;"><!-- 親nodeの横幅が50% -->
<img src="画像のURL" alt="画像の説明" style="width:100%;height:auto;" />
</div>

上のソースの表示結果

NARUシカ

高さの調節はheightでおこなう

さらに、heightautoに指定することで、高さは横幅に合わせた自動調整となります。

縦横比が正しくないと、表示もおかしくなるので注意しましょう。

NARUシカ
NARUシカ

heightを指定して、横幅を自動調整することも出来ます。

サイズの違う2つのちぎり絵を高さ200ピクセルに合わせて表示

NARUシカ シータとパズー

ソースコード

<p>
<img src="NARUシカのURL" alt="NARUシカ" style="width:auto;height:200px;" /> 
<img src="シータとパズーのURL" alt="シータとパズー" style="width:auto;height:200px;" /> 
</p>

シータとパズー

こちらも、ちぎり絵作家NARUさんの作品「シータとパズー」です。元々は小さな画像なのですが、フルサイズに拡大して表示しています。紙という素材を生かした、作品の繊細な表面がよくわかります。けど、曲がっています。拡大すると曲がっています。

シータとパズー

この作品の元の横幅は、320ピクセルです。

元のサイズで表示
シータとパズー

普段は自動でサイズを変更するが、表示画面が320ピクセル以上の場合は横幅320ピクセルで固定したい!という時はどうしましょ?

max-widthで最大幅を指定する

max-widthというのは、そんな時に使えるスタイルシートです。

<img src="URL" alt="説明" style="width:100%;height:auto;max-width:320px;" />

こうすると、横幅が320ピクセルまでは自動調整、ただし320ピクセル以上には広がらなくなります。320ピクセルだと小さいので、下はmax-width:500pxで設定しています。ブラウザのサイズを変えても500ピクセル以上には広がらないのがわかると思います。

シータとパズー

また、それ以上小さくなって欲しくない時にはmin-widthというものもあります。min-widthを指定すると、その値よりは小さくならなくなります。

max-width min-width と同じ事を高さに適用させる、 max-height min-height というのもありますが、使い方は同じです。


画像のサイズ変更はアフィリエイトでも出来ますが、規約をよく読んだ上、自己責任で行なって下さい。トラブルが起きても当サイトは関知しません。

上の画像は下のようなソースで表示しています。

<style type="text/css">
p.dolls img{
 float:left;
 width:19%;
 margin-right:1%;
}
</style>

<p class="dolls">
<img src="画像1のURL" alt="画像1の説明" />
<img src="画像2のURL" alt="画像2の説明" />
<img src="画像3のURL" alt="画像3の説明" />
<img src="画像4のURL" alt="画像4の説明" />
<img src="画像5のURL" alt="画像5の説明" />
</p>

CSSで作る楽天のRで目立たせよう!

だからどうした?と言われると困るんですが、楽天の

をスタイルシートだけで作ってみました。

<style type=”text/css”>
.rakuten{
 padding:0.1em 0.15em 0.2em 0.15em;
 width:1em;
 height:1em;
 line-height:1em;
 text-align:center;
 color:#ffffff;
 background:#bd0000;
 font-weight:bold;
 font-family:’メイリオ’,Meiryo,’MS Pゴシック’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,sans-serif;
 border-radius:1.3em;
 -webkit-border-radius:1.3em;
 -moz-border-radius:1.3em;
}
</style>

block要素でないと左右の余白がおかしくなります。

inline要素で使用

<p><span class=”rakuten”>R</span>&nbsp;<a href=””>楽天</a></p>

表示結果

 楽天

block要素で使用

<p class=”rakuten” style=”float:left;margin-right:0.5em;”>R</p>
<p><a href=””>楽天</a></p>
<br style=”clear:left;” />

表示結果

楽天


楽天で探す

楽天で探す

表示がおかしいなどのご指摘はコメントいただけると助かります。

文字を読みやすくしてアクセスUP

ブログの内容以前に、小さすぎる文字や、くっつきすぎる文字というのは読みづらい!

読みづらいページというのは、最後まで読んでもらえないんじゃないだろうか?だから、次のページへ進んで、もっとたくさん読んでもらうということが出来ない。

例としてTomさんの、まだ発売されていない小説「キャサリンの瞳」の冒頭を例に見てみます。


通常表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。

「いらっしゃい。待ってたわ」

キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。

「男を捜して欲しいの」キャサリンは言った。
私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


この小説はそのうち大手出版社より発売されると思いますが、まだここまでしか書いていないので、いつ発売されるかは未定です。

文字の大きさは font-size で変更する

こんな名作でも、文字が小さくなるだけで読みにくくなります。


文字を60パーセントの大きさで表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。

「いらっしゃい。待ってたわ」

キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。

「男を捜して欲しいの」キャサリンは言った。
私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


この文字サイズで何十行もあったら、途中で読むのがイヤになってしまうと思います。

文字を大きくするにはスタイルシートの font-size を変更します。

ページ全体の文字サイズを2倍にする場合

body{
	font-size:200%;
}

記事の文字だけ2倍の大きさにする場合

div#entries{
	font-size:200%;
}

詳しい記入場所、記入方法は次の記事にあります。

適切な場所で空行を入れよう

そして、こんな名作でも空行をなくすだけで読みにくくなってしまいます。


空行なし

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。
「いらっしゃい。待ってたわ」
キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。
「男を捜して欲しいの」キャサリンは言った。
私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


適切な場所で改行を追加するだけで読みやすくなるのではないでしょうか?

行と行の間は line-height で調節

1行の文字数が長いと、改行を入れなくても複数行で表示されますが、その場合の行間は line-height で調整します。

line-height:100% だと行間の隙間なし、line-height:120% だと、文字の上と下に10%ずつ隙間が出来ます。


line-heightを100%で表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。「いらっしゃい。待ってたわ」キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。「男を捜して欲しいの」キャサリンは言った。私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


line-heightを120%で表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。「いらっしゃい。待ってたわ」キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。「男を捜して欲しいの」キャサリンは言った。私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


line-heightを140%で表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。「いらっしゃい。待ってたわ」キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。「男を捜して欲しいの」キャサリンは言った。私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


line-heightを160%で表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。「いらっしゃい。待ってたわ」キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。「男を捜して欲しいの」キャサリンは言った。私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)

ページ全体の文字サイズを2倍にする、かつ記事の行間だけを160%にする場合

body{
	font-size:200%;
}

div#entries{
	line-height:160%;
}

サイドバーのカレンダーだけ文字を小さくする方法

ブログの文字サイズを大きくしたら、カレンダーの数字が2行になってしまって、表示が崩れた!
そんな時の対処方法です。

    これを        こう修正します

レイアウトの崩れたカレンダー  →  レイアウトが修正されたカレンダー

[事前注意]以下の修正はすべて、半角で記入します。全角だと直りません。

スタイルシートの修正

ファンブログの場合の修正方法を先に書いておきます。
ファンブログの場合、大抵はスタイルシートの最後に次の1行を追加すれば直ります。

スタイルシートは読み込んだ順に上書きされるので、下の1行を書いた後に、別の指定が書かれていると書いたものは上書きされ、消えてしまって無効になります。だから、どこを直せばいいのかわからないなら、一番最後に追加してください。

td.calendar{font-size:80%;}

80%の数字は文字のサイズを80%に縮小するという指示です。
80で表示しておかしければ、この数字を変えてください。

この場合、曜日の「日 月 火 水 木 金 土」の漢字7文字の大きさは変更されません。
それも変更するには以下のようにtdの文字を削除します。

.calendar{font-size:80%;}

  td.calendar{font-size:80%;} → .calendar{font-size:80%;}

   レイアウトが修正されたカレンダー    →    曜日も小さくしたカレンダー

この記事が必要になるということはスタイルシートをすでに書き換えているわけですが、念のため、ファンブログのスタイルシートはどこで設定するのかを書いた記事へのリンクを貼っておきます。

で、スタイルシートはどこに書くのか?

ここまでのやり方で直らなければ「解説」を読んでください。

もし .calendar{font-size:80%;} と書いてサイズが修正されないときは、クラスの名前が違う可能性が高いと思います。HTMLのソースでclass=”calendar”の部分を確認して、クラス名を訂正してください。

解説

ブログのサービスや、スキンで細かいところは違いますが、サイドバーのカレンダー部分は次のようなHTMLになっています。

<table cellpadding="0" cellspacing="0" border="0" width="100%" class="calendar_bg">
<tr>

<th align="center" valign="middle" class="calendar">日</th>
<th align="center" valign="middle" class="calendar">月</th>
<th align="center" valign="middle" class="calendar">火</th>
<th align="center" valign="middle" class="calendar">水</th>
<th align="center" valign="middle" class="calendar">木</th>
<th align="center" valign="middle" class="calendar">金</th>
<th align="center" valign="middle" class="calendar">土</th>

</tr>
<tr>

<td align="center" valign="middle" class="calendar">1</td>
<td align="center" valign="middle" class="calendar">2</td>
<td align="center" valign="middle" class="calendar">3</td>
<td align="center" valign="middle" class="calendar">4</td>
<td align="center" valign="middle" class="calendar">5</td>
<td align="center" valign="middle" class="calendar">6</td>
<td align="center" valign="middle" class="calendar">7</td>

</tr>

(中略)

</table>

上のHTMLでthという部分は「見出し」という意味、tdというのが「内容」という意味、この場合は日付です。

この中で class=”calendar” と書かれた要素だけ、
文字のサイズを80%の大きさで表示しなさい」という命令が.calendar{font-size:80%;}です。

.calendar{font-size:80%;} の一番左の . (ドット)の前にtdをつけて

td.calendar{font-size:80%;}

とした場合、「要素がtdのもので、かつ、クラスがカレンダー(class=”calendar”)の場合だけ、文字の大きさを80%にしなさい」という指示になります。

. (ドット)の前に何もつけなければ、すべてのcalendarクラス(class=”calendar”)にスタイルシートは適用されます。

長いタイトルでも重ならないナビゲーション

口で説明すると難しいんですが、今回やりたいことは下の図のように横幅が広いときには1行で、横幅が足りない時には2行で、「前の記事」を左端に、「次の記事」を右端に表示することです。

横幅の広い状態

横幅の狭い状態

このブログは「ここにブログの名前を入れます」というタイトルですが、長いので以下「ナマ入れ」と省略表記します。

先日、ナマ入れのスキンを変えました。まだスキンの名前を発表していなかったので、ここで発表させていただきます。スキンには「薄いけど破れない」という名前をつけました。

話は戻ります。このスキン(テンプレート)は画面の幅に応じて左右の幅が伸縮するように作っています。よく伸びるスキンです。実際にブラウザのサイズを変えて見ていただくと、お分かりいただけると思います。

ただし、あまりにも狭いと見づらいので、800ピクセルより小さいときは固定幅になり、それより小さくならないようにしてあります。

問題は、画面の幅が足りている時と、足りていない時の2つのパターンがあって、その両方に対応しないといけないということです。今回の場合、横幅に応じて文字の大きさを変えるというアプローチもあるにはあります。

しかし、文字が小さくなるのは読みづらさにつながると思うので文字サイズは固定したまま、幅が足りない時は改行させるようにしました。

ソースコード

HTML

<div class="navi">

  <span class="left">
    <a href="URL" title="前の記事名">&laquo; 前の記事「記事名」</a>
  </span>

  <span class="right">
    <a href="URL" title="次の記事名">次の記事「記事名」 &raquo;</a>
  </span>

</div>

<br class="clear" />

スタイルシート(CSS)

div.navi{
 width:100%;
}
div.navi span.left{
 float:left;
 text-align:left;
}
div.navi span.right{
 float:right;
 text-align:right;
}
br.clear{
 clear:both;
}

&laquo; と &raquo; の2つはエンティティです。

実際には「&laquo;」は「«」、「&raquo;」は「»」と表示されます。

参考記事:ハートマークを表示するの巻 エンティティの説明をしています

英語ではないらしいのですが、私はleft(左)の「&laquo;」と
right(右)の「&raquo;」と覚えました。

ナビゲーションの表示領域はクラス名「navi」のdivエレメントです。

HTML5で書く場合は「div」ではなく、新しいエレメント「nav」が使えますが、今回の話題から逸れるので割愛します。

今回、もっとも重要なのは float です。

float の説明は以前の記事で説明しています。

参考記事:画像の隣に文章を配置したい floatの説明をしています

float:left;の指定で « 前の記事「記事名」 全体を左に寄せます。同様に float:right;の指定で 次の記事「記事名」 » 全体を右に寄せます。

これで上の図のように、領域が足りている時は1行で、領域が足りない時は2行で表示されるようになります。

float を指定した後は忘れずに clear を指定しないとレイアウトがグチャグチャになるので注意が必要です。

text-align の指定はなくてもいいかもしれません。

ただ、 <div class=”navi”> ~ </div> の領域にtext-align:center を指定したら、表示が汚くなったので書き込んだままにしています。

参考記事:枠の中の背景に画像を使いたい! 記事中の「文字位置の指定」でtext-alignを説明しています。

ファンブログのスキンに適用する場合

このブログを書いているサービス「ファンブログ」のスキン用オリジナルタグは「ファンブログのオリジナルタグ一覧 - ファンブログ!![無料]」で調べることが出来ます。そのオリジナルタグを適用して上のHTMLを、1記事ページのスキンに書き込むと下のようになります。

<div class="navi">
<BlogArchivePrevious>
<span class="left"><a href="{$BlogArchiveLink$}" title="{$BlogArchiveTitle$}">&laquo; 前の記事「{$BlogArchiveTitle$}」</a></span>
</BlogArchivePrevious>
<BlogArchiveNext>
<span class="right"><a href="{$BlogArchiveLink$}" title="{$BlogArchiveTitle$}">次の記事「{$BlogArchiveTitle$}」 &raquo;</a></span>
</BlogArchiveNext>
</div>

<BlogArchivePrevious> と </BlogArchivePrevious> の間に書いてあることは、前の記事があるときだけ表示されます。つまり、前の記事がない場合に « 前の記事「」 とカッコの中が空の状態で表示されてしまう心配はありません。

同様に <BlogArchiveNext> から </BlogArchiveNext> の間は、次の記事があるときにだけ表示されます。