匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

見出しの初めに横向きの三角形(▶←こういうのです)を設置する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人5回まで
  • 13歳以上
  • 登録:2015/03/13 12:36:43
  • 終了:2015/03/14 07:37:46

ベストアンサー

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2015/03/13 14:12:43

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

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

h3:before {
  color: #6b93ff;
  content: '▶';
}
他4件のコメントを見る
匿名質問者

質問者です。
▶設置できました!
回答してくださった、お二人にとても感謝しております。
本当にありがとうございました!

PS:お二人のやりとりが高度すぎて全く理解できませんでした。すごすぎです! 

2015/03/13 18:43:28
匿名回答2号

はてなの不具合なのに 65点とか言っちゃったお詫びと言っちゃあなんだが、border で三角を表示するパターン。
http://tips.recatnap.info/sample/?URL=html007_border.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 の前にピリオドを書いてしまったから。
ピリオドを書くのはクラスの指定のとき。
タグを指定する場合には .h3 ではなくて、h3 と書かなきゃいけない。


解決したのだったら、ベストアンサーをつけてあげてね。

2015/03/13 22:13:23

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません