この記事はBlosxomを利用していた時、デザインを変えた際に書いたものです。現在はWordPressに移行しているので、今（2020年3月）の見栄えとは違います。

以下、当時の記事です。

---

このブログ（ブログと言えるのか？という気もするが。）の見栄えを変えました。とはいっても注目されているブログではないので以前のデザインを知っている方はいないだろう。

今まではフリーで使えるテンプレートを使っていたが、androidスマホで見た場合に少しばかり表示がおかしくなるのが気に入らなかった。他にシンプルなテンプレートが無いものかと探していたが、なんだか仰々しいものばかりなので諦めた。

試しにCSSを削除してみた

「自分で考えてみようかな～。」なんて思い、試しにCSSファイルを削除してみた。

スマホで見たら「別にこれでもイケてるやん」と、感じた。よくPCサイトをスマホで見た場合に、サイト全体がスマホの画面に小さく表示されることがある。レスポンシブ対応をしなければ、そのように表示するのかと思いきや、CSSデザインが無ければスマホで見た場合も見やすいサイズで表示されてるやんか。

考えてみればそれは当たり前のことなのかもしれない。CSSが無ければhtmlをブラウザ任せで見やすく表示してくれるのだろうね。iPhoneで見た場合とandroidでみた場合、表示やフォントが少々違うもんね。それぞれのブラウザの見せ方というものがあるのだろう。

「な～んや、特にレスポンシブ対応なんて考えなくてもシンプルなhtmlとcssなら、各ブラウザが見えやすくしてくれるんやな。」ということを発見した。

自分でCSSを作成

というわけで、自分でCSSファイルを作りました。PCで見たときに幅に対して制限をかけておかないと、画面幅いっぱいに表示されちゃうので、最大幅748pxになるようにしています。それから画像幅も最大100%にしています。これでスマホで見た場合も大きな画像がはみ出すこと有りません。

あとは、Webフォントをはじめて使ってみたり、見出しに少し装飾を入れた程度です。以前作っていたいサイトに色などを合わせている箇所もあります。

現在のcssはこのような内容です。

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP&display=swap');

body {
width: 748px;
max-width: 100%;
margin: 0 auto;
background-color: #fdfdf6;
color: #000;
font-family: 'Noto Serif JP', serif;
}

header {
padding: 0 10px;
margin: 0 0 10px;
background-color: #e5ecf9;
border-top: 5px ridge #69c;
border-bottom: 5px ridge #69c;
}

nav {
margin: 0 10px;
}

#contents {
margin: 0 10px;
}

footer {
margin: 0 10px;
}

nav ul{
margin: 0 ;
padding: 0 ;
}

nav ul li{
list-style: none;
display: inline-block;
min-width: 75px;
}

h1 {
font-family: 'Noto Sans JP', sans-serif;
}

h2 {
padding: 0.2em 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #369;
font-family: 'Noto Sans JP', sans-serif;
}

h3 {
color: #c30;
font-family: 'Noto Sans JP', sans-serif;
}

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

blockquote {
background-color: #fff;
border-width: 1px 6px;
border-style: solid;
border-color: #CCC;
padding: 0em 0.5em;
}

pre {
background-color: #f5f5f5;
padding: 0em 1em;
max-width: 100%;
overflow: auto;
}

☝程度のcssであっても、このブログのようにシンプルなページならレスポンシブデザインをそれほど意識しなくてもPCとスマホでそれなりに見られるページになりました。気が向いたら、これからも少しずつ弄っていきたいと思う。が、素人なので少し勉強しなきゃいけないかもね。

---