本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文…

個人的に見やすいかなと思う子ページ。以前上げていたものの改良版になります。テーブルタグを外し、HEAD内もすっきりとさせてみました。
一応、リンクはこんな感じにしてあります。
以下説明になりますので、改変の際に参考になさってください。

幅、文字サイズ、行間隔、文字間隔はHEAD内の
/* 以下PC向け設定 */
#all{
width: 600px;
font-size: 88%;
line-height: 1.7;
letter-spacing: 2pt;
font-family :meiryo, Osaka, sans-serif;
margin: 0 auto;
}
で変更可能です。

幅、文字サイズ、行間隔はHEAD内の
/* 以下スマホ向け設定 */
#all{
width: 90%;
font-size: 82%;
line-height: 1.6;
margin: 0 auto;
}
で変更可能です。

幅、文字サイズ、行間隔はHEAD内の
/* 以下ガラケー向け設定 */
#all{
width: 90%;
font-size: 76%;
line-height: 1.5;
margin: 0 auto;
}
で変更可能です。

リンクの下線はHEAD内の
/* 以下PC、スマホ、ガラケー共通設定 */
a{
text-decoration: none;
border-bottom: dotted 1px #555555;
}
で変更可能です。
例）
・solid 1px #a4005b→直線直線直線
・solid 2px #a4005b→直線直線直線
・dotted 1px #a4005b→点線点線点線
・dotted 2px #a4005b→点線点線点線
・dashed 1px #a4005b→破線破線破線
・dashed 2px #a4005b→破線破線破線
・double 3px #a4005b→二重二重二重
・double 5px #a4005b→二重二重二重

※おまけ的(?)な感じで見出しを入れています。
＜div class="line1"＞文字文字＜/div＞でこんな感じの見出しと
＜div class="line2"＞文字文字＜/div＞でこんな見出しが表示可能です。こちらの変更はそれぞれHEAD内の
/* 以下PC、スマホ、ガラケー共通設定 */
.line1{〜、.line2{〜で変更可能です。

- ナノ -