カテゴリー別アーカイブ: CSS

背景画像のサイズ指定は background-size(CSS3)

PC、タブレット、スマートフォンなど、画面の解像度の異なる機器に適したサイト表示をする、いわゆるレスポンシブWEBデザインでは、そのサイズに合わせて背景画像のサイズを自動的に変更させたい場合があります。

そんなときは、CSS3の background-size が便利。背景画像の表示サイズをcssで指定することができるため、1枚の画像を様々な大きさで表示できるようになります。
background-size: auto; サイズを自動検出
background-size: 50px 50px; 縦横指定したサイズ
background-size: 50% 50%; 表示領域に対して縦横指定した割合
background-size: cover; 表示領域をすべて埋め尽くす大きさ
ackground-size: contain; 縦横比を保持したまま表示領域に背景画像を全て表示

□使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-sizeのサンプル</title>
<style>
p{
 width:400px;
 height:300px;
 background: url(./testimage.jpg) #cccccc;
}
#ex1{
 background-size:contain;
}
#ex2{
 background-size:cover;
}
#ex3{
 background-size:50px auto;
}
#ex4{
 background-size:100% 100%;
}
</style>
</head>
<body>
<p id="ex1">contain</p>
<p id="ex2">cover</p>
<p id="ex3">50px auto</p>
<p id="ex4">100% 100%</p>
</body>
</html>

 

ただし、古いブラウザでは対応していないものがありますので、注意が必要です。

ふりがな(ルビ)をふる

難しい読みが続くサイトなどは、ルビをふることでストレスなく読むことができます。
rubyではじまり①ルビをふる文章
rt と /rtの間に②ルビテキスト
/rubyで閉じます。

HTML

<ruby class="ruby1">武井咲
<rt>たけいえみ</rt>
</ruby>

CSS

.ruby1{
	font-size:20px;
}

表示
0710_1
 
 

住所検索で表示されない場所をGoogle マップで表示させたい

よくあるのが、住所で検索しても思った場所にピンが来ないという事。
農園や畑など、田舎ほど場所を検索できない事があります。

そんな時、Google マップで住所ではなく「ココ」という好きな場所にピンを作る方法があります。
 

Google マップを開き、マップにしたい場所の上で右クリック→この場所について を選択
0707_1
 
 
すると、上の検索窓にこの場所の座標が現れます。
その横に半角カッコ()で、場所の名前を入力。
 
0707_2 

そして、前回と同じマークから「ウェブサイトへの地図埋め込み用 HTML コード」のタグをコピーペーストすると、好きな場所をマップに表示させることが出来、また好きな表示名を付けることができます。
 
簡単なのでぜひ試してください。

Google マップを埋め込む

場所を検索するとき、道を調べるとき、よく使われるのがGoogle マップです。
HTMLに簡単に埋め込むことができます。
見る人にとっては詳しくアクセスを知ることができるので便利です。

①まず、Google マップ上で住所を検索。
 
0701_1
②そして、このマークをクリック。
 
0701_2
③「ウェブサイトへの地図埋め込み用 HTML コード」のタグをコピーペースト。
 
 
検索した場所のマップが、このタグ内に入っています。
幅(width)と高さ(height)を好きな大きさに変えるだけでGoogle マップを埋め込むことができます。
 
 

表示(width600px height300px)
 

大きな地図で見る
 
 
今のホームページは簡単な地図の画像しか載せていないという店舗や会社の方、
アクセスマップに利用してはいかがですか?

最初の行にだけスタイルを適用

:first-line擬似要素 で、最初の行にだけスタイルを適用できます。

HTML

<p>最初の行にのみ、スタイルを適用します。<br />
2行目のテキスト<br />
3行目のテキスト</p>

CSS

p:first-line {color:blue; font-weight:bold;}

※今回、最初の行にのみ、青色、太字 と指定しています。

表示
firstline
 
 
 
最初の文字のみスタイルを適用させたい場合は、:first-letter擬似要素 を使用しましょう。

よく現場で使う見出しのコードabsolute編

見出しの場合は、前回のfloatを使うコードより、こちらのほうが圧倒的に多いです。
floatの場合は、floatさせたものは必ずブロック要素になってしまうため、
幅をしっかり持ってしまうんですね。
なので、左右の要素の間にpaddingなどを指定したらその分背景がはみ出てしまいますし、
文字が増えてもはみ出してしまいます。
なので、absoluteという絶対値を使って、文字の端が置かれる場所を指定します。
pにはrightから10pxという右端からの指定をしています。

html

<div class="s_title002bg">
<div class="s_title002bgp>
<h4>ブログのタイトルなど…<p>右端に来る投稿時間など</p>
</div>
</div>

css

/************************
小見出しタイトル 
************************/
div.s_title002bg{
width:700px;
height:35px;
margin-bottom:20px;
background-image:url(../../../../images/new/news_stitle002.gif);
background-position:top left;
background-repeat:no-repeat;
}

div.s_title002bgp{
position:relative;
}

div.s_title002bg h4{
position:absolute;
top:10px;
left:10px;
font-size:15px;
font-weight:bolder;
color:#000000;
}

div.s_title002bg p{
position:absolute;
top:10px;
right:10px;
font-size:12px;
color:#83AD28;
}

