国立大AOで入ったら

AOで大学へ入学したら、その後の人生どうなるか？

機械音痴がhtml言語に挑戦してみた（1日目）

今日はタイトルの通り、新しい試みをしたので報告いたします！

 

 挑戦しようと思った理由

ずっと前から「勉強してみたいなぁ」と思っていたんです。

私は、ゆくゆくは自分のブログっていうものを持ちたいなぁと漠然と思っているんです。

そのための言語を学びたいなぁとこれもまた漠然と思っていた。

でも、私は何を隠そう大の機械音痴なんです。

どのくらい機械音痴なのかというと、学校のCDレコーダー？の使い方を毎回間違うレベル！笑

だから、「機械音痴だしなぁ、むつかしそうだなぁ」と敬遠していた。

が、昨日ある人とサイトを作るとかそういう関係の話をして、

「どんな感じかさわりだけでも雰囲気掴みたいなぁ」

と思い、一念発起、挑戦してみることにしました。

だから最終ゴールとしては、このブログをごそっと引っ越しできるようなサイトを作ることかな。

HTMLとは

ここは私の独自調査なので諸説ありだと思うので「そうなんだ～」くらいの気持ちで聞いてね。

サイトを作るために最低限必要な言語は３つ！

  • HTML
    文章の構造を示すために必要な言語。見出しとか、箇条書きとか、改行とか、そういうことを支持する言語のこと。
  • CSS
    色とかで文字やページを装飾するために必要な言語。特定の単語や文章に色つきの下線を引いたりすることができる。
  • JavaScript
    動きを再現するために必要な言語。

この紹介順で勉強していくのが良い、という紹介をしているサイトが多かったので、最初にHTML言語から勉強してみよう！ということになりました。

どうやって勉強するか

手式提供の媒体を選ぶうえで絶対譲れなかった点がこちら。

  • 超初心者向け。
  • イラストが多くて見てて楽しい
  • やってみよう！の敷居が低い

本で勉強しよう！と思ったのですが、

やっぱり本だとむつかしかったり、積読してしまいそうな予感がしたので、

サイトで勉強することにしました。

これなら、授業中に内職できるし、

わからないコードをコピーして、一度動作を確認してから実際に自分で打ってみる、とかもできるしね！

というわけで、参照サイトを以下に貼り付けます。

これ、初心者オブ初心者の私でもすっごいわかりやすかった！

https://saruwakakun.com/html-css/basic/html#five5

実際にやってみた！

必要なもの

とりあえず、

ブラウザ（表示の確認をするため）と、

言語を書くもの（テキストエディターと言う）だけです！

ちなみに、テキストエディターは、Windowsの人は「メモ帳」が入っているので、それを使えばいいのだとか。

私も今日はメモ帳を使いました。

ちなみに、近日中に無料のものをパソコンに入れようと思っています。

え、思い立ったらすぐ出来ちゃうじゃん、すご。

やらない理由が見つからない。

所要時間

えっと、あんまり大きい声で言えないのですが、今日の３・４コマ内職して作りました。

どんな言語やろうかなぁってしらべるのと、

HTMLやろうって決めてからどうやってやれるのか調べるのと、

実際に言語を学ぶのと、

実際に言語を使って作ってみるのと、

全部合わせて2時間いかないくらいかな。

言語を使って書いたもの

今日勉強して、実践できたものは以下のものです。

  • htmlだよーっていうことを示す骨格（一番上の奴とか、例えば<html></html>）
  • <p></p>…パラグラフ作成
  • <br>…改行
  • <ul><li></li></ul>…箇条書き
  • <img src=" " alt=" " />…写真の表示
  • <a href="　">〇〇〇</a>…リンクの作成

実際に作ったものが、こちら！じゃじゃん！

f:id:kaminomanimanix:20190621214637j:plain

実はもっといろいろ組み込みたかったんだけどキャパオーバーしたのでこんな感じ。

実際に表示してみたもの

さあ、せっかく作ったんだから表示してみたいじゃん！

どうやってやんねん！

ってところまで丁寧に解説してくださってました。参照サイトさん。

表示の仕方は簡単で、先ほどのメモ帳を一旦保存します。

この時、ファイル名の最後は「.html」にします。

で、そのファイルをブラウザにドラッグしてもっていくだけ！

あらあら！表示されました！じゃじゃん！

f:id:kaminomanimanix:20190621220857j:plain

見にくくてごめんなさい！これから取り方を工夫しようと思います。

ちゃんと見出しの部分が太くなっているのと、

箇条書きも反映されています。

あと、「参照サイト」っていうところをクリックすれば、先ほどこのブログに貼ったところに飛んでいくし、

写真もちゃんと表示されています！

すごい…！！！！できた！

 

感想・今後の抱負

表示されたときの感想がひとしおです。

涙涙。

でも、やっぱり噂通り、白黒の基本的な骨格のみ、という感じなので、

早くCSSを勉強して、色を付けたいですな。

 

本当は毎日触れてたくさん作るべきなんです。

でも、ほかにやるべきこともあるので、これは夏休み（8月？）にがっつりやろうと思います。

今は、毎週金曜日、腰を据えて勉強して、あとの曜日は自分の作ったものを見てニヤニヤすることにします。

 

これからもぼちぼち勉強の進捗状況を載せていきます！

パソコンめっちゃ苦手だけどかっこよさそうだし学んでみたい…って人はぜひ参考にしてね！

 

またね！