カテゴリー別アーカイブ: 西尾 沙綾

ふりがな(ルビ)をふる

難しい読みが続くサイトなどは、ルビをふることでストレスなく読むことができます。
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)
 

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

リンク先を別ウィンドウで表示

リンクを貼る際、何も指定しないと、

HTML

<p><a href="http://dcs-nagoya.com/">名古屋駅前ウェブデザインスクールはこちら</a></p>

 
表示

 
このページ「WEBデザインの教科書」と同じウィンドウでリンク先に移動します。
これを別ウィンドウで表示させることにより、サイト訪問者はリンク前のページに滞在状態のため、元のページに戻りやすくなります。
(リンク先に移動したら元のページに戻れなくなったことはありませんか?)

別ウィンドウで開くには、リンク先URLを記述したあとtarget=”blank” または target=”_brank”を入れます。
 
target=”blank”にすると、

<p><a href="http://dcs-nagoya.com/" target="blank">
名古屋駅前ウェブデザインスクールはこちら</a></p>

 
開いた別ウィンドウの中でリンクが切り替わり表示されます。
(リンク先に移動したらこのページに戻り確認してみて下さい。)

 

 
target=”_blank”にすると、

<p><a href="http://dcs-nagoya.com/" target="_blank">
名古屋駅前ウェブデザインスクールはこちら</a></p>

  
移動したリンク先ごとに、新しいウィンドウがいくつも開きます。

 
 
たくさんリンクがある場合はtarget=”blank”の方がウィンドウがスッキリしますね。

 

 
 

 
 

リンク文字の下線を消したい

リンクテキストの下線を消すには、文字の装飾(下線など)を指定するプロパティtext-decorationを使います。
aに対してtext-decorationを表示させないスタイルを指定します。

html

 
<p><a href="http://URLが入ります/">表示される文字が入ります</a></p>

css

a {text-decoration:none;}

 
 

下線を消すとリンク部分がわかりにくくなる場合があります。a:hoverで文字の色、字体、背景などを指定し、デザイン的に必要な時に使いましょう。
長文のある一部分のリンクでは下線を消さないことをおすすめします。

リンク文字の装飾

前回でマウスポイントが乗ったリンクpに文字色を変えるスタイルを紹介しました。

こちらから

ほかにも様々な装飾があります。

 

html

 
<div class="sample2">
<p><a href="http://dcs-nagoya.com/">名古屋駅前ウェブデザインスクールはこちら</a></p>
</div>

css

div.sample2{
	width:100%;
	height:50px;
	border:solid 1px black;
	margin-bottom:10px
}


div.sample2 p a:hover{
          background-color:#ffc0cb;  ←背景色を指定
}

表示

div.sample3 p a:hover{
          font-weight:bold;   ←太さを指定
 }  

表示

div.sample4 p a:hover{
          font-style:italic;   ←斜体に
 }  

表示

 

 

リンク文字色を変える

リンクが設定されている箇所にマウスポインタを合わせると色が変わる、というスタイルをよく見かけます。
a:hoverは、「マウスポイントが乗ったら」という意味です。このスタイルを使ってリンクの文字色を指定しましょう。

 

html

<div class="sample1">

<p><a href="http://dcs-nagoya.com/">名古屋駅前ウェブデザインスクールはこちら</a></p>

</div>

css

div.sample1{
	width:100%;
	height:50px;
	border:solid 1px black;
	margin-bottom:10px
}


div.sample1 p a:hover{
          color:red; 
}

 
 

表示

 
sample1のリンクpにa:hoverを指定しました。マウスを合わせると文字が赤くなります。

リンクを貼る

テキストや画像などの要素にリンクを張る場合は a タグを使用してURLや移動先までのパスを指定します。

書式は以下のようになります。

<p><a href="http://dcs-nagoya.com/">名古屋駅前ウェブデザインスクールはこちら</a></p>

表示

0624_1

テキストのpにリンクを指定しました。a href”    “にリンク先URLを記述します。。
pやaの閉じる位置に注意しましょう。

回り込みを解除するclearプロパティ

floatを使う時に、注意しなくてはいけない点があります。下の例のように、floatは指定すると、そのまま後に続く要素がどんどん回り込んできてしまいます。

0617_1

HTML

<img src="images/yiri.jpg" class="left" width="200" height="200" alt="ユリ" />
<p>6月の花 ユリ<br />
テキストテキストテキスト<br />
テキストテキストテキスト<br />
テキストテキストテキスト</p>

<img src="images/ajisai.jpg" class="left" width="200" height="200" alt="ajisai" />
<p>6月の花 アジサイ<br />
テキストテキストテキスト<br />
テキストテキストテキスト<br />
テキストテキストテキスト</p>

CSS

img.left{
	float:left;
}

 
 

br / は改行を入れるタグです。
何度も改行すれば回り込みはなくなりますが、 br /に 回り込みを解除するスタイルを指定することでシンプルな記述になります。

HTML

<img src="images/yiri.jpg" class="left" width="200" height="200" alt="ユリ" />
<p>6月の花 ユリ<br />
テキストテキストテキスト<br />
テキストテキストテキスト<br />
テキストテキストテキスト</p>

<br class="clear" /> <!--floatの解除、ここを追加しました-->

<img src="images/ajisai.jpg" class="left" width="200" height="200" alt="アジサイ" />
<p>6月の花 アジサイ<br />
テキストテキストテキスト<br />
テキストテキストテキスト<br />
テキストテキストテキスト</p>

CSS

img.left{
	float:left;
}

.clear { 
clear:both; /*floatの解除、ここを追加しました*/ 
} 

 
 
 
アジサイの写真の回り込みが解除され、ユリの下に配置されました。

0617_2