令和最新版個人サイトの作り方（いまさら）

このページは令和となった今から個人サイトを作り始めようという人、あるいは既に個人サイトを持っていて令和時代に対応しようと思っている人のために書かれたものです。また、失われたり散逸したりしつつある個人サイト制作のノウハウをできる限り集めることも目標にしています。
（個人サイト制作の情報収集はGoogle検索が全くといっていいほど役に立ちません）

個人サイトは今となっては珍しいと言われる存在になってしまいましたが、SNSの時代でもそれなりに魅力があるように思います。基本的にタダで始められますので、ぜひ自分だけのオリジナリティあふれるサイトを作って遊んでみましょう。

はじめに（偉そうな前置き① 読まなくていい）

かつて星の数ほど存在したいわゆる「個人サイト」は、SNS化と記事サイトに押されて今ではほとんど見かけなくなってしまいました。今のGoogleの検索結果上位は画一的なフォーマットの記事サイトやまとめサイトだらけになっていて、その多くは何らかの製品やサービスへ誘導、あるいは広告収益を得るために書かれた「浅い」記事です。もちろん、その内容でも十分に役立つという人や見るのが楽しいという人がいて、それを生活のために仕事にしている人がいる、そのことは否定しません。

しかし、コンテンツが「そればかり」になってしまうのはとても悲しいことのように思います。
Webの世界の黎明期は、様々な文化を受け入れ、様々な個性を持った人々が各々のセンスで情報を発信する、そんな個人サイトがあったはずです。
ただ面白さだけを追求したサイトがあるかと思えば、信じられないほど深い知識や考えを披露するサイトもある。そんな多様性があったはずです。

多様性のなくなった世界はつまらなくなっていき、いずれは廃れます。それならば、Webの世界に再び多様性をもたらすような個人サイトを独創的なアイデアで作ってみようという、そんな人々の活動があって良いと思うのです。

ところが、年号が令和に変わった今の時代では、そのような個人サイトを作るためのノウハウを見つけることが非常に難しくなっています。例えば、2022年現在にGoogleで「個人サイト　作り方」と検索してみたとします。そこでヒットする結果は「個人サイトのメリットとデメリットを解説！」や「個人サイトの作り方完全版！」のような宣伝目的のサイトがほとんどです。まるで、個人サイトを作るなら業者に頼むのが当たり前と言わんばかりのものもあります。かつて存在したHTMLの詳しい書き方を解説するサイトは、検索結果の下位に追いやられてしまいました。このような状況では、せっかく個人サイトを開設しようと思っていた人も制作を諦めてしまうことでしょう。

近年生じてきた別の問題は、スマホの登場によって画面サイズの大小によらず見やすいサイトを作らなければならないという新たな難しさが生じていることです。これを解決する方法は、昔の個人サイト制作の解説には記載されていません。

一方で、かつての個人サイト全盛期にはできなかったことが、今では楽に実現できるというものが多数あります。半透明画像の多用や、CSSアニメーション、複数の背景の重ね描き、画面に合わせた画像サイズの変更などが非常に簡単にできるようになっています。

本特設ページは、画一的で味気ない「最近のWebの世界」に多様性を取り戻すために、独創的なアイデアを持った個性的な「個人サイト」を再び蘇らせたいという願いをもって作成されました。このために、近年の記事サイト氾濫によって隅に追いやられてしまった、優良な個人サイト制作の解説サイトに再び光を当て、個人サイトを持っている人や個人サイト開設を目指す人に役立つ情報を提供します。また、かつての個人サイト全盛期には存在しなかったスマホ時代のHTMLの書き方についても難しくなりすぎない範囲で提供します。

Webの世界にかつてのような多様性が取り戻されることを願っています。

ページトップに戻る

個人サイトとは（偉そうな前置き② 読まなくていい）

そもそも、個人サイトとは何なのでしょうか。最近では「何らかの商売をやるためのサイトを開設する」ということにフォーカスした記事ばかりが見つかりますが、本来の個人サイトはそのような性質のものではありません。個人（あるいは数人のグループ）が開設したWebサイトであればそれはもう立派な個人サイトです。社会人でも学生でも関係ありません。収益を得るとか商売をするとか、そういうのは個人サイトの一つの形態であって必要条件ではありません。

本来の個人サイトのイメージは、文化祭のブースに近いものです。個人サイトはあなた一人に提供された自由な空間です。
　小説を置いてもいい。
　絵を置いてもいい。
　考察を置いてもいい。
　模様で飾り付けてもいい。
それが本来の個人サイトです。

作品の公開ならSNSでも良いのでは？　と思うかもしれません。しかしSNSは作品を置く場所を提供するだけであって、その見せ方に工夫の余地はほとんどありません。 Webの根幹となるHTMLという仕組みで出来る内容から比べると、遥かに不自由なことしか出来ないのです。個人サイトは、あなたの作品を「最大限に魅力的に見せる空間」を自身の手でデザインすることができます。

また、SNSには別の問題もあります。それは、あらゆる人々に対して「平等に見せてしまう」というものです。平等は良いことと思われるかも知れませんが、それはあなたの作品や活動に興味がない人の所へも「平等に」あなたの作品を公開してしまうことを意味します。 SNSの世界は良くも悪くもオープンで、繁華街に店を構えるようなものです。人は確かに多いですが、それ故の怖さもあります。一方、個人サイトはあなたの活動に興味がある人が訪問しますし、趣味に合わない人がやってきても嫌なら見るなで突っぱねられます。個人サイトはSNSのように「おすすめ」として中身が勝手に流れてくるようなことがないからです。

