htmlでサイトを作ろう-1

注意:htmlやjsやcssの記述ルールはネットで「html 初心者 コーティング」とかで調べたら出てくると思うのでここでは説明しません。

注意:使うOSはWndowsですのでMacの方でもわかるように書くよう努力はしますが、一部通用しない部分があるかもしれません。

*1 拡張子:ファイルの種類を明示的に記すためのファイルの記述子(詳しくは「拡張子とは」で調べてください)

 

今回は、htmlファイル作りまで説明します。

 

最初に、ファイルを作成しましょう。

拡張子*1を先にhtmlに変えてしまうと、ファイルを開くプログラムを変更しなければならないので今回はtxtのままで編集して、htmlに変えて開きます。(エディターを使えばややこしいのはスキップできます。)

ファイルを追加する画面で、テキストファイルが追加できるのを選択して好きな名前に変更してください。

「テキストドキュメント」を選択し「サンプル.txt」を作成

.txtファイルの作成(初期設定では拡張子は表示されない)

次に、表示する内容をそのテキストファイルに書き込みます。

簡単に文字をそのまま書いてもそれが表示されるので何か好きなのを書いてみてください。(そのままダブルクリックすると設定されているプログラムで開くと思います。)

テキストエディタで「Thank you for reading!」というテキストを書き込んでいる

テキストファイルへの書き込み

そして、拡張子を変更します。

初期設定では拡張子が表示されないためで拡張子を表示させます。

「表示」->「表示」->「ファイル名拡張子」でできると思います。

エクスプローラアプリにて「表示」>「表示」>「ファイル名拡張子」にチェックをつける

拡張子の表示設定

 

最後に、初期設定で何らかのブラウザのアイコンが表示され、それで開くようになっていると思いますので、そのファイルをダブルクリックしてみてください。

ブラウザ(疑似表示)での先程作りましたファイルが表示されている

ブラウザでのファイルの表示

(たぶん、テキストファイルのままブラウザで表示されても同じ表示にはなると思われます。)

 

完成です。以下によくある疑問を載せておりますので読んでください。

 

part2以降も書いていこうと思っておりますので、ぜひ読んでもらえると嬉しいです。

 

 

よくある疑問...

 

Q. 「.txt」とか「.html」の拡張子はどうやって出すの?

A.  ここにあります。

 

Q. 「sample.html」にしたのにテキストファイルと認識されるのはなぜ?

A.  拡張子を表示してみると「sample.html.txt」となっていると思われます。

拡張子の表示方法はここにあります。

 

ありがとうございます

誤った情報が含まれている可能性があります。

これは2025年08月17日に最終編集されています。

広告は使っているプラットフォームの仕様ですのでご了承ください。

 

追記:この方法を試して少しでも面白いと感じてもらえれば幸いです。

ビットマップ形式のアイコンファイル

ふと「ビットマップ形式のアイコンファイル」と検索すると要約的なところに「.bmpを.icoで保存すると出来上がる」とかが出てきました。

意図したのはアイコン(.ico)の中の画像データがPng形式ではなく、Bitmap形式である(.bmpとして使えるのかはわからない)のでありました。

ちなみに、そのBitmap形式はANDビットマップ(形式は問わないと思われる)とXORビットマップで構成されています。

たぶん、古いのは拡張子を変えるだけ(24bitビットマップ.bmpファイルとかから)でよかったと思います。(記憶によると)

ただし、.icoにはICOヘッダーが含まれている(.curも含めて)のでそれでは対応できないと思います。

faviconやアイコンファイル生成ソフト、マウスカーソル生成ソフトなどはPng形式のデータが含まれているアイコンファイル(.ico)やカーソルファイル(.cur)か、ビットマップ形式のアイコンファイル(ビットマップアイコン)やカーソルファイルのどちらが出力されているのかが気になってます。

1つだけ知っていることを書くと、アニメーションカーソル(.ani)はビットマップカーソルにのみ対応しているらしいですね。

 

* ビットマップアイコン:ビットマップ形式のアイコンファイルで拡張子は.ico

* ビットマップカーソル:ビットマップ形式のカーソルファイルで拡張子は.cur。

 

一応、使っていただきたいので載せておきます。

tools.imqutive.f5.si

tools.imqutive.f5.si

tools.imqutive.f5.si

 

ありがとうございます

誤った情報が含まれている可能性があります。

sitemapとfeed.xmlを自動生成するpy

参考程度にpythonのコードをあげておきます。

sitemapとfeed.xmlを自動生成する効率的なコード。

プラグインとかなんやらがあるけど、Webホストサービスとかにhtmlやらをアップロードする程度に使うくらいなら全然使えると思う。

github.com

それに加えてzip圧縮したいならこれとかも使える。

github.com

ありがとうございます。

【2025年最新】簡単!アニメーションカーソルの作り方

オリジナルのアニメーションカーソルを作っていくとともに、その手順を説明します。(めちゃ簡単!)

