pHpで作ったリンクボタンについてです。
〈?php
if(!empty($row[1]))
〈style〉{
.link_button:before {
font-family: "Font Awesome 5 Free";
コンテンツ: '\ f02b';
フォントの太さ:900;
}
.link_button {
font-weight: bold;/*太字に*/
text-decoration: none;/*下線消す*/
background: skyblue;/*背景を水色に*/
color:white;/*文字を白に*/
padding:1% 2%;/*内側の余白*/
margin:1%;
display:inline-block;
border-radius: 20px;/*角を丸くする*/
font-family: 'Avenir','Arial';/*フォントをいい感じに*/
}
.link_button:hover {
background: silver;/*背景色をシルバーに*/
text-decoration: none;/*下線を消す*/
}
.link_button a:visited {
color: gray;/*文字をグレイに*/
}}
.link-button a
{font-size:1.5vw;
}‹/style›
}:?〉
とaタグのクラスを
link_bottonにしているのですが、
[1]~[6]まである時
上記と同じcssをつかうのですが、〈a href="[$row2]" class="link_botton2"〉のようしてクラスを分けないといけないのでしょうか?
空白のときはcssを表示したくないです。
ネックなのがFont Awesomeを使っているので[](配列)があってもなくってもcssが適応されてしまうのでFont Awesomeは諦めるしかないですか?
No.1ベストアンサー
- 回答日時:
css、今回はhtmlファイル内に<style>要素で書き出しているように見受けられます。
cssは別にPHPに依存するものではありません。
また、クラスセレクタで用意したcssは、特定の要素、今回で言うと6つの<a>要素のうちの1つに依存するものではありません。
クラスセレクタのcssは1つあれば事足ります。
6つの<a>要素のクラス属性にlink_buttonと記述すれば済みます。
<a href="1つめのa要素" class="link_button"></a>
<a href="2つめのa要素" class="link_button"></a>
<a href="3つめのa要素" class="link_button"></a>
<a href="4つめのa要素" class="link_button"></a>
<a href="5つめのa要素" class="link_button"></a>
<a href="6つめのa要素" class="link_button"></a>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
個別にリンクの色を変える方法
-
透過背景を解除するにはどうす...
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
terapadの使い方について
-
最近、HTMLのヘッダーをIDで定...
-
display:table-cell内でこんな...
-
dreamweaverのコード画面で波線。
-
文字の両側に画像を配置するCSS...
-
HTML要素のid/class名の長さに...
-
ラジオボタンの装飾(色の違う2...
-
name属性とid属性
-
liリストタグの背景色に色がつ...
-
idの中のid指定
-
CSSのタグ「#warpper」の意...
-
htmlの文字が縦書きになる
-
HTML ul li で横並びにナビゲー...
-
【ヒトの神秘】美男美女から何...
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSのクラス名・ID名の指定でワ...
-
CSSに同じclass名がいっぱい‥。...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
liリストタグの背景色に色がつ...
-
HTML要素のid/class名の長さに...
-
brにクラスをつけてcssでdispla...
-
透過背景を解除するにはどうす...
-
htmlのid属性って必要なの?
-
フロートのクリアについて
-
ページの左右の余白(枠外)に...
-
サイトにjQueryが使用されてい...
-
CSS, リンクの色を一部変えるに...
-
スタイルシートでデザイン
-
外部css定義したclassをht...
-
Bootstrap3でcontainerがずれる...
-
CSSで、DIV#hogeという記述は何...
-
スタイルシートで、id属性の中...
-
一部のリンクの下線を消す
おすすめ情報