一方、個人サイトの悪いところも書いておかねばなりません。個人サイトは自由度が高い反面、その質は作り手の技能と労力に強く依存します。格好いいサイトを作ろうと思えばそれなりの粘り強さが必要です。しかし、作り手の技能で質が変わるというのは創作活動全般に言えることで、悩みながらも上達していく楽しさは確実にあります。私は絵をやりたいんだという人も、その絵を最大限に魅力的に見せる空間をデザインすることは十分に楽しい趣味だと思います。

話をまとめると、個人サイトとは営利非営利や身分に関わらず、あなたが自由にデザインできるスペースです。あなたのセンスや創造力をフルに生かした空間を作ることも出来る反面、その質は技能と労力に強く依存します。しかし、それ故の楽しさもあります。いきなり凄いサイトは作れずとも、ある一定水準でないと公開できないというルールはありません。それならば、一つの趣味としてチャレンジしてみても良いのではないでしょうか。

ページトップに戻る

昔の個人サイトを令和時代に対応させる

もう既に個人サイトを持っているという人も、最新の情報を追って更新し続けている人は少数だと思います。しかし、かなり多くの人がPCよりもスマートフォンを使うようになった令和の時代ですので、PC用に作られたサイトでは見辛いという状況が発生しているかもしれません。そこで、ここでは令和の時代を生き抜くためのサイトの（出来るだけ手を抜いた）アップデート案を紹介します。

①HTTPSにしよう

今時はHTTPSに対応していないとブラウザに「安全ではありません※1」という危険だと言わんばかりの表示をされたり、Googleに冷遇されたりするという理不尽な扱いを受ける時代です。できることなら対応してしまいましょう。目立ちたくないなら好都合かもしれませんが･･･

サーバーが対応しているならURLをhttpからhttpsに書き換えるだけで特に何もせずともHTTPSになります。宣伝（？）の為にURLをSNSで投稿したり登録したりする場合はhttps://～と書いておきましょう。

残念ながらHTTPSに対応していないという場合は、いっそのこと開き直りましょう。下記の解説の通り、金銭のやりとりのない趣味の個人サイトレベルでのHTTPSははっきり言って過剰なレベルです。

※1 HTTPは通信内容が暗号化されずに送受信されるので、誰かが通信を傍受したり改竄したりできるということをもって「安全ではない」という意味です。しかし、個人レベルのサイトの内容は元からWebにオープンな形で公開されているもので、傍受されて実害がでるような話はまずありません。傍受する側も、そんなしょうもない通信を傍受するより利益が絡むような通信を傍受するでしょう。改竄するにしても、個人サイトを設置してあるサーバーに侵入されて直接書き換えられるリスクの方が大きいです。通信改竄の心配をするより先に、堅牢なパスワードを設定しておくべきです。

②スマホに対応しよう

かつての個人サイトをスマホで閲覧すると、大抵の場合なんだか残念な縮尺の表示になります。その場合、HTMLの<head>タグの中に

<meta name="viewport" content="user-scalable=yes, initial-scale=1">

の一文を入れましょう。また、imgタグにはstyle="max-width:100%;"を書いておくのが推奨です。例えば、次のような形です。

<img src="hogehoge.png" style="max-width:100%;" alt="hoge">

このようにしておくと、画面幅が画像よりも狭くなった時に自動的に縮小してくれます。フレームタグを使ったり位置や幅を固定値で指定していない限りはこれだけでまともな表示になります。

フレームを使用している場合でも、画面上側にメニュー表示している程度であれば比較的簡単に対策出来ます。画面幅が狭くなったときに縦スクロールになるのを回避したい場合は、メニューの方のHTMLにoverflow-x:autoとwhite-space:nowrapを指定しましょう。例えば、次のような形です。

<body style="margin:0;padding:0;white-space:nowrap;overflow-x:auto;background-color:rgb(255,245,220);">
  <div style="margin:4px;">
    <a href="#">めにゅー1</a>
    <a href="#">めにゅー2</a>
    <a href="#">めにゅー3</a>
    <a href="#">めにゅー4</a>
    <a href="#">めにゅー5</a>
    <a href="#">めにゅー6</a>
    <a href="#">めにゅー7</a>
    <a href="#">めにゅー8</a>
    <a href="#">めにゅー9</a>
    <a href="#">めにゅー10</a>
  </div>
</body>

このようにすれば画面が狭くなったときの挙動が縦スクロールではなく横スクロールになりますので、そこまで操作に違和感はないはずです。ただし、PCの場合はスクロールバーが出ますので、その分のスペースは良い具合に確保しておく必要があります（PCで画面が狭くなるケースへの対応を放棄する手もありますが･･･）。

少し複雑になりますが、フレームの下側に背景画像を敷き詰めてごまかす例を掲載しておきます。 urlの所に画像を指定するとそれをフレームの下側に敷き詰めて表示し、スクロールバーが出た場合はその部分をスクロールバーの裏側に隠すようにします。細かい意味は置いておいて、このままテンプレとして使用しても問題ありません。

<body style="margin:0;padding:0;background-color:rgb(255,245,220);">
  <div style="position:absolute;top:0px;left:0px;width:100%;bottom:0px;background-image:url('bgsample.png');background-position-y:bottom;background-repeat-y:no-repeat;background-attachment:fixed;">
    <div style="white-space:nowrap;overflow-x:auto;height:100%;">
      <div style="margin:4px;">
        <a href="#">めにゅー1</a>
        <a href="#">めにゅー2</a>
        <a href="#">めにゅー3</a>
        <a href="#">めにゅー4</a>
        <a href="#">めにゅー5</a>
        <a href="#">めにゅー6</a>
        <a href="#">めにゅー7</a>
        <a href="#">めにゅー8</a>
        <a href="#">めにゅー9</a>
        <a href="#">めにゅー10</a>
      </div>
    </div>
  </div>
</body>

なお、overflow-y:hiddenを指定するのはやめておきましょう。何かの拍子に縦スクロールバーが出ると面倒と思われるかもしれませんが、広告等が割り込んでメニューが下側に追いやられた場合に、縦スクロールバーを消してしまうと表示可能範囲外になって操作不能になる恐れがあります。正しく作っておけば標準状態でも縦スクロールバーは出ませんので、最初から出ないように作る方がベターです。

画面左右に表示するフレーム使ってるんだよ！というあなたは拙作のスクリプトを使うと上手くいくかもしれません。このスクリプトは従来の流儀（フレームやPC前提固定幅レイアウト）で作られたページをスマホで見やすいように自動で書き換えます。なお、PCで表示した場合はそのままです（PCでも書き換えて欲しい場合はオプションで指定可能）。
配布先（解説とデモあり）
使い方は<head>タグの中に

<script src="./smartframe.js" charset="utf-8"></script>

と書くだけです。ただし、位置や幅を固定値で指定している要素がある場合は残念ながら対応できません。また、1ページに3つ以上のフレーム分割がある場合も駄目です（2分割フレームの一方のページ中にさらに2分割のフレームがあるような入れ子構造ならOK）。

色々上手い方法を考えていますがまだ未解決です。

③SNS時代の機能を活用しよう

TwitterにURLを貼り付けた時、サムネイル画像が出る場合があるのを見た経験があるかも知れません。あれはTwitter社に課金しないとできないというものではなく、Twitter Cardと呼ばれているものです。これは誰でも自由に設定できます。 Twitter以外であればOGP（Open Graph protocol）というものに対応しており、同じように設定できます（書き方は「Open Graph protocol」と検索すれば出てきます）。注意事項として、Twitterではrobots.txtで拒否（いわゆる検索避け）していたりすると表示されません。その場合、robots.txtに

User-agent: Twitterbot
Allow: /

を追記します。なお、これが反映されるのは結構時間がかかります。

Twitterの場合、<head>タグの中に以下の内容を書きます。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="Twitterユーザー名" /> ← 例えばcontent="@hogehoge"のように書く。任意
<meta name="twitter:title" content="タイトル" />
<meta name="twitter:description" content="ページの説明" />
<meta name="twitter:image" content="サムネイル画像へのURL（サイズは144x144以上で作る）" />

正しく表示されるかどうかはTwitter公式のCard validatorでテストできます。

なお、画像だけ表示されない場合は画像の取得が拒否されている可能性が大です。ここで指定できる画像はいわゆる「直リンク」が可能でなければいけません。しかし、無償の個人サイト作成サービスは直リンクを制限している場合が多々あります。この場合、画像取得が拒否されるので画像が表示されません。

ややセコい手段ですが、bannerという名前の画像ファイルだけは直リンクが許されている場合が多いですので、bannerという名前で画像を作ってしまう手があります。通常の200x40のサイズのバナーと併用したいという場合は、バナー用をjpg、Twitter用をpngにするなどで使い分けましょう。ただし、バナーとは何かという解釈によっては利用規約的にどうなんだという話もあります。広義にはTwitterカードに表示する画像もバナーと言えそうな気がしますが、その点は自己責任になります。

なお、実際には直リンクで直接表示ではなく、一旦Twitter等のサーバーに保存（キャッシュ）されてから表示されます。

かつては直リンクでバナーを貼るということが良くありましたが、今は全部ダウンロードの上でバナーを貼ることが推奨されています。理由は①httpとhttpsが混在していると駄目というケースがある②リンク先が何らかのペナルティを受けると巻き添えを食う可能性がある、の2点です。

実際に、サイト自体は何ら問題がないのにバナー画像のリンク先がフィッシングサイト認定されて巻き添えになっているケースがありました。

⑤Flash製コンテンツを何とかしよう

安泰だと思われていたFlash Playerはスマートフォンの登場によって想像以上にあっさり滅亡してしまいました。しかし、既存のFlash製コンテンツをいまさらFlash以外に移植するのはあまりにも負担が大きすぎます。

そこで、sw2jsなるものを使って手抜きでFlashを使えるようにしましょう（駄目なものは駄目ですが）。どこからダウンロードするか分かりにくいですが、このリンクで表示されるjsファイルをブラウザで保存すればOKです。

使うときはHEADタグの中に

<script type="text/javascript" src="swf2js.js"></script>

と書いておいてから、embedやobjectタグによるFlash埋め込みの代わりに下の通りに書けばOKです。hogehoge.swfの部分は使用したいswfの名前に書き換えて下さい。

<script type="text/javascript">
<!--
  swf2js.load('hogehoge.swf', {"quality": "high"});
// -->
</script>

幅と高さを指定したい場合は、以下のようにします。

<script type="text/javascript">
<!--
  swf2js.load('hogehoge.swf', {"quality": "high", "optionWidth": "幅の値", "optionHeight": "高さの値"});
// -->
</script>

なお、上の方法でFlashが使えない場合であっても、Flashを使える環境を温存している人（いるだろうか？）のためにFlash自体は置いたままにしておいて良いと思います。

以下はこのスクリプトを使ってみている例です。よろしければ参考にしてみてください。
"Rumic Search" History

おまけ：HTMLを最新に書き換える必要はあるか？

かつてはHTML4なるもので多くのサイトが作られていましたが、最近はHTML5だとか色々と新しいものが登場してきました。では、これらに対応するために何かを書き換える必要があるのでしょうか？　答えを先に書いてしまうと、わざわざ書き換える必要はありません。今まで通り書いておけば基本的に何の問題もありません。

HTML4の時代でも「見た目とロジックは分離しろ」「fontタグは使うなCSSでやれ」「CSSも別のファイルに分けろ」等々色々言われていましたが、令和の時代でも別に完全廃止されていませんし全く問題なく使えます。商売をするつもりならまだしも、個人サイトでそこまで気にする必要はありません。昔のスタイルを堂々と使いましょう。最新のやり方に変えるためだけに労力をかけて過去のページを書き換える必要は全くありません。

機会があれば最新の書き方に更新していくという程度の心構えでいましょう。

ちなみに、時代が進んでHTMLの難易度が上がっているかというと、必ずしもそうではありません。確かに、新しい概念やデザイン自体の進歩でできることが増えた分ややこしくはなっていますが、基本的に過去に使えたものはそのまま使用可能です（完全に使えなくなったのはbgsoundタグとかblinkタグくらいでしょうか）。その一方で、NetscapeやらIEやらが幅を利かせていた時代にあった意味不明な表示バグや独自仕様が令和時代にはほぼ完全に一掃されていますので、かつてのような謎のテクニックを使わずに素直に書けるようになっています。この点ではむしろ現在の方がやりやすくなったと言えます。

ページトップに戻る

今から個人サイトを作る

今から手打ちのHTMLで個人サイトを作ろうとすると、Googleでまともな情報が出てこないという問題で心が折られます。そういうわけで、ここでは昔から存在している個人サイトが作れるWebサービスと、作り方などを解説したサイトへのリンク等を紹介しておきます。

手打ちHTMLの置ける無料Webサービス

今から始めようという人が毎月サーバー利用料を払ってサイトを立ち上げようというのは中々ハードルが高いことです。また、学生でクレジットカードも持っていないとなると更にハードルが上がります。そこで、まずは無料で使えるWebサービスを使いましょう。

個人サイト全盛期にはそれこそ沢山のWebサービスがありましたが、下火になった現在ではだいぶ数が減ってしまいました。それでも、まだ無料で使えるものは存在しています。無料で使える条件は一般に広告表示が条件です。なお、有料だったとしても月500円未満が大半ですので、どうしても広告を表示したくない理由があれば払っても良いかもしれません。

容量が1GBとか500MBとか書かれていますが、巨大画像を置かなければあまり心配する必要はありません。どうしても大きいサイズの画像を置きたいということであれば、いっそSNSを画像置き場にしてリンクだけを置く手もあります。

以下には昔から存在している代表的なものを書いていますが、今なら探せばもうちょっといい場所があるかも知れません。

なお、かつてあったgeocitiesやinfoseekは時代の流れに逆らえず、サービス終了に追い込まれています。これによってかなりの数の個人サイトが失われたように思います。

HTMLとCSSの書き方

手打ちする場合は大まかなレイアウト（構成・構造）をHTMLで書き、見た目をCSS（スタイルシート）で指定するのが一般的です。その書き方をちゃんと説明しているサイトはなぜか検索上位に出てきません。そうなると始める前から挫折してしまいますので、個人サイト全盛期によく利用されていたサイトを紹介しておきます。

とほほのＷＷＷ入門
Webページの作成入門はもちろんのこと、各HTMLタグの説明、スタイルシート（CSS）で指定可能な属性の一覧など、手打ちHTMLによる個人サイト構築に必要な全てが網羅されています。最新情報にもちゃんと追従しています。というか、ここさえ見ておけばほぼ全て分かります。Googleが検索結果上位に表示しないのが不思議なくらいです。
HTMLクイックリファレンス
HTMLのタグやCSSの属性について目的別や名前順などで探せるサイトです。最新情報にもちゃんと追従しています。

また、以下はFirefoxブラウザを作っているMozillaが公式に出しているドキュメント群です。全てが網羅された正式かつ正確な説明ですが、内容は難しいので上記で分からないものをピンポイントで調べるのに使うと良いでしょう。

MDN 開発者向けのウェブ技術

テンプレート＆素材サイト

個人サイトを色々修飾したりするための素材サイトというのもあります。ほとんど閉鎖してしまいましたが、今でも残っているものがありますので活用しましょう。また、テンプレートを使えば最初から全部HTMLを書くのと比べてかなり楽になります。テンプレートをベースに改造していくのもアリです。

以下に昔からある素材サイトのリンクをいくつか掲載します。芋づる式に他の素材サイトにもたどり着けると思います。 FOOL LOVERSのページ下部には素材サイトのリンク集の場所が掲載されていたりしますので大変役立ちます。

素材を使用する場合は必ず各々のサイトの規約を読むようにしてください。リンクを張ればOK等の緩い規約のこともあれば、商用不可などの制限がついていることもあります。
あまりに不届き者が多いためか、規約をしっかり読まないと素材ページにたどり着けないようにしてあるサイトもあります。

FOOL LOVERS
昔からある手打ちHTMLのテンプレートサイト＆素材サイトです。
Little Eden
イラスト系の素材があります。模様から背景まで色々な場所に使えます。
はながら屋
同じくイラスト系の素材があります。可愛らしい感じが多い気がします。模様から背景まで色々な場所に使えます。
Ｆｕｚｚｙ
実写系の素材があります。背景などにいかがでしょうか。
フランクなソザイ
その名の通りフランクというかシンプルな素材が沢山あります。
十五夜
昔お世話になった所です。個人サイトで使用可能な和風素材集です
平安素材「綺陽堂」
平安装束の文様素材がたくさんあります。

なお、昔の素材サイトが閉鎖された後、無関係な第三者が同じアドレスを取得して乗っ取っているケースもたまにあります。唐突な宣伝など、不自然なコンテンツがある場合は利用を控えた方が賢明かもしれません。

どうしてもHTMLは無理そうな場合

どうしても手打ちのHTMLは無理そうだ、そこまで根気が続きそうにない、という人は、ある程度型を決めて作りやすくしているサービスを使う手もあります。自由度は落ちてしまいますが、かつてのホームページビルダーのような雰囲気で使えると思います。

WordPressは使うのに色々設定が必要です。タダで使おうと思うと大変かもしれません。

このサイトは手打ちHTMLを前提に解説しますので、これらを使う場合は各々の使い方の解説を別で探してください。

ページトップに戻る

令和時代の手打ちHTML

以下は、令和の時代に新たに手打ちHTMLを書く場合のノウハウなどです。今の時代に対応するための要点だけに絞っていますので、基本的な事項はHTMLとCSSの書き方で紹介したサイトなどを参考にしてください。

①令和時代のHTMLテンプレ

令和時代のHTMLテンプレとしては以下の物を使いましょう。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>ページタイトル</title>
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta name="viewport" content="user-scalable=yes, initial-scale=1">
</head>
<body>
	ほげほげ
</body>
</html>

ダウンロード：template.html

かつての時代との違うのは3ヶ所です。

<!DOCTYPE html>

HTML4の時代は長かったですがこれだけでOKになっています。ただし、フレームを使う時は以前の長い記述が要ります。

<meta charset="utf-8"/>

これは以前からあるものですが、ページの文字コードは指定するのがお行儀のいいやり方です。普通に作ったらshift-jisかutf-8になります。メモ帳なら保存時に指定できます。指定を間違えると盛大に文字化けします。今時であればutf-8で書く方が色んな文字が自由に使えていいと思います。

<meta name="viewport" content="user-scalable=yes, initial-scale=1">

スマートフォンでまともな倍率の表示にするために必要です。なお、幅固定のレイアウトにしてしまうと不細工になりますので、幅を固定しなくても破綻しない画面構成にするのがおすすめです。

また、かつてのようなフレームデザインの流儀でスマートフォン対応のページを作りたい場合は②スマホに対応しように解説を書いています。フレームの使用は非推奨とか言われていますが、そこは気にしたら負けです。

見た目の指定は別のCSSに分けなさいというお題目がありますが、個人サイトのレベルではあまり気にしなくても問題ありません。style=""の属性も堂々と使いましょう。

個人サイト全盛期には検索結果に表示されたくないという意味で、検索避けという技がありました。この技は今でも問題なく使えますので、検索結果に表示されたくなければ設定しておきましょう。

<head>タグの中に以下を書く

<meta content="noindex,nofollow,noarchive" name="robots">

サイトの一番上の階層にrobots.txtというものを置いて、以下の内容を記載

User-agent: *
Disallow: /

②令和時代の画像表示

NetscapeやらIEやらが幅を利かせていた時代は最新機能を使うと何かとおかしな挙動が発生しましたが、今はChrome系独占状態なので気にする必要はありません。最新機能を遠慮なく使いましょう。

imgタグにはstyle="max-width:100%;"を書いておくのが推奨です。例えば、次のような形です。

<img src="hogehoge.png" style="max-width:100%;" alt="hoge">

このようにしておくと、画面幅が画像よりも狭くなった時に自動的に縮小してくれます。なお、検索結果に適切に表示して欲しいと願うのであれば、imgタグにはalt属性（画像の説明）を書いておく方が好ましいです。そんなの気にしないという人は書かなくても問題ありません。

③令和時代のレイアウト調整

昔であればposition:absoluteにして座標を直接指定する場合がありましたが、今時は画面サイズが色々あるという前提に立ってマージンを使って調整するのが良い方法です。例えば、画像を並べた時に隙間がなくて窮屈だなと思ったら、imgタグをdivタグで囲んでdivタグにmargin:4px;のように指定してあげると隙間を開けられます。

<div style="margin:4px;"><img src="hogehoge.png" style="max-width:100%;"></div>
<div style="margin:4px;"><img src="hogehoge.png" style="max-width:100%;"></div>

なお、わざわざdivタグで囲むのは面倒な目に遭わないためのおまじないです。ここで直接imgタグにマージンを指定したりすると何やら変なことになります（HTMLの仕様上は正しい挙動ですが）。基本的にマージンを指定する時はdivタグで囲んでおくのが安全です。マージン指定でレイアウトが変になった時もとりあえずdivタグで囲んでそっちにマージンを指定すると多くの場合直ります。

何回も指定するのが面倒になった時はスタイルシートの出番ですが、別ファイルで用意するのが面倒ならheadタグの中に書いてしまいましょう。別ファイルにするのが推奨なのでしょうが、個人サイトレベルなら気にしなくて良いでしょう。必要になったときに分ければいいだけです。

<style type="text/css">
<!--
img{
  max-width:100%;
}
//-->
</style>

隙間を調整するもう一つの方法としてpaddingというものがあります。これは例を見ていただいた方が手っ取り早いと思います。

<div style="margin:12px;background-color:green;border:1px solid black;color:white;">margin指定</div>
<div style="padding:12px;background-color:green;border:1px solid black;color:white;">padding指定</div>

margin指定

padding指定

つまり、marginは背景塗りや境界線を含まないマージンで、paddingは含むマージンです。

NetscapeやらIEやらが幅を利かせていた時代はマージンを指定すると本当にどうしようもないくらい見た目が崩れる問題がありましたが、令和の時代ではそんなことはなくなりました。安心して使いましょう。

また、要素をページ幅に伸ばすんじゃなくて、中身だけを囲んで欲しいんだ！　という場合にはdisplay:inline-blockを指定しましょう。やり方は複数ありますが、これが一番手っ取り早いです。

