HTML/CSSで小説サイトを作る際の一例をご紹介します。
（※★～★の部分は必ず変更してください。そのままだと上手く表示されません）
html
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>★ここにタイトル★</title>
<link rel="stylesheet" href="★使用するCSSのURL★">
</head>
<body>
★ページの内容★
</body>
</html>
メモ帳などのテキストエディタで空のページを開き、こちらのソースコードをコピペして★～★の部分を書き換え、「.html」の拡張子を末尾につけた任意の半角英数字（例：novel.html）で『名前を付けて保存』すれば、HTMLのページができます。html
<meta name="robots" content="noindex,nofollow,noarchive,noimageindex">
検索避けをしたい場合は、↑こちらを<meta charset="utf-8">の下に入れてください。html
<link rel="stylesheet" href="sample.css?20231029">
のように記入します。html
<br>
文章の末尾に<br>を入れると改行されます。html
<p>★ここに文章★</p>
文章をこちらの段落タグで挟んで、上下に余白をとる方法もあります。html
<ruby><rb>★ルビを振りたい言葉★</rb><rp>（</rp><rt>★ルビ★</rt><rp>）</rp></ruby>
このようにHTMLタグを書きます。html
<a href="★移動先のURL★">★ここに文字★</a>
こちらのHTMLタグでリンクが貼れます。
├─index.html
└─menu.html
index.htmlからmenu.htmlにリンクを貼るなら、★移動先のURL★はmenu.htmlになります。
├─menu.html
└─novel（フォルダ）
└─1.html
menu.htmlからnovelというフォルダの中の1.htmlにリンクを貼るなら、★移動先のURL★にnovel/1.htmlと記述してください。html
<a href="★開きたいURL★" target="_blank" rel="noopener noreferrer">★ここに文字★</a>
css
body{
font-size:★任意の半角数字★%;
}
とCSSに記述します。（HTMLタグは記述しなくてOKです）css
.big{
font-size:★任意の半角数字★%;
}
bigの部分は、任意の半角英数字で自由に名前をつけてください。html
<span class="big">★サイズを変えたい文字★</span>
こうしたHTMLタグで、文字サイズを変更できます。css
body{
color:★カラーコード★;
}
とCSSに記述します。（HTMLタグは記述しなくてOKです）css
body{
font-size:★任意の半角数字★%;
color:★カラーコード★;
}
というふうに、まとめられます。css
.red{
color:#ff0000;
}
redの部分は、任意の半角英数字で自由に名前をつけてください。html
<span class="red">★色を変えたい文字★</span>
こんな感じで色を変更できます。css
.red{
color:#ff0000;
}
.blue{
color:#0000ff;
}
HTMLタグの記述例と表示結果↓html
<span class="red">赤</span>と<span class="blue">青</span>
赤と青css
body{
background-color:★カラーコード★;
}
このようにCSSを記述すれば、そのページの背景色が変わります。css
a:link{
color:★カラーコード（リンク先にアクセスしたことがない場合の色）★;
}
a:visited{
color:★カラーコード（リンク先にアクセスしたことがある場合の色）★;
}
a:hover{
color:★カラーコード（マウスカーソルが乗っている時の色）★;
}
a:active{
color:★カラーコード（クリック中の色）★;
}
リンクの下線を消す場合は、color:★カラーコード★;の下に、text-decoration:none;を入れてください。css
body{
line-height:★任意の半角数字★%;
}
どのくらい行間を開けるのか、CSSで設定できます。html
<h1>★見出し★</h1>
見出し用のHTMLタグです。文字が太字になります。css
body{
text-align:center;
}
とCSSに記述します。（HTMLタグは記述しなくてOKです）css
.center{
text-align:center;
}
（.centerのcenterは、別の半角英数字の名前でも構いません）html
<div class="center">★中央に表示したい文章★</div>
css
.right{
text-align:right;
}
.left{
text-align:left;
}
html
<div class="right">右寄せ</div>
<div class="left">左寄せ</div>
css
.novel{
margin:★任意の半角数字（上下の余白）★px auto;
width:★任意の半角数字（小説の横幅）★%;
}
novelのところは任意の半角英数字で構いません。html
<div class="novel">★ここに小説の文章を入れる★</div>
css
.novel{
margin:★任意の半角数字（上下の余白）★px auto;
width:★任意の半角数字（パソコンで表示する時の横幅）★%;
}
@media only screen and (max-width:768px){
.novel{
width:★任意の半角数字（スマホで表示する時の横幅）★%;
}}
記述例と表示確認は、小説ページのHTML/CSSサンプルをご覧ください。css
★設定したいところ★{
★パソコン用の設定★
}
@media only screen and (max-width:768px){
★設定したいところ★{
★スマホ用の設定★
}}
スマホ対応サイトを作る際にご活用ください。css
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
body{
font-family: 'Yusei Magic', sans-serif;
}
css
.font1{
font-family: 'Yusei Magic', sans-serif;
}
font1のところは、任意の半角英数字で自由に名前をつけてください。html
<span class="font1">★フォントを変更したい文字★</span>
css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Rampart+One&display=swap');
body{
background-color:#d0eed1;
color:#4d504d;
line-height:200%;
font-size:95%;
font-family: 'Noto Sans JP', sans-serif;
}
a:link{
color:#19522c;
}
a:visited{
color:#05160b;
}
a:hover{
color:#395e46;
background-color:#76aa88;
text-decoration:none;
}
a:active{
color:#395e46;
}
.center{
text-align:center;
}
.dai{
font-size:200%;
text-align:center;
font-family: 'Rampart One', sans-serif;
}
.blue{
color:#3374b1;
}
.novel{
margin:80px auto;
width:60%;
}
@media only screen and (max-width:768px){
.novel{
width:90%;
}}
html
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>小説ページのサンプル</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="novel">
<h1 class="dai">小説の<span class="blue">タイトル</span></h1>
<br>
<br>
★小説本文（中略）★<br>
<br>
<br>
<div class="center"><a href="hint.html">戻る</a></div>
</div>
</body>
</html>