使うツールはいつも使ってるやつです。

 

まず、それに使う画像を用意します。(サイズは最大で256×256になるようにして、PNGBMPがおすすめ)

 

今回はこれを使って説明します。

https://torisima.f5.si/ha-i/ha-i.cursor.png

 

使うツール

tools.imqutive.f5.si

tools.imqutive.f5.si

 

はじめに、1つ目のツール。画像を「ファイルの選択」で追加します。もろもろの設定は画像の下!そして、「生成」をクリック。

aniの生成のイメージ

その時に設定する「レート」にはそれぞれのフレームごとの表示時間(単位はJiffiesで1/60秒を表す)、「シーケンス」には表示する順番に画像の番号を入力してください。

それぞれ画像の番号は0からで、数字どうしをカンマで区切らないといけないので注意。

(同じ画像を複数回使うときでも複数回アップロードせずにシーケンスで画像番号を指定すればいい。)

ホットスポットの画像」はクリックした時に画像のどの座標がクリックされたとするかという座標のこと。らしい。

 

これで、完成です。一応、プレビュー表示を見てみましょう。

 

2つ目のツールで、「cursor.ani」をアップロードして「更新」を押すとプレビュー表示されます。

 

これできちんとできていることが確認できました。

 

画像ごとにホットスポットを変えたり、それぞれのフレーム(画像)ごとに複数のサイズを設定するように、詳細設定したいときは以下のサイトがおすすめ(*カーソルを作ってそれを変換する形らしい)(ただ、bitmap形式のカーソル?みたいなのじゃないといけないらしい)

tools.imqutive.f5.si

 

【2026最新】主要なクローラーの名前一覧66個|robots.txtの設定に必須!

また使う機会があるかもしれないので書いておきます。

robots.txt のUserAgentに使えます。

主要なクローラーだけなので、書きそびれているクローラー名もたくさんあると思います。

それに、robots.txt を無視するのもあるので注意。

以下、66個。

AdsBot-Google
AdsBot-Google-Mobile
Applebot
APIs-Google
archive.org_bot
Baidu
Baiduspider
Bingbot
BUbiNG
CCBot/2.0
Daum
dotbot
DuckDuckBot
Exabot
facebookexternalhit
facebot
Feedly
Google-CloudVertexBot
Google-Extended
Google-InspectionTool
Googlebot
Googlebot-Image
Googlebot-News
Googlebot-Video
GoogleOther
GoogleOther-Image
GoogleOther-Video
GPTBot
ICC-Crowler
ImqutiveBot
itx71
Linespider
Mail.RU_Bot
MegaIndex.ru
Mediapartners-Google
msnbot
Pockey
proximic
psbot
rogerdot
SeznamBot
Slurp
Sonic
spider
Storebot-Google
Steeler
Swiftbot
TurnitinBot
Twitterbot
360spider
Y!J
Y!J-ASR
Y!J-BRJ/YATS
Y!J-BRY/YATSH
Y!J-BRZ/YATSHA
Y!J-BRU/VSIDX
Y!J-DLC
Y!J-HRZ/1.0
Y!J-MMP/dscv
Y!J-VSIDX
Y!J-WSC
YJ-SAD
YaK
YandexBot
Yeti
YoudaoBot

 

 

urlで遊んでみた

今回はhtmlとjsを使ってurlで遊んでみたいと思います。(2025/07/27)

 

まず、1つ目!

拡張子が「.zip」なのにあたかも動画ファイルを読み込んだかのように、ネットから拾ってきた動画が再生されるファイル。(変なcookieとかあやしいものではありませんのでご安心を)

torisima.f5.si

仕組み : 「.htaccess 拡張子 省略」で検索してみてね!

 

 

次に、2つ目!

urlが時間変化するファイル。(処理を簡単にするために時間で文字数が増えるように設定しています、存在しないurlなのでリロード等にはご注意ください)

torisima.f5.si

仕組み : 「js history.pushState 使い方」で検索してみてね!

 

ありがとうございました。

誤った情報が含まれている可能性があります。

利用規約とかなんやら

どうも法律的に利用規約の明示的な同意が必要ならしい。

当然ながら、利用規約とかプライバシーポリシーとかが存在していて、それに則って運営されているのに各サービスのページに見てわかるところに配置していないといったことは無効とみなされかねない。

例えば、「本サービス利用時点で本規約に同意したものとみなされます。」みたいないわゆるみなし同意も無効とみなされる可能性が高いとか...

 

けれど、例えばwebツールを提供しているなら、アクセスした途端に使えなくて、利用規約読んで同意させられるみたいなのは、使用者側からしても製作者側からしてもややこしくなってしまう...

 

どうでもいいような内容の規約ならまだしも、個人情報をとっていくサードパーティCookieとかを使うのであれば最初に挙げたような例のものがあると困る。

 

ありがとうございました。

誤った情報が含まれている可能性があります