投稿日：2025-11-22 /制作工程 /【4】

ウェブページを作る工程で、私がいちばん厄介だと思うのがデザイン。
なかなか納得できるものができず、何回作り直したことか……

まず背景画像を探し彷徨う……
風景画を求めてたどり着いたのが「きまぐれアフター」様のこちらの素材でした。

これだけではちょっと寂しいので右下に猫シルエットを配置。
猫シルエットは「シルエットデザイン」様の素材を使わせていただきました。
どーんと背景にして、少し全体の色を薄くしてみたり、コンテンツに半透明の背景色を敷いたりしてみたものの、ごちゃついてる感が否めず、最終的に右下部分だけが残って現在の形です。
上下に入れた水彩画のような柔らかい装飾は「イラストAC」で見つけた おかか様 の作品（ID: 22902963）です。
1枚絵を background-size: cover で表示していましたが、そうすると主にスマホでスクロール時に画像がカクっとなる時があるんです。ブラウザのアドレスバーが出たり消えたりすることで height が微妙に変化するのが原因。
それがどうしても気になってしまうので、右上と左下で画像を分けることにしました。
右上をbodyの背景で background-attachment: fixed にして、左下は position:fixed にした body:after の背景にしています。
コンテンツの配置も display: grid を使ってみたりいろいろ試行錯誤をしましたけど、最終的にシンプルが一番だと思ってたどり着いたのが現在のデザイン。

デザインって作る人の趣味嗜好が少なからず出ちゃうのは仕方ない。
作ったものを悉く否定され続けたのでデザインは苦手です。
でも嫌いなわけじゃないし、今のサイトは私らしいデザインで良いと思ってます。
流行とかテクニックとかあるけど、デザインは自分が好きなものを作りたいと思っちゃうからやっぱり私にデザインは向いてない……

投稿日：2025-11-11 /制作工程 /【3】

とりあえず「http://192.168.33.10/」で表示できるようになったけど、私はhtdocs内で複数サイトを運用できるようにしたかったのです。
そしてローカル用のドメイン、例えば「http://original-domain.local/」とかで表示したい。

まず、hostsファイルに下記のように追加します。
192.168.33.10 original-domain.local
メモ帳を右クリックして管理者として開いたら「Ctrl + O」でhostsファイルを開きます。
ちなみにWindowsだと「C:\Windows\System32\drivers\etc\hosts」がパスです。

しかしこのままではhtdocsがトップのままなので、「vagrant ssh」で仮想マシンに入ります。
ホスト側には「htdocs/original-domain」とフォルダを作成しておきます。
そうすると仮想マシン内では「/var/www/html/original-domain」で同期されるはず。
以下コマンドで設定ファイルを作成します。
sudo nano /etc/apache2/sites-available/original-domain.local.conf
「sudo」は管理者権限でコマンド実行、「nano」はUNIX/Linuxシステムで使えるシンプルなテキストエディタです。つまり、指定したパスで「original-domain.local.conf」という名前のファイルを管理者権限で作りますよってことです。
ファイルの中身は下記のとおりとしました。
<VirtualHost *:80>
　ServerName original-domain.local
　　DocumentRoot /var/www/html/original-domain
　　<Directory /var/www/html/original-domain>
　　　　Options Indexes FollowSymLinks
　　　　AllowOverride All
　　　　Require all granted
　　</Directory>
</VirtualHost>

「Ctrl + O」→「Enter」で保存、「Ctrl + X」で終了します。
作成した設定ファイルを有効化して、Apacheを再起動。
sudo a2ensite original-domain.local.conf
sudo systemctl reload apache2
これでブラウザで http://original-domain.local/ を表示すると
/htdocs/original-domain/ をルートとしたローカル環境が完成するはず！

途中、original-domain.local.confでちょっとミスって「sudo systemctl reload apache2」が実行できないトラブルがあったんだけど、下記コマンドで構文チェックして間違いを修正したりした。
sudo apache2ctl configtest
「Syntax OK」と出たら問題なし。

あと vagrant halt して再度 vagrant up したときに起動できなかったとか。
「vagrant up --debug」でエラーを表示させたら、Windows 側で「VirtualBox Host-Only ネットワークアダプター」に異常があったようで、下記のようなエラーが出てた。
VBoxManage.exe: error: Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host-Only Ethernet Adapter #2' (VERR_INTNET_FLT_IF_NOT_FOUND)

「VirtualBox Host-Only Ethernet Adapter #2」が無効になっていると。
「Windows + R」の検索で「ncpa.cpl」と入力してネットワーク接続の一覧を表示させたところ、確かに無効になっていたので有効にする。
しかし、上手くいかず…… PC再起動してみたら解決した。。

