スタイルシートで角の丸いリンクボタンを作ろう

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

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

スポンサーリンク

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

#button{
width:100px;
height:80px;
font-size:40px;
color:#fff;
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の地点を中心に円を描いた時にできる外周をなぞって角が丸くなる。

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

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

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

phpやHTMLの記載

基本形

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

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

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

別窓で開く

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

実際に利用するときには

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

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

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

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

 classなら1ページにいくつ使っても大丈夫なので、classのほうが使い勝手は良いかもしれない。

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

 というわけでRssリンクのボタンをスタイルシートで自作してみた。

 よければ登録してね。

Rss

  • にほんブログ村 ブログブログ ブログノウハウへ
    にほんブログ村
  • FC2ブログランキング
  • このエントリーをはてなブックマークに追加

関連記事

HTMLとスタイルシート

取り消し線(打ち消し線)のHTMLタグ

 HTMLの取り消し線(打ち消し線)には表示以外には何か意味があるんだろうか?  単純に文字の装飾

記事を読む

HTMLとスタイルシート

スタイルシートのコメントの記載方法

 スタイルシートにコメントを入れてみよう。  スタイルシートをカスタマイズするときにコメントの

記事を読む

HTMLとスタイルシート

HTMLの「id」「class」とスタイルシートの「#」「.」

 外部スタイルシートを見てみると#で指定されたものと.で指定されたものがあるのに気がつくと思う。

記事を読む

HTMLとスタイルシート

テキストリンクの記載方法

 テキストにリンクを貼るリンクの指定方法にもいろいろある。  今日はテキストリンクのHTMLの記載

記事を読む

wordpressカスタマイズ

子カテゴリーの前に擬似要素で記号をつける

 子カテゴリーにリストマークらしきものをつける。  リストマークは種類が少ないのでスタイルシー

記事を読む

HTMLとスタイルシート

画像をクリックすると別のページに飛ぶようにしてみる

 今日は画像にリンクを張ってみよう。  普通なら画像をクリックするとその画像が拡大表示される。

記事を読む

Message

メールアドレスが公開されることはありません。


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


follow us in feedly

応援してね⇒にほんブログ村 ブログブログ ブログノウハウへにほんブログ村

ワードプレスのテキストとビジュアルのタブの切り替えができない

 しばらくぶりにブログを更新しようと思ってみたら、ワードプレスの更新や

プラグインを使わずにソースコードを表示させる方法

 ソースコードを表示させるのに便利なのはプラグインの利用。  で

ソースコードの解説にCrayon Syntax Highlighter

 Webサイト上でHTML/CSSやプログラミングのコードを解説す

ウィジェットが豊富で使いやすいWordPressテーマSimplicity

 SimplicityというWordpressテーマを使ってみた。

お客様のホームページがアップロードされていない状態です

 Wordpressの手動インストールで無事インストールできたのに

WordPressテーマGush2のTOPページアーカイブページに要約を表示する

 Wordpressの無料テンプレート(テーマ)Gush2はすっき

FC2ブログとWordPressのURLの構造法則と変数

 記事数の多いFC2ブログを変数を使ってWordpressに引越し

記事数の多いFC2ブログの引越しは変数で作業時間短縮

 FC2ブログからWordpressへの引越し第二段。  FC2

プラグインの内容をメモできるWordPressプラグイン

 Wordpressのプラグインは便利だが、説明文が英語のせいで中

WordPressのカテゴリーの管理画面にIDを表示できるようにするカスタマイズ

 Wordpressのカテゴリーの管理画面に記事のIDを表示できる

海外スパムをシャットアウト「Throws SPAM Away」日本産プラグイン

 Wordpressでブログを運営していると英語のスパムコメントが

→wordpress初心者・STINGER3カスタマイズ中の記事をもっと見る

Googleでブログを作ろう 
 Googleの無料ブログサービスBloggerで作っているブログ。
 Bloggerの設定やカスタマイズ方法などを載せている。

使える無料ソフト&無料サービス
 高いパソコンに入ってるようなソフトは必要ない!をコンセプトに無料ソフトや無料のWEBサービスをご紹介。

  • コメントテスト

  • PAGE TOP ↑