htmlのbodyの中にスタイルを書き込んで、丸数字を書いてみた

記事公開日：2017.11.08

ホームページ制作ツール

htmlのbodyにスタイルを書くことができます。
実際のホームページ制作ではあまり必要ではなさそうですが「このページだけこのCSSを書きたい！」という時や、忘備録用に記録しておきたいと思います。

<style scoped>この中にCSSを書きます。
wordpressの設定によっては、brが入ってしまうので見づらいですが改行なしで書いた方がよさそうです。
以下の「h5」のスタイルをbodyの中に書きました</style>

1

2

3

wordpressの設定によっては、brが入ってしまうので見づらいですが改行なしで書いた方がよさそうです。

以下の「h5」のスタイルをbodyの中に書きました</style>

h5{
  color: #007440;
  padding: 0;
 margin: -15px 5px 0px 0px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  font-size: 160%;
  font-family: 'Saira Semi Condensed', sans-serif;
  border: 2px solid #007440;
}


h5{
	clear: both;
	margin: 30px 0px 0px;
	padding: 0px;
	font-size: 150%;
	color: #007440;
	font-weight: bold;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

h5{

color: #007440;

padding: 0;

margin: -15px 5px 0px 0px;

width: 50px;

height: 50px;

line-height: 50px;

text-align: center;

display: inline-block;

border-radius: 50%;

font-size: 160%;

font-family: 'Saira Semi Condensed', sans-serif;

border: 2px solid #007440;

}

h5{

clear: both;

margin: 30px 0px 0px;

padding: 0px;

font-size: 150%;

color: #007440;

font-weight: bold;

}

リストや画像を使わずにCSSでまる数字を書く

実際にhtmlで書き出してみるとこんな感じです。

1

今回参考にさせていただいたサイトです
CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

« CSSのみでホームページを制作したい〜画像の上に文字をのせるとか | SEO対策と表示順位の大変動 »

長野県長野市のホームページ制作・チラシ・パンフレット・カタログ・ショップカード・パッケージ・スマートフォンサイト制作

SEO対策

htmlのbodyの中にスタイルを書き込んで、丸数字を書いてみた

リストや画像を使わずにCSSでまる数字を書く

1

こちらの記事もオススメです

新着情報一覧

ホームページ制作にまつわる便利な情報を長野より発信！

スライドショー画像にカーソルが乗った時に表示する矢印のスライダー

FontAwesome5をCSSで指定しても表示されない時

SEO対策（All in One SEO Pack便利機能）

前回（query_postsは非推奨？）の続き〜get pagesへ

【復活記事】ホームページ制作を便利にするツール〜フォントアイコン編

query_postsは非推奨？

bxsliderスライダーでコントロールすると止まる件

ボタンやリンクのアニメーション