<div style="margin:12px;background-color:green;border:1px solid black;color:white;display:inline-block;">margin指定</div>
<div style="padding:12px;background-color:green;border:1px solid black;color:white;display:inline-block;">padding指定</div>

margin指定

padding指定

縦に並べたい場合はそれぞれを普通の（display指定していない）divタグで囲むか、<br>でOKです。

<div style="margin:12px;background-color:green;border:1px solid black;color:white;display:inline-block;">margin指定</div><br>
<div style="padding:12px;background-color:green;border:1px solid black;color:white;display:inline-block;">padding指定</div>

margin指定

padding指定

ちなみに、上の例のような書き方で横に並べた場合に微妙に隙間が開くのはHTMLの仕様です。これが嫌な場合は、後続するdivタグを隙間なく（改行やスペースを入れずに）書くようにしてください。

<div style="margin:12px;background-color:green;border:1px solid black;color:white;display:inline-block;">margin指定</div><div style="padding:12px;background-color:green;border:1px solid black;color:white;display:inline-block;">padding指定</div>

margin指定

padding指定

他、floatで似たようなことが出来ますが、色々と分かりにくすぎるので気が向いたらで良いと思います。

④令和時代の文章調整

昔は複数の<br>タグで文章に隙間を空けるというのが定番のやり方でした。今でもそのやり方はできますが、せっかく新しく始めるなら新しいやり方をしましょう。

その新しい（本当は昔からある正しい）やり方は<p>タグを文章の段落ごとに使うことです。こうすると段落毎に適度な隙間が空くようになります。もっと広げたい場合はどうするのでしょう？　答えはmarginを使います。例えばmargin-bottom:2em;のように書けば2行分空けられます。以下は例です。

<p style="margin-bottom:2em;">
初めの段落
</p>
<p>
2行空けて次の段落
</p>

ちなみに、1つめのmargin-bottomをやめて、2つめの<p>タグにmargin-top:2em;と書いても見かけは同じです。ただし「1つめの要素の下側に隙間を空ける」か「2つ目の要素の上側に隙間を空ける」かという意味の違いはあります。

また、行間が詰まって見辛いというのも良くある話です。これはline-heightの指定で手っ取り早く調整出来ます。

<p style="line-height:200%;">
長い長い文章で改行がある場合でも<br>
丁度良いくらいの行間で表示出来ます。
</p>

文字の位置を右揃え・左揃え・中央揃えにしたい場合は、centerタグの代わりにtext-alignを使用しましょう。

<p style="text-align:left;">
左揃えです（指定しなくてもこれ）
</p>
<p style="text-align:center;">
中央揃えです
</p>
<p style="text-align:right;">
右揃えです
</p>

左揃えです（指定しなくてもこれ）

中央揃えです

右揃えです

レイアウト調整で紹介したdisplay:inline-blockと組み合わせると、タイトル付きの画像みたいな表現も出来ます。この際の注意として、pタグの中にはimgタグやdivタグなどを書いてはいけないというルールがあります（より厳密にはブロック要素を含めることが出来ないというルール）。このルールに違反してもぱっと見はエラーが出ないので気付きませんが、センタリングが効かないなどの想定外の挙動（仕様上は正しい）が発生します。したがって、imgタグはpタグではなくdivタグの中に書くか、pタグの外側に直接書くようにしてください。以下はdivタグの中に書く例です。

<div style="margin:8px;">
  <div style="text-align:left;">
    <div style="display:inline-block;text-align:center;margin:8px;"><img src="/opRumiHelpPlugin/images/bana2013.jpg" style="max-width:100%;" alt="hoge"><br>左揃えです</div>
  </div>
  <div style="text-align:center;">
    <div style="display:inline-block;text-align:center;margin:8px;"><img src="/opRumiHelpPlugin/images/bana2013.jpg" style="max-width:100%;" alt="hoge"><br>中央揃えです</div>
  </div>
  <div style="text-align:right;">
    <div style="display:inline-block;text-align:center;margin:8px;"><img src="/opRumiHelpPlugin/images/bana2013.jpg" style="max-width:100%;" alt="hoge"><br>右揃えです</div>
  </div>
</div>

左揃えです

中央揃えです

右揃えです

⑤令和時代のテーブル

PCでは大して気にする必要はありませんが、画面が狭いスマートフォンはテーブルと非常に相性が悪いです。列数はせいぜい2～3列にしておきましょう。

どうしても大きな表になってしまう場合は、表全体をdivで囲み、そのdivにstyle="overflow-x:auto;white-space:nowrap;"を指定しておく手があります。こうすると、大きな表を横にスクロール表示することが出来ます。

<div style="overflow-x:auto;white-space:nowrap;">
<table border=1>
<thead>
<tr><th>項目1</th><th>項目2</th><th>項目3</th><th>項目4</th><th>項目5</th><th>項目6</th><th>項目7</th><th>項目8</th></tr>
</thead>
<tbody>
<tr><td>サンプル</td><td>サンプル</td><td>サンプル</td><td>サンプル</td><td>サンプル</td><td>サンプル</td><td>サンプル</td><td>サンプル</td></tr>
</tbody>
</table>
</div>

項目1	項目2	項目3	項目4	項目5	項目6	項目7	項目8
サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル	サンプル

別のケースとして、複数のコンテンツのリストがあって、縦に並べていたら長くなって仕方ないからテーブルにしているという状況もあると思います。その場合はテーブルではなく、並べたい要素を個別にdivタグで囲んでdisplay:inline-blockを指定しましょう（必要に応じてwidthも指定）。このようにすれば、画面幅が許す限り横方向に並べ、あふれたら下の方に並べるという挙動が簡単にできます。なお、cssのfloatでも同じことができますが、扱いが面倒なので使いやすい方を使っておけばいいと思います。

<div style="margin:8px;">
<div style="display:inline-block;width:100px;border:1px solid black;margin:4px;padding:8px;text-align:center;">コンテンツ</div>
<div style="display:inline-block;width:100px;border:1px solid black;margin:4px;padding:8px;text-align:center;">コンテンツ</div>
<div style="display:inline-block;width:100px;border:1px solid black;margin:4px;padding:8px;text-align:center;">コンテンツ</div>
<div style="display:inline-block;width:100px;border:1px solid black;margin:4px;padding:8px;text-align:center;">コンテンツ</div>
<div style="display:inline-block;width:100px;border:1px solid black;margin:4px;padding:8px;text-align:center;">コンテンツ</div>
<div style="display:inline-block;width:100px;border:1px solid black;margin:4px;padding:8px;text-align:center;">コンテンツ</div>
</div>

コンテンツ

ここまでずらーっとコピペして並べるなら、CSSを使った方が楽だと思います。もちろん、よく分からなければコピペでも文法上何も問題ありません。なんにせよ楽して完成させるのが一番です。

<style type="text/css">
<!--
div.ContentsBlock{
  display:inline-block;
  width:100px;
  border:1px solid black;
  margin:4px;
  padding:8px;
  text-align:center;
}
//-->
</style>

<div style="margin:8px;">
<div class="ContentsBlock">コンテンツ</div>
<div class="ContentsBlock">コンテンツ</div>
<div class="ContentsBlock">コンテンツ</div>
<div class="ContentsBlock">コンテンツ</div>
<div class="ContentsBlock">コンテンツ</div>
<div class="ContentsBlock">コンテンツ</div>
</div>

テーブルを使って画面レイアウトを調整していていたんです、という場合はいい感じに画面分割するも参考にしてください。

⑥スマートフォンだけ違うCSSを適用する

正確には画面サイズが狭い場合にCSSを上書き適用するものです。広い画面の時は広い画面用のレイアウトを、狭い画面の時は狭い画面用のレイアウトを適用でき、どちらで見ても見苦しくないページにできます。

p{
  margin: 10px; /* ←ベースの設定 */
}

@media screen and (max-width: 767px) {
p{
  margin: 3px; /* ←画面幅が767px以下の場合だけ上書き適用 */
}
}

表示領域が縦長か横長かで分岐したい場合は、次のような方法で実現出来ます。

