こんにちは！
各サイトさんのおかげでホームページづくりを楽しんでいるココロです。

このページでは、

についてまとめています。
「ホームページ＝サイト」 ということで、以下はサイトと表記させていただいています。つい最近この方法(？)を発見しまして、どなたかのお役に立つ時がくればいいなぁ…、と備忘録と頭の整理を兼ねてメモしています。

私はWordpressなどのソフトは使わずにメモ帳などでHTMLやCSSを作成して、レンタルサーバーのFTP機能等を使って各ファイルを直接アップロードしているスタンスです。

オフラインでサイトを作るための大きなポイントだと思ったことは、

この２点がポイントだったんじゃないかな？と、振り返ってみたりしています。最終的にindex.htmlを最小化させたオフラインのブラウザへドラッグ＆ドロップすればサイトが表示されました。

「１つのフォルダに、サイトを構築する全データ（各HTMLファイルやCSSファイルなど）が格納されていること」

「CSSやJavascriptを参照する際には、file:/// 以外のURLを参照すること」

の２点だったと思います。

※ 念のため以下で表示されるローカルのURL（パス）は他人に伝えないほうが無難かと思います ※

※ 本ページはプロモーションを
　　含んでいます

このすぐ下におおまかな流れと目次リストをご用意しています。各項目からもジャンプしていただけます。

≪リストからジャンプ≫

• 　　　　　　　　　　　　　　　　　　　
• PC上に新規フォルダを作成
• ↓
• サイトのデータを全て入れる
• ↓
• ブラウザ画面に放り込む
• ↓
• file:/// 以外をコピペ
• ↓
• 絶対参照等で参照先の変更
• ↓
• include範囲に目印
• ↓
• 各ページの原本を用意
• ↓
• ざっくり基本的な作り方
• ↓
• おすすめの準備項目
• 　　　　　　　　　　　　　　　　　　　

PC上に新規フォルダを作成

今回の方法はメモ帳などにhtmlやCSSなどのコードを直接書き込んで、必要があれば拡張子を変更して直接ブラウザに放り込む場合の方法です。 私はTemplate-Partyさんのテンプレートを使わせていただいています。

まず最初にフォルダを作るのですけど、この作成するフォルダはPC上であればどこの場所でもかまわないと思います。 テンプレートをダウンロードされた場合はおそらくそのフォルダの名前だけをお好きなフォルダ名に変更すればOKです。

パソコンのCドライブやデスクトップに適当なフォルダ名をつけて新規フォルダを作成してもいいですし、わかりやすくデスクトップでも大丈夫なんじゃないでしょうか。

ただサイトのデータが重くなった時のことを考えるとCかDドライブの浅い階層にいれてショートカットをデスクトップに作るのがよさそうです。 理由としてはCPUへの負担を減らしたいのと、URL（パス）が短くすると作業が楽になるかな、と思うからです。

もしテンプレートをダウンロードされた場合は、そのフォルダの名前を 「aaa」 などのシンプルでわかりやすい名前に変更するとよりいい感じです。 その 「aaa」 というフォルダ名がドメイン名の部分になります。

例えば 「aaa」 というフォルダをPCのデスクトップに作成して、その中に 「all-html」 というフォルダを作成、 その中に各コンテンツである

・ abc.html ファイル

・ abcd.html ファイル

・ abcde.html ファイル

といった各htmlページをまとめて入れたとします。

aaaフォルダを作成 →
all-htmlフォルダの中に →
abc.htmlファイル →

その場合の
abc.htmlファイルへのURL（パス）は、

file:///C:/Users/○○○/Desktop/aaa/all-html/abc.html

といったようなURL（パス）になると思います。 （/○○○/の部分やURLはその方のPCによって変わります）

そのURL（パス）を丸ごと全部コピペしても参照しなかったので file:///以外 のURL →

C:/Users/○○○/Desktop/aaa/all-html/abc.html

が絶対参照のURL（パス）となるようです。 この点についての詳細は 「file:/// 以外をコピペ」 をご覧いただければ詳しくメモしています。

もしオフラインでほぼサイトが完成した際にサーバーにアップロードする時もこのフォルダの名前はそれほど影響は受けないとは思います。 ただその最初のフォルダ以外の名前―― 「aaa」 フォルダより下の階層のフォルダやファイルの名前 ――はその名前がサイトのURLとなりますので、適当に名前をつけてしまうと後で困ることもあります…。

