矢印のコードの書き方を教えてください。

初めまして。プログラム超初心者です。
ある表を作成したいのですが、矢印が必要です。
しかし矢印の作り方がわかりません。。
特殊な管理画面なのか、htmlしか使用できず、CSSを記載できません。
※htmlでも<div style>は使用できますが、<div class>は使えません。

下記のコードを調べることはできたのですが、htmlでのコードの書き方がわかりません。

「.sample1-2::before{
left: 3px;
width: 7px;
height: 1px;
background: #7a0;
}
.sample1-2::after{
left: 3px;
width: 6px;
height: 6px;
border-top: 1px solid #7a0;
border-right: 1px solid #7a0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}」

sample1-2 の「before」「after」があると思うのですが、

<div style="…">で両方の記載は可能でしょうか？

質問内容も合っているのかもわからず、根本もわかっていないのかもしれないのですが、詳しい方教えていただけますと幸いです。

宜しくお願い致しますm(＿)m

行動規範の内容に同意します

回答4件

bootstrap には、各種のアイコン(矢印も含まれている) が用意されています。
http://getbootstrap.com/components/

投稿2015/11/19 14:38

katoy

総合スコア22324

micco

2015/11/19 15:02

たくさんの参考資料ありがとうございます＾＾これから表を作成するときに参考にさせていただきます⭐️

行動規範の内容に同意します

ベストアンサー

参考にしようとしているCSSコードは、擬似要素（::after）を使う前提のものです。
HTMLタグに直接style属性を記述することしかできない場合は、
擬似要素は使えませんのでそのCSSコードをHTMLに記述することはできません。

その他の選択肢としては、

デバイステキストで矢印文字を入力する
矢印の画像を作りimg要素でHTMLに埋め込む
矢印の画像を作りstyle属性で背景画像として表示させる
Webフォントを使い、該当の矢印アイコン文字を入力する

といったものがあるかと思われます。
どれがいいかは、表示させたい矢印のデザインと、表示させたい場所によります。

投稿2015/11/19 10:02

aKusano

総合スコア3763

micco

2015/11/19 15:00

ご回答いただきありがとうございます！そうだったんですね…＞＜通りで思い通りにいかないわけですね… 表示させたい場所はテーブルのセル上下同士を結合させて、三角（または矢印）を書きたかったです＾＾

aKusano

2015/11/19 15:12

結合したセルの　右端＋上下中央に矢印を表示したいのだとしたら、多分３の背景画像でないと難しいと思います。 <td rowspan="2" style="background:url(背景画像のパス) right center no-repeat;">hogehoge</td> とすればセルの右端＋上下中央に表示させることができます。ただし、この方法だとセルの右端に矢印画像がくっついてしまうので、画像側に余白を含めて書き出しておく必要があります。

行動規範の内容に同意します

ウェブ上で使える矢印記号いろいろ↑⇔↓⇒
参考になりますか？

投稿2015/11/19 07:04