@media (orientation: landscape) {
p{
  margin: 8px; /* ←横長の場合だけに適用 */
}
@media (orientation: portrait) {
p{
  margin: 3px; /* ←縦長の場合だけに適用 */
}
}

⑦最終手段：スマートフォンだけ違うHTMLを表示する

PCとスマートフォンのページの差がCSSでどうにかできるレベルじゃねぇ！　という場合はスマートフォン用のページを用意するのが正攻法ですが、一旦そうしてしまうと全ページをPC用とスマートフォン用に分けなければならず、更新の手間が二倍になるという地獄が発生します。そこで、本当にどうしようもない部分だけに限定して、PCだけ表示するdivタグとスマートフォンだけ表示するdivタグを作ってしまい、それぞれにPC用とスマホ用を書くことにしましょう。

div.pcDiv{
  display: block; /* ←ベースの設定 */
}
div.mobileDiv{
  display: none; /* ←ベースの設定 */
}

@media screen and (max-width: 767px) {
div.pcDiv{
  display: none; /* ←スマホ用（画面幅が767px以下）の設定 */
}
div.mobileDiv{
  display: block; /* ←スマホ用（画面幅が767px以下）の設定 */
}
}

<div class="pcDiv">PCの時はこっちが表示される</div>
<div class="mobileDiv">スマホの時はこっちが表示される</div>

これをやるとGoogleさんとかが正しくページ内容を認識してくれないのでは？　と思うかもしれません。確かにその通り、あまり正しく認識してくれなくなるでしょう。その意味で最終手段です。しかし趣味の個人サイトでそこまで気にする必要があるのかという気はします。本格的にやりたくなったらその時に考えれば良いでしょう。

⑧背景を透かしにする

画像を背景に使うと、文字と被った時に見辛いという問題が多々生じます。そんなときは透明度を設定して透かしのようにしましょう。画像編集ソフトで半透明にしても構いませんが、CSSでも半透明というものが簡単に使える良い時代になりましたので活用しましょう。

background-image: url("画像パス");
background-color:rgba(255,255,255,透明度0.0～1.0);
background-blend-mode:lighten;

で簡単に半透明にできます。昔のブラウザは対応していませんが、今時は半強制的にブラウザの更新をさせられる時代ですので、気にする必要はありません。

背景画像を半透明にするのではなく、コンテンツの背景を半透明にする手もあります。この場合はコンテンツをdivタグで囲んでおいて、そのdivのstyleにbackground-color:rgba(255,255,255,透明度0.0～1.0);を指定しておきます。

⑨令和時代の保存阻止

かつては画像を保存して欲しくないという理由で、右クリックすると「右クリック禁止！」なるメッセージを出す場合がありました。そんなことしても保存するやつはスクショにしてでも保存するから意味が無いという話はありますが、できるだけ面倒臭くしておくことで意思表示とライトなユーザーによる保存阻止くらいは出来るでしょう。

スマートフォンにも対応した最新の書き方は次の通りです。まず、pointer-events:noneでPCの右クリックを封じます。続いて、user-select:noneでスマホの長押し保存も封じます。 -webkit-user-selectも同様に書いてSafari系の守備範囲も広げます。さらに徹底するなら、-webkit-user-drag（ChromeやSafariのみ）やonmousedown（ほぼ全ブラウザ）でブラウザ外へ持って行かれるのも阻止します。

<img src="/opRumiHelpPlugin/images/bana2013.jpg" style="max-width:100%;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;" onmousedown="return false;" alt="hoge">

全ての画像を一切保存させる気がないのであれば、cssにまとめて書いてしまいましょう。

img{
  pointer-events: none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}

ただし、onmousedownはcssには書けないので、個別に書かないと駄目です。とはいえ、Chrome独占スマホメインの令和時代ならばonmousedownが無くてもほぼ対策は出来ていると考えていいと思います。

いずれにせよ完璧ではない（完璧にはできない）ので、保存させたくないという意思表示さえ出来れば良いと考えましょう。

⑩いい感じに画面分割する

昔は画面幅を固定してレイアウト調整するのが一般的でしたが、今はスマートフォンのように画面サイズが狭い状況を考えないといけない時代になりました。そこで、CSSにもとりあえずいい感じに画面分割するという機能が追加されました。その機能はFlexible Boxと呼ばれています。

Flexible Boxは次のように使います。まず、親要素にdisplay:flexとflex-wrap:wrapを書きます。とりあえずdivタグで囲ってそこに書いておけばOKです。この例では、画面幅が狭くなって幅がflex-basisの値未満になりそうなときは自動的に下側に回り込むようになっています。

<div style="margin:8px 16px;display:flex;flex-wrap:wrap;">
  <div style="background-color:#fdd;flex-basis:8em;flex-grow:1;">項目1</div>
  <div style="background-color:#dfd;flex-basis:16em;flex-grow:2;">項目2<br>とてもとてもとても長いコンテンツ</div>
  <div style="background-color:#ddf;flex-basis:8em;flex-grow:1;">項目3</div>
  <div style="background-color:#dff;flex-basis:8em;flex-grow:1;">項目4</div>
</div>

項目1

項目2
とてもとてもとても長いコンテンツ

項目3

項目4

flex-basisは基準サイズです。この値を基準としてflex-growで指定した比率で拡大します。また、flex-wrap:wrapが指定されているときはこの値が最小幅になります。

flex-growは拡大するときの分配比率を指定するものです。 flex-basisの比率に合わせておくのがバランスが良いでしょう。

隙間を空けたいときはgapに間隔を指定します。

<div style="margin:8px 16px;display:flex;flex-wrap:wrap;gap:5px 10px;">
  <div style="background-color:#fdd;flex-basis:8em;flex-grow:1;">項目1</div>
  <div style="background-color:#dfd;flex-basis:16em;flex-grow:2;">項目2<br>とてもとてもとても長いコンテンツ</div>
  <div style="background-color:#ddf;flex-basis:8em;flex-grow:1;">項目3</div>
  <div style="background-color:#dff;flex-basis:8em;flex-grow:1;">項目4</div>
</div>

項目1

項目2
とてもとてもとても長いコンテンツ

項目3

項目4

Flexible Boxを応用して、ボックスの中央にコンテンツを配置することができます。横を中央に揃えるのは簡単に実現出来ますが、縦を中央に揃えるのは案外ややこしかったりするので、上下左右中央揃えが必要なときに重宝します。

<div style="background-color:#fdd;margin:8px 16px;height:200px;display:flex;justify-content:center;align-items:center;">
  <div style="display:inline-block;text-align:center;border:3px solid black;background-color:white;padding:20px;"><img src="/opRumiHelpPlugin/images/bana2013.jpg" style="max-width:100%;" alt="hoge"><br>中央揃えです</div>
</div>

上下左右中央揃えです

ページトップに戻る

令和最新版個人サイトの作り方（いまさら）

目次

はじめに（偉そうな前置き① 読まなくていい）

個人サイトとは（偉そうな前置き② 読まなくていい）

昔の個人サイトを令和時代に対応させる

①HTTPSにしよう

②スマホに対応しよう

③SNS時代の機能を活用しよう

④バナーの直リンクを避けよう

⑤Flash製コンテンツを何とかしよう

おまけ：HTMLを最新に書き換える必要はあるか？

今から個人サイトを作る

手打ちHTMLの置ける無料Webサービス

HTMLとCSSの書き方

テンプレート＆素材サイト

どうしてもHTMLは無理そうな場合

令和時代の手打ちHTML

①令和時代のHTMLテンプレ

②令和時代の画像表示

③令和時代のレイアウト調整

④令和時代の文章調整

⑤令和時代のテーブル

⑥スマートフォンだけ違うCSSを適用する

⑦最終手段：スマートフォンだけ違うHTMLを表示する

⑧背景を透かしにする

⑨令和時代の保存阻止

⑩いい感じに画面分割する

令和最新版 個人サイトの作り方（いまさら）

目次

はじめに（偉そうな前置き① 読まなくていい）

個人サイトとは（偉そうな前置き② 読まなくていい）

昔の個人サイトを令和時代に対応させる

①HTTPSにしよう

②スマホに対応しよう

③SNS時代の機能を活用しよう

④バナーの直リンクを避けよう

⑤Flash製コンテンツを何とかしよう

おまけ：HTMLを最新に書き換える必要はあるか？

今から個人サイトを作る

手打ちHTMLの置ける無料Webサービス

HTMLとCSSの書き方

テンプレート＆素材サイト

どうしてもHTMLは無理そうな場合

令和時代の手打ちHTML

①令和時代のHTMLテンプレ

②令和時代の画像表示

③令和時代のレイアウト調整

④令和時代の文章調整

⑤令和時代のテーブル

⑥スマートフォンだけ違うCSSを適用する

⑦最終手段：スマートフォンだけ違うHTMLを表示する

⑧背景を透かしにする

⑨令和時代の保存阻止

⑩いい感じに画面分割する

令和最新版個人サイトの作り方（いまさら）