つまりもしかしたらHTMLの ドメイン とは、この最初のフォルダの 名前 なんでしょうね。サーバー上ではドメインを取得して「pray-power-is-god-and-cocoro.com」というような部分が「ドメイン（名） 」となります。一方で上記の例でいうとPC上では「aaa（名）」というような部分がドメインにあたります。「/」はディレクトリ——フォルダごとの階層化——にあたります。このように考えると 「ドメインとはなんぞや？」 という疑問が少しでもシンプルにわかりやすくなるかもしれません。

サイトのデータを全て入れる

テンプレートをダウンロードされたり、直接HTMLやCSSをメモ帳で作成されたら先の 「aaa」 フォルダの中にサイトのデータを全部いれていきます。

テンプレートをダウンロードされた場合はそのフォルダの中にサイトのデータが全部入っているはずなのでそのフォルダを使う形でOKです。 おすすめとしてはそのフォルダの名前を 「aaa」 や 「bbb」 でもなんでもいいのでシンプルでわかりやすい名前にしておいたほうが作るのが楽になると思います。

もしテンプレートを使わない場合はHTML、CSS、JavaScript、jQuery、画像、などなど…のサイトのデータをそのフォルダの中に全部入れちゃいます。 このオフラインでサイトを作成する際の大きなポイントの１つ目は、

「サイトのデータが１つのフォルダの中に入っていること」

が条件のようでした。
調べてみるとオフラインのブラウザではローカルの個別フォルダやファイルは参照しないようです。 オフラインでは飽くまでもサイトのデータが入っているフォルダの中を読み込みにいくみたいですね。

そうしてindex.htmlをオフラインのブラウザに放り込んでやればサイトが表示されてJava ScriptやjQuery関係も問題なく動いていました。これだけでも驚きだったのですけど、いろいろ実験してみるとGoogle web fontsも使えるという。オフラインでどうやって読み込んでいるのかはわからないのですが、ブラウザって優秀なんだなぁ…としみじみ。

ウェブフォントに関してはダウンロードしても使えたので問題ないと思います。 読み込んでいないテンプレートで試してみたところ、Java ScriptやjQuery関係も普通に動作していたのでたぶん問題ないと思います。

chromeやsafari、edgeなど様々なブラウザの種類の中で今回の方法はブラウザであれば問題ないようです。 作成してできたindex.htmlファイルや○○○.htmlをファイルをブラウザにドラッグ＆ドロップすれば表示されるはずです。 もちろんメニューから移動することもできました。

ブラウザ画面に放り込む

ブラウザにhtmlファイルなどをドラッグ＆ドロップします。index.htmlファイルやCSS、作成したhtmlファイルを最小化させたオフラインのブラウザの画面にドラッグ＆ドロップしてひとまず正常に表示されるかを確認します。

テンプレートをダウンロードしてその中のフォルダやファイルの場所（ディレクトリ）を変更させなければおそらくどのhtmlファイルを放り込んでも正常に表示されると思います。場所を移動させたとしても下の参照ルールを当てはめればちゃんと表示してくれました。

file:/// 以外をコピペ

冒頭で予想した大きなポイントの２つ目の、

file:/// 以外のURLを参照

という参照のルールとして例えば

・ デスクトップにフォルダを作成

・ フォルダ名は 「aaa」

・ その 「aaa」 内にindex.html

という場合、index.htmlファイルをブラウザにドラッグ＆ドロップしてURLが表示される検索窓の所には

file:///C:/Users/○○○/Desktop/aaa/index.html

といったようなURLが表示されますので file:///以外のURL をコピペして相対参照か絶対参照でCSSファイルなどを読み込ませます。

file:///C:/Users/○○○/Desktop/aaa/index.html

↓ file:///だけを削除 ↓

C:/Users/○○○/Desktop/aaa/index.html

こんな感じで参照ルールを当てはめると、CSSやJS、画像やその他モロモロのサイトの表示に必要なデータを読み込んでくれます。 下の項目で画像を交えながら詳しくお伝えしていきます。

file:/// 以外の詳細

まずは下の画像のようなオフライン状態でブラウザを開きます。

この状態のブラウザにデスクトップで作成した 「aaa」 フォルダの中のindex.htmlファイルをブラウザに放り込むと検索窓のＵＲＬ表示覧に下の画像のようなＵＲＬが表示されると思います。

（○○○の部分やURLはその方のPCによって異なります）

そしてこの

C:/Users/○○○/Desktop/aaa/index.html

の箇所をクリックすると、

file:///C:/Users/○○○/Desktop/aaa/index.html

このようなURLが表示されます。
このままコピペしても参照しないので、file:///の部分だけを消して

↓↓↓

C:/Users/○○○/Desktop/aaa/index.html

