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

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

新着情報一覧

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

ページリターンをfooterまでいったらふわっと消したい

hoverで矢印が伸びるアニメーション

プラグイン無しでsns連携させる

wordpressでアップロードした画像が表示されない

タイルレイアウト

アメーバブログRSSをホームページ一覧で表示で文字化けする

cssだけで画像のズームアップ

scssについて