第4章 2.3 ③ tom-custom.css のソースコードと詳細

2.3 ③ tom-custom.css のソースコードと詳細　

解説）　【歯科クリニックのWebサイト】の各ページの装飾は、Bootstrap5を基本としますが、補足或いは追加機能を付与するためにオリジナルCSSプログラムも準備します。

以下が今回のオリジナルCSS プログラム「tom-custom.css」のプログラムソースです。

/*
Tom Custome CSS
*/
html {
	font-size: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

body {
	margin: 0;
}

.alignleft {
	float: left;
	margin-left: 0;
	margin-right: 1em;
}

.alignright {
	float: right;
	margin-left: 1em;
	margin-right: 0;
}

.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	margin-left: -5px;
	margin-right: -5px;
	max-width: 992px;
}

.alignwide {
	margin-left: -10px;
	margin-right: -10px;
	max-width: 720px;
}

.wp-block-categories.aligncenter,
.wp-block-latest-posts.aligncenter,
.wp-block-archives.aligncenter,
.wp-block-tag-cloud.aligncenter,
.wp-block-latest-comments.aligncenter,
.wp-block-rss.aligncenter {
	text-align: center;
}

figure {
	margin-left: 0;
	margin-right: 0;
}

body {
	box-sizing: border-box;
}

body *,
body *::before,
body *::after {
	box-sizing: inherit;
}

body {
	font-family: "Noto Sans JP", "Roboto", sans-serif, Arial;
	line-height: 1.8;
}

:root {
	--f1: 2.44em;
	--f2: 1.95em;
	--f3: 1.56em;
	--f4: 1.25em;
	--f5: 1em;
	--f6: 0.8em;
}

h1 {
	*/ font-size: var(--f1);
}

h2 {
	font-size: var(--f2);
}

h3 {
	font-size: var(--f3);
}

h4 {
	font-size: var(--f4);
}

h5 {
	font-size: var(--f5);
}

h6 {
	font-size: var(--f6);
}

.tom-menu {
	margin: auto;
	font-size: 1.15rem;
	list-style: none;
}

.tom-menu a {
	color: rgb(2, 10, 32);
	text-decoration: none;
}

.tom-menu a:hover {
	padding: 1px;
	color: rgb(2, 10, 32);
	background-color: rgb(131, 215, 236);
}

解説

参考） オリジナルテーマ「Tom Works Dental」の CSS プログラムは以下の4プログラム( Bootstrap5 の CSS ファイル２種、自作の CSS プログラム2種）になります。