にします。
これがオフラインの状態で絶対参照をする時に読み込むURL（パス）となります。

相対参照の 「../」 などでも参照はしてくれるのですけど、ネットに繋げてサイトを公開する時に置換機能を使ってこのローカル参照を一括変換したほうが効率がいいと思いますので統一しておくのがおすすめです。

（../や./で１つにならないため）

例えばCSSファイルをこの絶対参照で読み込む場合は

<link rel="stylesheet" href="css/style.css">

↓↓↓

<link rel="stylesheet" href="C:/Users/○○○/Desktop/aaa/css/style.css">

としておくとその読み込むCSSやhtmlファイルをどこに移動させても表示されます。 JSや画像、その他モロモロも同じ要領でいけます。 この絶対参照のほうでしたら作りやすいと思いますし、ローカル参照をメモ帳などの置換機能で一括変換する際に

C:/Users/○○○/Desktop/aaa/

の箇所だけを

https://（その方のドメイン）/

という風にしておけばページ全体を一括変換できるので楽かな？と思います。 「aaa」 というフォルダ名は 「test」 や 「site」 でも、なんでもお好きなフォルダ名でOKです。 短くてシンプルな名前のほうがいいかもしれません。仮にこのサイト全体のデータが入っている 「aaa」 フォルダをCやDドライブに移動させたり入れたりしても要領は同じで、URL（パス）だけが変わります。

もし参照させたいファイルからみて参照したいファイルへのURL（パス） -----仮にblue-sky.jpgという画像へのURL（パス）----- がわからない場合は、参照したいそのファイルをブラウザに放り込んでやれば検索窓のＵＲＬ表示覧に

file:///C:/Users/○○○/Desktop/aaa/□□□/images/blue-sky.jpg

のようなURL（パス）が表示されますので、file:///だけを消したURLをコピペすると楽ちんです。 絶対参照や相対参照をさせないままファイルを移動させたりするとCSSが適用されなかったり表示くずれが発生しましたのでこの 「参照ルール」 がポイントだと思いました。

もし 「aaa」 の中に 「free」 というフォルダを作って、その中に 「about」 というファイルを作った場合の参照パスは、

file:///C:/Users/○○○/Desktop/aaa/free/about.html

↓

C:/Users/○○○/Desktop/aaa/free/about.html

といった感じでfile:///以外の部分が絶対参照のURL（パス）となります。 CSSやJSなども要領は同じでフォルダからフォルダの中へと辿っていって、CSSファイルなどをブラウザに放り込んでやればURL（パス）が表示されます。

（ 「aaa」 フォルダから 「free」 フォルダに潜る ）

（ 「about.html」ファイルをブラウザに放り込む ）

（ 検索窓に参照URL（パス）が表示される。CSSやJSも同じ ）

絶対参照等で参照先の変更

参照先を絶対参照にする理由は、コピーして貼り付けていく原本を１つだけの種類で済ましてしまえっ！という私のずぼらな企みからです。 もちろん相対参照でも問題なく表示されます。 ただ絶対参照のように確実に１つのキーワードでしたら、CSS、JavaScriptなどの参照先を公開前にメモ帳やテキストエディタの 「置換」 で一気に変更できるため後が楽かな？と思います。相対参照だと 「../」 「./」 「/」 とか種類があって置換がめんどくさいことに…。

参照に関しては最初ちんぷんかんぷんだったんですけど、なんとなく参照のルールみたいなのがわかってきたような気がします。 例えば相対参照で１つ下の階層にあるstyle.cssをindex.htmlのファイルに読み込ませたい場合はindex.htmlのHTMLファイルの中に

と記述すればindex.htmlファイルでCSSを読み込んでくれます。 １つ上の階層の相対参照の場合は

と記述すればindex.htmlファイルでCSSを読み込んでくれます。 たぶん絶対参照と相対参照のどちらであっても表示させたいファイルにこのコードが記述していればOKってことだと思うのです。 表示するためのデータの場所（ディレクトリ・参照先・URL・パス）が絶対参照か相対参照か、の違いなだけなんじゃないかな？と認識しました。

include範囲に目印

もし公開前にincludeをされるご予定がある場合はオフラインではPHPやSSIでのincludeができないのでひとまずinclude範囲に目印をつけておきます。下記のコードはSSI includeの場合でしてPHP includeとは方法が若干ちがってきます。

「オフラインでincludeもできないものか？！」

と、あれこれ試してはみたものの…PHPもSSIもサーバー対応とのことで無理でした…。 調べたところJavaScriptを実装したらいけるかもしれない？と考えたのですが、下準備が大変そうだったりオフラインで読み込むためには専用の仮想サーバーのようなシステムが必要な場合もあるとのことで断念。知識不足を痛感しています…。