現場でよく使う見出しのコード

以前の記事にて、というのをやりました。

widthやpadding、borderなどを一緒に書くと実際の幅の考え方がブラウザによって違うため、
意図したように表示できないため、分けて書くと良いですというものでした。

それに加えて、floatを使う場面もよくありますので、その二つを組み合わせたコードを載せておきます。

html

<div class="midasi1">
<div class="midasi1p clearfix">
<h3>ここは見出しです</h3><p>見出し文字の右にある英語です</p>
</div>
</div>

css

/*****************************************
見出し .midasi1
*****************************************/

div.midasi1{
 background-image:url(../images/hhh3.gif);
 width:600px;
 height:40px;
 margin-top:20px;
 margin-bottom:10px;
}

div.midasi1p{
 padding-top:8px;
 padding-left:20px;
}
 
div.midasi1 h3{
 font-size:15px;
 font-weight:normal;
 width:500px;
 float:left;
}

div.midasi1 p{
 font-size="8px"
 font-coler="red"
}

/*****************************************
クリアフィックス .clearfix
*****************************************/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

これで表示できるのは見出しの背景と、
その見出しの文字(500px)、
そしてその横にある英語です。
でも見出しのすぐ右横に英語がくる場合は良いのですが、
英語は右寄せにしたい、といった場合は
position:absolute;を使わないとうまく表示できません。

floatプロパティ-実際にディスプレイでclearfixを見てみよう-

clearfixをしていない場合
clearfixをしていないとこうなります

html

<div class="sd3">
<img src="images/kawaihayakawa.jpg" />
<p>梅雨も困りますね。でももうすこし経てばカラと晴れた天気になるのでがんばりましょう。</p>
</div>

css

div.sd3{
width:600px;
border:solid 1px #000000;
background-color:#FF9900;
}

div.sd3 img{
float:left;
width:200px;
}

div.sd3 p{
font-size:12px;
}

clearfixを追加した場合

clearfixするとこうなります.

このように背景がきちんとimgの下まで来ます。
見えない.が文章の下に配置され、それにclearがかかっているため、
親要素からは見える解除されたブロック要素となり、背景がそこまで伸びるようになりました。

html

<div class="sd3 clearfix">
<img src="images/kawaihayakawa.jpg" />
<p>梅雨も困りますね。でももうすこし経てばカラと晴れた天気になるのでがんばりましょう。</p>
</div>
div.sd3{
width:600px;
border:solid 1px #000000;
background-color:#FF9900;
}

div.sd3 img{
float:left;
width:200px;
}

div.sd3 p{
font-size:12px;
}

/*****************************************
クリアフィックス .clearfix
*****************************************/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

floatプロパティ-clearfixを使ってfloatを解除しよう-

前回書いたように、フロートを解除する要素が、親要素の中にない場合というときがあります。
そのまま書くと、背景の不足が起こってしまいますね。
よくあるのが、imgと文章を組み合わせた文で、
imgの長さまでは必ず背景がほしいのに、imgをfloatさせているため、
文章が短いと背景がそこまで伸びてくれないというものです。
floatプロパティ-フロートを解除する要素がない場合-

このようなときにclearfixを使います。
clearfixとは通称そう呼ばれているだけで、プロパティではありません。手法の呼び名です。
cleafixと名づけられた要素のafterに”.”を入れてclear:bothをかけています。
※擬似要素:afterについては調べてみてください。

さらにclearを指定するのは、次の要素ではなく親の要素となります。
このように指定することで、親の要素の背景がフロートされた子を内包して、背景が見えるようになります。
全部を覚える必要はありませんので、一つcssにコピーしておき、必要な親要素にclassを書き足しましょう。
クラスはスペースを空けることで複数指定が可能ですので、元のcssが使えなくなるということはありません。

html

<div class="h3bgbox clearfix">
</div>

clearfixは以下の通りです。

css

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
ポイント
content "."親要素の一番下に要素を作っています。
clearはブロックレベル要素にあてることになっているので,display: block;とします。
clear:bothでフロートを解除しています。
height: 0;とvisibility: hidden; で高さ0、表示なしにしています。
min-height: 1px;は擬似要素afterが効かないIE7用です。
html clearfixはie6とmacie5用です。
IE6,7は「要素の幅と高さが内容物に合わせて押し広げられる」というバグがあるので、1pxあれば親要素が子要素を内包します。
/*¥*//*/と/**/に挟まれたところはMac IE5.xのため。

floatプロパティ-フロートを解除する要素がない場合-

前回floatプロパティ-次の要素にclearを指定してfloatの解除をやりました。
その要素の中に、運よくフロートの解除を指定できるブロック要素があった場合は、
前述の背景の不足も起こらず、フロートを解除した要素まで背景が現れます。
floatプロパティ-フロートした要素の背景画像-

フロートした要素の下にフロートを解除した要素を置く
が実践できているわけですね。

ではフロートを解除する要素がない場合はどうなるでしょう。
例えばimgを2つ横にならべて、
それをfloatで指定していた場合。
(※imgはそのまま書けばブロックインライン要素なので横に並びますが、
視覚的にわかりやすくするためにわざとそのようにしています。)

解除するものがない場合

このようなときは、clearfixという手法を使います。