そしてもう1つ設定が必要なのが.htaccessの有効化。
初期では無効になってることが多いので、vagrantにSSHで入ってApacheの設定ファイルを開きます。
sudo nano /etc/apache2/apache2.conf

ファイルを開いたら「<Directory /var/www/>」の部分を探します。
nanoでは「Ctrl + w」で検索できますが「Ctrl + V」で貼り付けはできません……
<Directory /var/www/>
　　Options Indexes FollowSymLinks
　　AllowOverride None
　　Require all granted
</Directory>

真ん中の「AllowOverride None」を「AllowOverride All」にして保存。
「Ctrl + O」でEnter、「Ctrl + X」で終了し、Apache再起動。
sudo systemctl restart apache2
これで .htaccess も使えるようになって、サイト制作の準備は整ったはず。

投稿日：2025-11-10 /制作工程 /【2】

昔はXAMPPを使っていました。
しかし、ウェブデザイン技能検定1級の実技試験ではVagrantが使われるということで、普段から慣れておこうと開発環境をVagrantに移行することに。
もともとインフラ系の知識にも興味があったのでちょうど良い。

公式サイトから「VirtualBox」と「Vagrant」をそれぞれダウンロード。
Vagrantのダウンロードは「AMD64」と「I686」というのがあったけど、「I686」は32bit版Linuxや古い環境用とのことで64bit版Windows用の「AMD64」を選択しました。
私が使ってるPCは「Intel」だけどそこは関係なく「AMD」で良いそうです。
ちなみにインストール中に出てくる選択は「Yes」と「Next」で大丈夫でした。

インストールが完了したらとりあえずPCを再起動。
任意の場所にフォルダ作って、そこでターミナル開いて下記のコマンドを入力！
vagrant init ubuntu/focal64
「ubuntu/focal64」は2020年4月リリースのUbuntu 20.04 LTS（Focal Fossa）でサポート期限は2030年4月までだし勉強・開発用途ならこれで良いってちゃっぴーが言ってた。
（その情報を信じた私がバカだった……）
フォルダ内にVagrantfileが生成されたら今度はその中身の書換え。
初期のままだとただUbuntuが起動するだけらしいので、ちゃんとウェブサーバーとして機能するように、まるっと下記のように書き換えました。
Vagrant.configure("2") do |config|
　config.vm.box = "ubuntu/focal64"
　config.vm.network "private_network", ip: "192.168.33.10"
　config.vm.synced_folder "./htdocs", "/var/www/html"
　config.vm.provision "shell", inline: <<-SHELL
　　apt-get update
　　apt-get install -y apache2 mysql-server php libapache2-mod-php php-mysql
　　systemctl enable apache2
　　systemctl enable mysql
　SHELL
end

1行目：VagrantのVer.2形式で設定しますよ、という宣言。
　2013年頃にVagrant1.1で構文が大きく変わったそうで、今は"2"と指定するのが基本。
　config はこの中で設定項目を定義していくための変数。
2行目：どのOSの仮想マシンを使うか。ここでは「Ubuntu 20.04 LTS」を指定。
3行目：ホスト（自分のPC）からアクセスできるように仮想マシンのIPアドレスを設定。
　Vagrantのチュートリアルなどでよく使われる「192.168.33.10」を指定しました。
　VirtualBoxのHost-Only Adapterが「192.168.33.1」なので、同じ帯域で通信できるように。
　「33」の部分はVirtualBox側のAdapterと一致させておく必要がある。
　「10」の部分は2～254の範囲で自由に使ってOK。
4行目：ホスト側のhtdocsフォルダを仮想マシン内の/var/www/htmlに同期する設定。
　vagrantfileと同じ階層に「htdocs」を作ってそこにHTMLファイルとかを入れる構成。
5行目：仮想マシン起動時に実行するシェルスクリプトの開始宣言。
　provision は「初期セットアップ」を意味する。
6行目：パッケージリストを更新（定番）
7行目：Apache, MySQL, PHP関連のパッケージをまとめてインストール
8、9行目：ApacheとMySQLを起動時に自動起動するように設定
10行目はシェルスクリプトの終了、endは設定全体の終わりを意味する。

Vagrantfileを保存したら、ターミナルで「vagrant up」と入力して起動。
しばらくすると仮想マシンが立ち上がるので、ブラウザで「192.168.33.10」にアクセス。
「Apache2 Ubuntu Default Page」が表示されたらOK！

これでとりあえずhtdocsをルートとするウェブサーバー環境の完成です。