なとりの乗務記録

どうすればいいのでしょうか。だんだん限界ブログになりつつあるんです。

一人ハッカソン「1日でHTML+CSSを覚えて公開しよう」

一昨日でブログも書き納めだったはずなのですが、また余計なことをしたので記事化します。

 

いい加減ドメインを有効活用しよう です。

 

 

Mastodonを閉鎖して早半月。

 

このまま放置しておいてもしょうがないので、ランガに関係するリンクのページでも作って活用しよう!

 

なので、

「1日でHTML+CSSを覚えて公開しよう」

をやりました。

 

 

以前も言ったように、

・工業高校でC言語をやった

Mastodonを建てようとして挫折した

UbuntuあたりのLinuxは使える

 

この程度の能力でどこまでできるかという問題。

 

無論HTMLとか怖くてやったことがないので実質初挑戦です。

 

 

・情報収集 (9:20~)

無になったMastodonを開いて、「よし!いい加減何とかしよう!」

とスタート。

検索エンジンというものは偉大なもので、あっという間に使えそうなページに到達。

今回はこのページを参考にしました。

saruwakakun.com

 

 

・ゼロからはじめるHTML(9:35~) 

C言語みたいにメモ帳でいけるやろは、一瞬にして崩れ去りました。

 

なんかめんどくさいらしい(適当)

なので、言われるがままにテキストエディタの「Sublime Text」を導入。

なんかこういうのどっかで見たなーと思ったらLinuxのコマンドシェルみたいな感じだと気づきました。

f:id:natorin2398:20181231171144p:plain

以後こんな感じで見ながら書いていく感じに。

 

 

やり方としては、基礎的なコードをコピペしながらいろいろ書き加えて行く感じのシステムでした。

 

最初からコピペできるのは楽でいいですね

 

コピペしないで手打ちしました。

f:id:natorin2398:20181231171340p:plain

まずはこの文章をHTMLで書くことに。もう表示しちゃってるのですが。

 

C言語で言うところのHello world!みたいな地点でしょうか。

 

ここからヒイヒイ言いながら進んでいきます。

f:id:natorin2398:20181231171948p:plain

ここでは文字を変えてみようとなっていたので、実際に使う予定としての文章へと変えてみました

 

Chromeで表示した結果。

f:id:natorin2398:20181231172347p:plain

とりあえずお前なら404の偽ページでも作れるんじゃね?くらいまではたどり着きました。

純粋にここまで書ければ偽の404ページは作れそうです、懐かしいですね(棒読み)

 

 

 ・リンクと箇条書きを覚える(9:50~)

 今回使う用途としてはこの2つが大事です。

 

まずは箇条書き。

枠の中に枠作ってまた枠作って箇条書きで使う<ul>と<li>で項目を作っていきます。

今回は番号とかは必要ないので、純粋に黒丸になるようにしました。

書き換えるときはliタグの中に要素を書き込む感じなんですね。

f:id:natorin2398:20181231175129p:plain

項目ができました。

 

 

次はリンクの貼り方。

aタグでリンク先URLとリンクテキストの書き方。

ちなみにこれを書いている途中に別タブで開くようにする方を発見したのであとで直しておきます。

通りでこのページから直接飛ぶようになってたわけでした。

f:id:natorin2398:20181231174052p:plain

 1個目の項目にランガの公式サイトを表示することに成功。

liタグ内にaタグのリンク入れるだけでした。

 

 

 ・自力でタグを書き込む(10:00~)

一見調子よさそうですが割とそうでもないです。

 

ここからはliタグを増やし、ランガちゃんに関係あるページのリンクをaタグで書き込んでいく作業です。

f:id:natorin2398:20181231175752p:plain

 はやまるかわいいですよ。

 

…そんなことしている場合ではありません、さっさと項目を増やしていきます。

 

途中書き込んで表示しての繰り返し。

 

途中途中に改行タグ入ってますがなぜか文字間隔が適切ではない箇所が多発したので、何がどうなってんのかさっぱり分からず。

