自作 HP 作成のための備忘録

• あかり描像のページ

↑ コレを作る上で考えたことや調べたことを忘れないようにここにまとめることにします。

とりあえず雑多な状態で公開しておきますが、随時更新予定。

目次

(筆者の) 環境

• Windows10
• WSL2 (Ubuntu 20.04 LTS)
• VcXsrv
• VSCode

KeyWords

• CORS

前提*1

Windows10 に Ubuntu を入れ、VcXsrv と fcitx を導入する。

• Windows11 の場合、 WSLg のお陰でデフォルトで GUI が使えるらしいので、Ubuntu を入れるだけで良いっぽい。いいね。
• Ubuntu は Microsoft Store で導入可。むしろ (後に更新することを考えると) そうした方が良い。
• (以下 Windows10 での話) VcXsrv はスタートアップに入れておくと楽。
  • WSL2 でやろうとすると案外難儀する。~/.bashrc等に以下を追記してうまくいくことを祈る。

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0

• 日本語入力メソッドはいろいろあると思うが、ここでは fcitx-mozc を使うことにする。

$ sudo apt install fcitx-mozc
$ export QT_IM_MODULE=fcitx
$ export DefaultIMModule=fcitx
$ export GTK_IM_MODULE=fcitx
$ export XMODIFIERS=@im=fcitx

をして、~/.bashrc 等に

fcitx-autostart

を追記すればいいと思う。シェル起動前に X11 が動いていないとエラるのでそこだけ注意。

おおまかな方針

• GitHub Pages で HTML + CSS + JavaScript する
  • About Github Pages
  • サーバー無料*2
  • Ruby, PHP, MySQL ... 等のサーバーサイドの言語は使えない
• VSCode
  • Windows 上にインストール*3
  • ターミナルを WSL2 にする*4
  • 拡張機能 Live Server を入れる*5

HTML のインクルード

PHP が使えないので必然的に JavaScript になる。

• jQueryのAjaxを使って外部HTMLの一部を抜き出し挿入する - Qiita

GitHub Pages でも SSI (Server Side Include) は使えるっぽいので、これでもできるかも？

ウェブ開発全般/Github Pages - yanor.net/wiki

テーマ

HTML の include 以上の何か抽象化をしないと全ページの一括レイアウト変更に対応できない。

• css + js でゴリ押し
• Jekyll
• HUGO

レスポンシブ

スマホと PC で表示を変えること。CSS 自作はかなり大変。勉強を頑張る。

• Bootstrap

更新履歴の管理

JSONの利用？

HTML & CSS Tips

dl/dt/dd の見た目をデフォルトの ul/li っぽくする

styling defaults を調べる。

• Styling lists - Learn web development | MDN

• The <ul> and <ol> elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em).
• The list items (<li> elements) have no set defaults for spacing.
• The <dl> element has a top and bottom margin of 16px (1em), but no padding set.
• The <dd> elements have margin-left of 40px (2.5em).

そのため、<dl> タグの padding-left を 2.5em にすればよい。

<dt> と <dd> にはデフォルトではマーカー (list-item) が付かないので、display: list-item; を付記する。

See the Pen Untitled by bakkyalo (@bakkyalo) on CodePen.

See the Pen Untitled by bakkyalo (@bakkyalo) on CodePen.

所感

無料で静的サイトを作れるのは魅力だが、更に凝ったことをやろうと思うと若干面倒な感じ。レンタルサーバーを借りるか、セキュリティー勉強して自作サーバー作ってやりたい放題してみたい感。

はてなブログや note といったサービスがいかによくできているかを痛感します。

*1:一番難しいところともいえますが、この辺は余り覚えてないのでざっくばらんにしか書けないです。ごめんなさい。

*2:1GB 未満の容量制限があるので、重い画像や動画は別の場所に置いた方が良いかも

*3:以前 WSL 側にインストールして Remote WSL で動かしていたのですが、あまりに重くなったので止めました。

*4:これは半ば趣味。cmd や PowerShell を使い慣れている方の場合はいらないかも。

*5:jQuery をローカルで試そうとすると、同一生成元ポリシー (Same-Origin Policy) に反すること多々。ローカルサーバーを構築すれば解決 (ローカルでもプレビュー) できるが、その中で最も手軽なのはこれな気がする。