人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile


見出しの初めに横向きの三角形(?←こういうのです)を設置するCSSを教えてくださいませんか?

自分なりに調べて、下記のCSSを貼付けてみましたが失敗しました。(何も変わらなかった)

.h3{
width:0px;
height:0px;
border-top:solid 100px #ff6b93;
border-right:solid 100px transparent;
border-bottom:solid 100px transparent;
border-left:solid 100px transparent;
padding:.6em .8em
}

ちなみに、?を設置したいのは大見出しと中見出しの2つです。
できれば?の色の指定もしたいのですが、どなたか正しいCSS(方法)を教えてくださいませんでしょうか?

どうぞよろしくお願いします。

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 匿名回答1号
ベストアンサー

適用したいページの大見出しがh2タグ、小見出しがh3タグとした場合ですが、以下のように指定すると表示はできるかと思います。
後はmarginやpaddingで微調整したり、colorで色を変えたりとお好みに応じて変更を。

h2:before {
 color: #ff6b93;
 content: '▶';
}

h3:before {
 color: #6b93ff;
 content: '▶';
}

匿名回答2号さんのコメント
65点。 何ごとも試してみないと。

匿名回答1号さんのコメント
おおう、指摘感謝です。 試してからコピペしたんですが、人力検索側が自動変換してしまうようです。 えーと、contentの部分は使いたい文字に変更して下さいな>質問者さん

匿名回答2号さんのコメント
変換されちゃったのか。じゃあ仕方ない。 試しに。 >|css| h3:before{ content:"?"; } ||< 数値参照を content につかうときは XML の形式じゃないのが地味に罠。 >|css| h3:before { color: #6b93ff; content: "\0025b6"; } ||<

匿名回答2号さんのコメント
>> 試しに。 << ほんまや! >> ? << >|| ? ||<

匿名質問者さんのコメント
質問者です。 ?設置できました! 回答してくださった、お二人にとても感謝しております。 本当にありがとうございました! PS:お二人のやりとりが高度すぎて全く理解できませんでした。すごすぎです!

匿名回答2号さんのコメント
はてなの不具合なのに 65点とか言っちゃったお詫びと言っちゃあなんだが、border で三角を表示するパターン。 http://tips.recatnap.info/sample/?URL=html007_border.html >|html| <style> h3 { position:relative; top:0; left:0; padding-right:18px; } h3:before{ content: ""; position: absolute; top: 0; right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #ffcc00; } </style> <h3>見出し</h3> ||< 質問で書かれたスタイルが何も変わらなかったのは、h3 の前にピリオドを書いてしまったから。 ピリオドを書くのはクラスの指定のとき。 タグを指定する場合には <tt>.h3</tt> ではなくて、<tt>h3</tt> と書かなきゃいけない。 解決したのだったら、ベストアンサーをつけてあげてね。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