私は、<span>タグを、単語を一区切りにして、1段落に、改行せずに、まとめたい時に、よく利用します。
その際に、一緒に使うCSSって何だっけと、これまで作ったサイトのコードを見返すことがよくあるため、このページにテンプレート的に書いておくことにしました。
完成イメージ①ー装飾なしの場合ー
例）都道府県名を一区切りにして、1段落に、改行せずにまとめる。
北海道
青森県
岩手県
宮城県
秋田県
山形県
福島県
使用コード
HTML
<p> <span class="area_tag_1">北海道</span> <span class="area_tag_1">青森県</span> <span class="area_tag_1">岩手県</span> <span class="area_tag_1">宮城県</span> <span class="area_tag_1">秋田県</span> <span class="area_tag_1">山形県</span> <span class="area_tag_1">福島県</span> </p>
CSS
.area_tag_1 {
color: #000000;
float: left;
margin: 0em 0.5em;
padding: 0em 0.5em;
font-size: 1.0em;
}
完成イメージ②ー装飾ありの場合ー
例）都道府県名を１つずつ、色付きの図形で囲む。
北海道
青森県
岩手県
宮城県
秋田県
山形県
福島県
使用コード
HTML
<p> <span class="area_tag_2">北海道</span> <span class="area_tag_2">青森県</span> <span class="area_tag_2">岩手県</span> <span class="area_tag_2">宮城県</span> <span class="area_tag_2">秋田県</span> <span class="area_tag_2">山形県</span> <span class="area_tag_2">福島県</span> </p>
CSS
.area_tag_2 {
color: #ffffff;
background-color: #45C4B0;
border: 2px solid #45C4B0;
border-radius: 15px;
float: left;
margin: 0em 0.5em;
padding: 0em 0.5em;
font-size: 1.0em;
}
コメント