![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_10.png?e8efa67)
画像のように、テキストの前に三角記号を3つ並べたいのですが、
三角記号の位置を左から少しずつずらして配置する方法しか分かりません。
もっとシンプルに作成できる方法はありますか?(><)
【css】
.midashi2{/*見出し*/
position:relative;
background:white;
border-bottom: solid 2px black;/*下線*/
margin-left:10px;
padding:0.2em 0 0.2em 3.5em;/*文字との余白*/
width:520px;
}
.sankaku:before{/*三角記号_1つめ*/
content: "";
position: absolute;/*絶対配置*/
top: 0.5em;/*上からの距離*/
left: 0.5em;/*左からの距離*/
border-top: 7px solid transparent;
border-bottom: 6px solid transparent;
border-left: 12px solid black;
}
.sankaku2:before{/*三角記号_2つめ*/
content: "";
position: absolute;/*絶対配置*/
top: 0.5em;/*上からの距離*/
left: 1.5em;/*左からの距離*/
border-top: 7px solid transparent;
border-bottom: 6px solid transparent;
border-left: 12px solid black;
}
.sankaku3:before{/*三角記号_3つめ*/
content: "";
position: absolute;/*絶対配置*/
top: 0.5em;/*上からの距離*/
left: 2.5em;/*左からの距離*/
border-top: 7px solid transparent;
border-bottom: 6px solid transparent;
border-left: 12px solid black;
}
【html】
<div class="midashi2"><span class="sankaku"><span class="sankaku2"><span class="sankaku3">サンプル</span></span></span></div>
![「css&html テキストの前に三角記号」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/8/542431176_5a8e68c54d916/M.jpg)
No.1ベストアンサー
- 回答日時:
こんにちは
ご提示のように三角形を枠線で描画するのであれば、そのための要素(spanなど)が必要になるので、記述を若干要領よくする程度しか思いつきません。(添付図のmidashi4)
文字の三角形(記号)を利用してもよいのであれば、枠線のための要素を設けなくてもよくなるので、多少は簡略化が可能と思います。(添付図のmidashi3)
添付図は試みに、上記の2種類と併せてご提示のサンプル(midashi2)を表示してみたものです。
図はChromeでの表示例ですが、fxでもほぼ同様の表示になります。一方で、IEはご提示のものも含めて、全体的にイマイチな表示になってしまうようです。
(図では文字サイズ、フォントがデフォルトのままなので、ご提示の図とも若干雰囲気は変わっていますが…)
midasi3、midasi4でテストしたCSSとhtmlは以下の通りです。
【 html 】
<p>midashi3</p>
<div class="midashi3"><span>サンプル</span></div>
<p>midashi4</p>
<div class="midashi4">
<span></span><span>サンプル</span>
</div>
【 CSS 】
/*** CSS for midashi3 ***/
.midashi3 {
width: 500px;
margin-left:10px;
border-bottom: solid 2px black;
padding:0.2em 0 0.2em 3.5em;
}
.midashi3>span::before{
content: "\025b6\025b6\025b6";
margin-left: -3em;
}
/*** CSS for midashi4 ***/
.midashi4 {
width: 500px;
margin-left:10px;
border-bottom: solid 2px black;
padding:0.2em 0 0.2em 3.5em;
position: relative;
}
.midashi4>span:first-child::before,
.midashi4>span:first-child::after,
.midashi4>span:nth-child(2)::before {
content: "";
position: absolute;
top: 0.5em; left: 0.5em;
border-top: 7px solid transparent;
border-bottom: 6px solid transparent;
border-left: 12px solid black;
}
.midashi4>span:first-child::after { left: 1.5em; }
.midashi4>span:first-child::before { left: 2.5em; }
![「css&html テキストの前に三角記号」の回答画像1](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/b/587726_5a8fc6f678783/M.jpg)
遅くなりすみません。
ご丁寧な回答をありがとうございます。
記号で表示させる方法もアリですね。色々と試してみます。
大変参考になりました!ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
中点「・」の改行について
-
画像イメージの上下左右、欲し...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
ページを拡大縮小でborderが消...
-
CSS上での計算を行うためのルー...
-
CSS、width100%でもできる余白
-
form input テキストを上下中央...
-
プルダウンで長い名前の選択肢...
-
float を使うと隙間ができる
-
横並びリスト ブラウザ縮小 カ...
-
cssで「下よせ」ってどうやって...
-
CSSで画像を同じ位置に重なり合...
-
Safariでheight:100%のボックス...
-
外部CSSファイルからのリンク色...
-
【CSS】ヘッダーの高さが不明の...
-
IEとFireFoxでの指定位置のズレ...
-
CSS:animation開始位置の設定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報