脳筋が色んなサイト様にお世話になりながら個人サイトを作ろうという話（土台と最初の理解編）
こんにちは、大和亜季Pの端くれです。
今回は担当に似た(？)脳筋記事です。
依頼をして素敵なサークルロゴを作っていただき、気分が上がっていた私は「サイト作りてえな……」というモードになっていましたが、ここで大きな壁にぶち当たりました。
これまでワードプレスはサーバーのお試し登録を駆使して何回か試してみたけど、機能やテンプレに関してなかなか合わず。
無料サイト作成系は広告や容量が心許ない。
この際、出来るなら、htmlやCSSやらで出来るところまででカスタマイズしてみてえな、やってみたいなっていう、いつもの思いつきで始めようとしました。この記事もその思いつきの忘備録として残しておきます。
脳筋すぎる記録なので、多分ガチ勢が見たら卒倒するようことも書いていると思いますが許してください。
参考にするかは自己責任で。PC前提です。
やりたいと言っても、プログラミングのガチ経験もなければ、勉強や座学の類も苦手な私は理屈や細かい説明で覚えるのは多分キャパオーバーしそう。
じゃあ覚えるか、身体とない頭で。
と思った時にこちらのサイト様のサンプルに出会いました。
自由にカスタマイズして構わないとのことなので、こちらを元に学んでいこうとDL。
とりあえずこちらやその他解説サイト様で、サイト関連のファイル・フォルダの構想を学ぶ。
htmlは新規メモ帳で<></>を使い、headやbodyをはじめとした土台を作っておき(ここは沢山解説されてるのではしょる)、新しく保存する時に全てのファイルに設定を変えて、ファイル名の語尾を.htmlにするとhtmlに変わります。
やり方は忘れてしまいましたが、Google Chromeで開けるようにすると便利。
それとは別にCSS、imgのフォルダも作っておき、htmlとフォルダをまとめてサイト用フォルダに入れる。
これで自分用のサイトの最低限の形は完成。
（htmlになったファイルは右クリック→プログラムから開く→メモ帳などでエディタデータを呼び出せるのでそこから編集）
お次にCSSファイルを作ってhtmlと繋げました。
htmlを作るのと同じ要領で、末尾を.cssにしてcssフォルダに入れればOK。
とりあえずサンプルデータ様にあやかってファイル名はstyle。
<link rel="stylesheet" href="style.css"> これをhtmlのhead枠の間に入れたら先ほどのCSSが対応するようになりました。
htmlとCSSの関係性の解説やらは色々なところが沢山してるのですが、結局この二つどうするんだ！と割と時間を要したのでメモしておきます。
サンプルサイト様を見るに、他にCSSファイルを作ったときも、同じところに連ねていけば良いと思われます。
ここでサイトの壁紙が欲しくなったので、こちらのサイト様でカスタマイズした壁紙を保存します。
スペシャルカスタマイズ欄をクリックしたら課金かなーと思ったら無料だった。すごい。
壁紙を作ったら、style.cssのメモ帳の中にbody{}枠をつくり、backgrond-imageのコードを入れていきます。
背景画像をどう表示させるかなども人によって事なると思うので詳しくは検索してください。
ちなみに私がここで1時間くらい詰んでた理由は
・url(画像URL)
というコード解説のところがガチで「url」と入れるとは思ってなくて別の画像呼び出しタグを必死に入力しようとしていた(は？)
・上記のファイル構造だと、解説でよく見る相対パスうんぬんの問題対象にがっつり当てはまっているので、フォルダ名を指定する前に「../」を入れておく必要があった。
これはこの作業場がCSSフォルダに入ってる故に、一度前の階層(htmlとフォルダが入ってるところ)に戻ってから選ばせるための入力だとかうんぬん。
htmlの方のbody枠に適当に文字を入れてそれぞれを上書き保存し、htmlをウェブで開いてみる。
さて、ここまでもまあだいぶ酷かったですが(？)、ここからが本当の脳筋クオリティ。
上記のサンプルサイト様のデータと睨めっこします。
DLしたindexもstyle.cssもメモ帳で開いてメモ帳として新しく保存。
ここで自分のデータと区別がつくように参考元として「参考」などと名前を変えておきます。
そして各データの塊とひたすら睨めっこしたり、察したり、試しに改変してみたりします。
再配布になりそうなので詳しく書き出しはしませんが、サンプルの「このサイトについて」のセクションを丸ごと自分のhtmlに二つコピペする（とりいそぎ最初のところだけ書き替えてみる）。
自分のcssにはコンテンツエリアを丸ごと、ボックスの中エリアの.box h2の最初までをコピペしてみる。(ボックスの中エリアは長いのでお試しという感じで)
例えばですが、
.box h2内のborder〜というところを消したら、「このサイトについて」の下にあった線が消えた。戻したら復活した。
pxの部分をいじったらその線が太くなったり、細くなったりした。
htmlの方を見たら、大きな見出しがh2で囲われている。
なるほど、.box h2｛｝内の設定がここに適用されてるんだな。
ここどうもカラーコードっぽいな？
よし、検索して拾った他のカラーコード入れてみて、どこがどう変わるか試してみよう。
background-color(バックグラウンドカラー)はもう文字のまんまだから、ここにもカラーコード入れてみちゃえ。
などなど。脳筋にも程がありますが、サンプルの土台をコピペ→気になる項目を名前で察したり、調べたりしてみて、試しに入力→上書き保存→ Chromeで開いたサイト更新のを繰り返す。
まだサーバーを借りてない叩き台だからこそ(？)自由にやれるとも言える。
たぶんいにしえからのサイト愛用者はこれを何年も前に通った道なんだろう……となったりもするけど。
気になったところを消したりして、上書き保存からのサイト更新でどう変わった？を繰り返すとなんとなく見えてくるものがありました。
大切なのはわからなくなることを防ぐために、一個一個単位で試すこと。
そして気になったらコード名を検索。いまは便利な時代なので検索したら解説が沢山あります。
どのコードが文字やセクションの間隔を制しているコードかなど、テンプレートを使って改変や勉強をする時は、察する・試す・調べることが重要なのかなーと思います。
ボックスにかわいいデザインを加えたくなったので、こちらの14.布風のCSSをお借りします。
こちらのテンプレの.box14の14の部分を消してcssの(既にある.boxの塊の下に)そのまま貼り付け。
わかりやすく上に/＊ ボックス装飾 ＊/などタイトルをつけておく。
更にここからまた「察し」をする。
ボーダーとピクセル数、ホワイトと書かれてるものは白と大きさを意味しているからステッチ部分っぽい。→ピクセルを変えたらステッチの太さが変化した。
あとの二つはカラーコードらしいので他の色に差し替えてみる→ステッチの内側と外側のカラー指定だった。
なんかさっきとボックスの位置が変わってしまうけどなぜなんだろう？→marginというコードの入力が関わってるらしい、下に新しくあるとそっちのが反映されるくさいな？？
などを試して出来たのがこちら。
時間はかかりますが、パーツやコードごとに一個ずつ試してみることが恐らく理解を深めるコツだと思います。
一気にやりすぎたら何もわからなくなりますからね。
現に上の件で1時間詰んでたときは「なんでや！私の何が悪いんや！！」とまるで夫に縋る嫁のようにあちこち更新してはキレてましたし。
見よう見まねのコード入力でサイト作りをするのの何がつらいって、ダメだったとき何がダメかわからないことだと思うので。
こういう、好きにしちゃって良いよ！と言ってくださってるところ(重要)のテンプレートを土台にして、少しずつ要素のコンテンツの塊を移してからの察する、試す、調べるをしていけば、少しずつ覚えながら好みの要素が作れるんじゃないかなって思います。
ちなみに上記のサンプルサイト様は画像や文を差し替えるだけでもそれっぽくなるよと仰ってくれてますが、差し替えどころで混乱しそうなのでまず諸々を覚えてからギャラリーなど作りたいなと思った所存でした。
と、ここまでがひとまずの忘備録です。
参考元のStyleのボックスコードの塊を移したら今度はどこが変わるのか？などを考えると時間はかかりそうですが、楽しく出来そうですね。
そして何か違うことをやりたかったら、他所のコピペOKのCSSを見つけて試してみれば良いでしょうし。
上記サンプルにはスマホ用の表示に対応させるCSSデータもあるので、そちらも観察しながらいけるところまでやっていきたいと思います。
多分先人たちは上記みたいな便利サイトやテンプレ共有もそんなにない中でたくさん本とかで勉強してきたかと思うとすげえや……今は便利な世の中だなぁ……
続きは……あるかは不明！（私のやる気や気分で左右されるため）