displayプロパ...|独学でWebデザインの勉強をする人のためのまとめサイトです。


WordPressの準備・導入パターンとレンタルサーバー費用相場・比較表
WordPressの始め方、導入パターン・レンタルサーバーの費用相場、おすすめのレンタルサーバーを紹介

マンダラ塗り絵ダウンロードサイト
マンダラや幾何学模様、花、ボタニカルアートの塗り絵を配布中。





displayプロパティを使ったリンクのテクニック


  • メニュー・ナビゲーション

displayプロパティを使ったリンクのテクニック

テキストリンクをボタンのように見せるには、displayプロパティが便利です。

displayプロパティとは、要素をインライン要素とするかブロックレベル要素とするかを指定する機能を持ちます。

リンクに使われるa要素はインライン要素なのですが、displayプロパティを使ってブロックレベル要素に変換することで、リンク文字だけでなく「コンテンツを表示する領域」であるブロック全体にリンクの機能をつけることができるようになります。

【displayプロパティ】

displayプロパティは、ブロックレベル・インラインレベルなどの「要素の表示形式」を指定するプロパティです。

▼値

none

指定した要素を表示しないように指定する。

block

指定された要素がブロックレベルになる。

inline

指定された要素がインラインになる。

以下の「HTML」「CSS」それぞれのタブをクリックすると、コードを確認することができます。




Facebookページに「いいね!」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね!」していただけると嬉しいです!



Pagetop