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

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

新着情報一覧

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

SVG保存とアートボードサイズ

ホームページアクセス解析レポート（うっかり忘れてしまう被リンクと直帰率の調べ方）

グーグル広告（クリック広告）のコンバージョン設定

【css】1段目を写真右、2段目を写真左でレイアウトしたい時（wordpress対応）

wordpress5.51にしたらMW WPからのメールがエラーになる件

wordpressで投稿、カスタム投稿、カテゴリ別に表示件数を変える

郵便番号から住所をフォームに自動入力するJS（wpじゃない時）

高さを指定しないで中央に