＠importsは今後廃止される予定らしいのでiframeやuseなどを試してみるとギリiframeでしたら限定的にいけそうです。 すごく限定的に。しかし表示が崩れてしまいますし、これならincludeする範囲をコメントアウトなどで目印をつけておいたほうがいいかな、と思いました。 例えば SSI includeなら

といった感じでコメントアウトで目印をしておけばincludeの際に範囲が一目でわかるので楽かな？と考えました。 コメントアウトは表示されないため 「inc-header.shtml」 もその時点から決めておけばこれをコピーしてshtmlファイルの名前のところにコピペしたらサクサクです。

ちなみにHTML側のコメントアウトタグは

<!--　　-->　←　ですので、

<!-- （お好きなコメント） -->

を書いておけばメモになったりします。 とはいっても実際にWebで公開する前には個人情報や大切な情報を書いていないかチェックしたほうが良いです…。 というのも誰でもページのソースからコードやコメントアウトのメモが見れてしまうからです。

各ページの原本を用意

この原本というのはinclude範囲に目印をつけたindex.htmlファイルの1ページだけでサイトの全体像を作っていって、レンタルサーバーなどを契約してWebに公開する前にその１ページのHTMLコードだけをincludeして各ページに共通して使える原本を作っておく、というものです。これはオフラインではincludeができないため、例えばフリーページを各ページごとに作ってしまうと後で修正したくなった時に大変になってしまうからです。

サイト全体のHTML側の設定は１ページだけを変更するようにして、各ページの原本となるファイルを作成してコピーしまくる。そして個別で作ったコンテンツ（本文や記事）の部分だけをコピーしたその原本にコピペしていくと楽だと思います。個別で作ったコンテンツ（本文や記事）はコピペするだけですからメモ帳のテキストファイルに個別に作成しておいて、サイトの全体像ができたら<body>から</body>の間にコピペしたらOKです。

もし<body>から</body>の間にincludeをされるご予定がありましたら、各ページごとにincludeの前とincludeの後とわかるようにしておけばコピペする時もサクサクいけそうです。

ここで上の絶対参照にしておいたコードが役に立ってくれます。CSSやJSなどの参照を絶対参照にしておけば 「C:/Users/～」 を「https://～」から始まるURLに一発置換すればブログやフリーページをどこのディレクトリ（フォルダの中）に移動させても参照してくれるからです。

参照を完璧にした原本をコピーしまくるのが速いでしょうか…。どのみちincludeさせるのでしたら絶対参照でもかまわないかな？と個人的には思います。

相対参照の場合はフリページなどをフォルダにまとめると参照先が変わってしまいます。その相対参照の場合はindex.htmlファイル以外の階層が違うファイル用の原本（index.htmlと.htmlの２種類）も用意しておいたほうがいいかもです。

相対参照と絶対参照のどっちがいいのかぶっちゃけわかりません。 Googleさんとしては絶対参照でもいいとのことで問題ないでしょう。（たぶん）

ちなみに私のざっくりとした認識では、

といった記号を参照パスの一番前につける参照ルールが必要との認識で、 これらに関しては詳しく解説してくださっているサイトさんがありますので 「HTML 相対参照とは」 等で検索していただればと思います。

ざっくり基本的な作り方

ひとまずざっくりとした感じですけど、オフライン状態のPCから 「メモ帳」 などのテキストエディタを開きます。そのメモ帳の中に例えば

といった感じのコードを書いて名前をつけて保存の時に選べる保存形式のUTF-8を選んで名前を 「index」 に、拡張子を 「.txt」 から 「.html」 に書き換えてからサイトのデータが全て入っているフォルダの一番最初の場所にいれます。（ → index.html の完成）

※ UTF-8（BOM 付き）ではないほうのUTF-8 ※です。

aaaというフォルダならaaaフォルダを開いた直後の中、もしaaaフォルダの中に 「free」 というフォルダや 「bolg」 というフォルダがあったとしても、index.htmlはルートドメイン直下に配置するルールがあるので 「free」 や 「bolg」 などのフォルダの中ではなくて 「aaaフォルダを開いた直後の中」 に入れます。そして同じくメモ帳などを開いて例えば

といった感じのコードを書いて同じくUTF-8を選んで保存。名前を 「style」 に、拡張子を 「.txt」 から 「.css」 に書き換えてサイトのデータが全て入っているフォルダの一番最初の場所にいれます。（ → style.css の完成）

