スタイルシートで角の丸いリンクボタンを作って見よう

 スタイルシートで角の丸いリンクボタンを作って見よう。

 画像でリンクボタンを作るよりいろいろとメリットがある。

スタイルシートでリンクボタンを作るメリット

・画像のリンクボタンを利用するよりサイトの表示スピードが速くなる。

・画像を作る必要が無い。

スタイルシートでリンクボタンを作るデメリット

・ブラウザによってはきちんと表示されないことがある。

スタイルシートでリンクボタンを丸くする

#button{
width:100px;
height:80px;
font-size:40px;
line-height:80px;
text-align:center;
background:#f63;
border:solid 2px #000;
border-radius:15px;
text-decoration: none;
padding: 10px;margin: 10px;
}

・width:100px;⇒リンクボタンの幅。

・height:80px;
⇒リンクボタンの高さ。

・font-size:40px;
 ⇒文字のサイズ。

・color:#fff;
 ⇒文字の色

・line-height:80px;
⇒行間。

・text-align:center 
;⇒文字の横位置を中央にする。

・background:#f63;
 ⇒背景色

・border:solid 2px #000;
 ⇒ボタンの周囲(ボーダー)の太さと色。

・border-radius:15px;
 ⇒各角で水平と垂直にに指定したpxの地点を中心に円を描いた時にできる外周をなぞって角が丸くなる。
 IEの旧バージョンでは表示されない。

・text-decoration: none;
 ⇒リンクの下線を消す。

・padding: 10px;
 ⇒内側の空間を指定する。
  1個指定した場合は、上下左右すべての空間に適応される。

・margin: 10px;
 ⇒外側の隙間を指定する。
  1個指定した場合は、上下左右すべての空間に適応される。

HTMLの記載

HTMLの基本形

<div id="button"><a href="リンク先のURL">ここにリンクテキスト</a></div>

マウスを乗せたときに説明文が出るようにする

<div id="button"><a title="ここにリンクの説明文" href="リンク先のURL">ここに表示するテキスト</a></div>

リンク先を別窓で開く

<div id="button"><a title="ここにリンクの説明文" href="リンク先のURL" target="_blank">ここに表示するテキスト</a></div>

テキスト部分の文字の色を変えたい場合

<div id="button"><a href="リンク先のURL"><span style="color: カラーコード;">ここに表示するテキスト</span></a></div>

<div id="button"><a title="ここにリンクの説明文" href="リンク先のURL" target="_blank"><span style="color: カラーコード;">ここに表示するテキスト</a></span></div>

id(#)の使い方にご注意

 同じ名前の#(id)は1ページ1個しか使えない。

 すでにbuttonという#(id)が使われていないかをソースやphp、HTMLファイルの中を必ず確認しよう。

 同じ#(id)が使われていた場合は、#(id)の名前を書き換えて使うこと。

 idではなくclassで指定しても同じようにできる。

 classの場合、スタイルシートは#でなくて【.】を使う。

コメントを残す




*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

シーサーブログのカテゴリーページに記事の概要(要約・サマリー)を表示する
Bloggerで半角ダブルクォーテーション(")が自動で全角変換にされてしまう設定を変更しよう
WordPress4.0にバージョンアップしたらプラグインのインストールがわかりにくくなった
ドメイン選びの注意点
FC2ブログにアップロードした写真のGPS情報を確認する方法
noimage
WordPressの投稿の編集のテキストモード「code」は何?
コメントを入れる<!--/-->・<!--//-->・<!---->の使い方を覚えよう
ブログのタイトルのSEO対策検索結果の順位を上げよう
FC2ブログから引越し準備・データのダウンロード
プラグインのCSS(スタイルシート)を縮小してブログの表示速度を早くしよう
ビジュアルとテキストのエディタが切り替わらない!
wordpressは半角のダブルクォーテーションが勝手に全角に変換されて表示される
1つのMySQL(データベース)で複数のブログを作る・WordPressの手動インストール
FC2ブログの記事をWordPressにインストールする前に検索エンジンの重複ページペナルティ対策

Menu

HOME

 TOP