全消ししてみたりしたのですが、偶然改行タグ見つけて無理やりねじ込みました。(これは後々治りますが)

f:id:natorin2398:20181231180228p:plain

 そんなこんなでここまで到達。

8割方他力でも自力にしてはかなりです。

 

 

CSSも使う(10:20~)

ただの白黒ページではしょうがないので、CSSも使って多少なりともまともなページにして行こうと思います。

 

の前に、

 

CSSはどこに書くの?

と。

 

どうやら3種類ある様子。

今回は参考ページの通りかつ、楽にしたい(学ぶものにあるまじき発言)ので、HTMLファイル内に書き込むようにしました。

 

 

このタイミングで行間を調整するコードを見つけたので参考にしました

yume.hacca.jp

 

さらに空白行を挿入するのも発見したのでこちらも導入。

naifix.com

 

brで連続改行、Mastodonの管理画面でやった記憶があるので無知は怖いねになりました。

 

下手くそでどうしようもなくて、探していたものだったのでとても助かりました。

 

 

これで「line-height」で行間の幅を、

「margin-bottom」で空白行の挿入を、

「backglound」で背景色を変える

 

の3つを増やすことができました。

 

結果としてどうなったか。

f:id:natorin2398:20181231183134p:plain

 

…いつの時代のホームページを作ってんだ俺は。

 

なんかいろいろ助けられないものができました。

 

コードが汚いのはもう勘弁してほしいけれど、出来上がりの結末がこれなので…

 

 ショッキングピンクにして文字色白にしてもいいかもしれませんね!

 

 

冗談はさておき、一応完成形までたどり着いたのがこれ。

f:id:natorin2398:20181231183623p:plain

 

人に見せられない何かだ。とりあえず2時間でここまで来たのでMastodonを建てようと挫折した時よりは上出来でしょう(個人的感想)

 

 

・飯(11:30~13:00)

今年最後に長尾中華そばにまた行きました。

 青森で病気の如くハマってしまったので。

 

 

・サーバーを借りよう(13:20~)

家で公開なんぞしたら家がサイバー攻撃に遭うので借りました。

 

サーバーで思い出したのですが、家にラックサーバーが眠ってました。

忘れてました。

 

Mastodon立てて失敗した時にAWSを使ってたのですが、

AWSの無料期限がとっくの昔に切れていたのでさくらインターネットへ。

f:id:natorin2398:20181231184517p:plain

 

WordPressは未使用(というか使ったことない)ので、一番安いライトプランでこのページの公開を目指します。

 

初の管理画面へ。

f:id:natorin2398:20181231185020p:plain

AWSと全く違うのでキョドりました。

ちゃんとしたサポートページもあったのでそこまで苦労はしませんでした。

 

 

インスタンスを潰す(14:00~)

無慈悲ですがドメインを使うので当然です。

f:id:natorin2398:20181231185447p:plain

潰しました。1年5か月の短い命でした。

 

 

・サーバーの設定をする(14:10~)

ここからは公開するために設定やらアップロードをします。

f:id:natorin2398:20181231185736p:plain

 

ドメインのネームサーバーを変更し、先ほど作ったHTMLファイルをアップロードして。

いちいち面倒と思うか、こうやって作るのかと思うのか。

 

ネームサーバーの変更に時間がかかるらしいので今日中に公開することは叶いませんでした。

 

 

とりあえず当初の目標、「1日でHTML+CSSを覚えて公開しよう」のうち、

HTML+CSSの書き方は覚えることができたという結果でした。

 

最初から綺麗なものはできないのは当然なので、これからまたいろいろといじって覚えていくしかないでしょう。

なんというか、Mastodon立てるよりは簡単だった気がしました。

HTMLすらできないでMastodon作ってた私がアホだったのでしょう。

 

なんか大晦日を無駄使いした気もしないことはないですが、いい勉強はできた気がしました。

 

 

 

それでは明日は仕事です、良いお年を。