これで上の項目にあったローカルの参照ルールさえ当てはめれば同じ要領で画像やもJSなどなども適用されてサイトが表示されます。 一から作るのもありだとは思いますけど個人的には少しだけWi－Fiに繋げてテンプレートをダウンロードしたほうが早いとは思います。

おすすめの準備項目

私はだいぶ後のほうでクリティカルCSSやHTML、CSSのエラー、PageSpeedInsightsの速度チェックなどのこと勉強することができたため、これらを最初から知っていたらなぁ…と思いました。修復するのがすんげぇ大変だったからです。（汗）

ですのでざっくりではありますけどオンライン状態でサイト作りをしていく時のことも含めて 「できれば最初にしておいたほうがいいこと」 について、おすすめの項目をお伝えいたします。

を最初からしておくと後が楽だと思います。 SSL化はサーバーに依存しそうですけど、Googleコンソールからページのindex申請をする前にSSL化しておくとリダイレクトもかけずに済むのでいいかな？と。

HTML、CSSのエラーチェックはPageSpeedInsightsのスコアにも関係するため、

・ HTML、CSSのエラーチェック

・ PageSpeedInsights 対策

はSEOの観点からもサイトの作成当初からやっておいたほうがいいっぽいです。 W３Cのオンラインエラーチェックサービスは廃止になるようなことが書いてありましたのでHTMLだけですけど他チェックツールのURLを載せさせていただきます。

時間があれば各項目のいくつかでもその詳細を書いていけたらなぁ…と考えています。ひとまずはざっくりとサブセットについてとW３Cエラー修復法の１つについてメモしましたので、以下にリンクさせていただきます。

といった流れでオフラインでもサイトを作っていけると思いました。一番のポイントは 「参照ルール」 じゃないかな？オフラインの場合はURLが 「https://～」で始まるURLではないだけで、その参照ルールさえ当てはめればCSSもちゃんと適用されるというブラウザ様GJ。

URL＝Uniform Resource Locator → Locatorの意味は位置を示すための装置、 探知器とのことですのでローカルへの参照先（パス）もここではURLと表記させていただいています。

オフラインでサイトを作る際のデメリットもあるとは思いますけど、メリットとしては

・ データ通信料

・ レンタルサーバー契約料

・ ドメイン取得料

・ などなど

が節約できることでしょうか…。
そしてじっくりまったりと作っていけるという。ページもたくさん作れそうですし、なんなら公開と同時にGoogle AdSenseを申請してすぐに合格するかもしれません。

そのサイトが完成してオンラインで公開する時にもサーバーにアップロードする時だけスマホとPCをWi-Fiで繋げれば良さそうだなぁ、なんてことも考えたり。 スマホの月々の通信料を節約しつつ、さらにコンビニや駅でWi-Fiをお借りしてノートPCをネットに繋げる…という方法でもお得にできそうな気がします。

ただ、公共のWi-Fiでネットに繋げる場合はセキュリティ面の問題を考えるとなんとも言えない部分もあります。例えば公共のWi-FiなどのフリーWi-FiにPCやスマホを繋げている状態で https ではない、http から始まるURL → ”http://○○○/△△△～” にアクセスした際にその暗号化されてない——httpで始まるURL——のサイトさんに

・ クレジットカード番号

・ 暗証番号

・ ログインID情報

・ ログインパスワード

・ など重要な情報

を入力して ”送信などでWi-Fi電波に情報を乗せる” とそれらの情報が第三者に簡単に入手されるそうです。もちろんのこと、httpで始まるサイトさんも素敵な情報をたくさん書いてくださっているサイトさんは数多く存在するのですが、全てのサイトさんが善良だとは言い切れないので重要な情報を入力したり送信する場合は信用のある電波に繋げたほうが無難だと思います。そのへんはケースバイケースで対処すればオフラインでサイトを作るのもアリかなぁ？なんて思います。

少しでもお役に立てそうな情報をお伝えできたでしょうか。

私は今でもわからないことだらけで各サイトさんに助けてもらってなんとかサイトを作れています。最初の頃からこうしておけば楽だったかな…と思いましたので頭の整理と備忘録を兼ねてメモさせていただきました。お役に立てれば幸いです。

とあるココロのHP目録Ⅲでした
（*＾ω＾）

もし、このページの情報が少しでも役に立ちそうだな、役に立ったな、と思ってもらえましたら、気になる広告をポチりとクリックしてやってください。(｡･ω･｡)ﾉ凸”

記事を書く励みになります！
よろしくお願いします。
(* . .)⁾⁾ﾍﾟｺﾘっ