一回目－－HTML&CSS、テキストとタグ、<h1></h1>と<p></p>、<a></a>－－
どう書いていくか悩んでいます。
語り部の様に淡々と語るか、前回と同じように思ったことを綴るか、メモする様に読みやすい見直し易いようにするか。自分と同じような挑戦してみようかと思う人がいると仮定して、とりあえずは読み易い、見易い、見直し易い、を念頭に置き書いていきます。
読みにくいなどありましたら教えてください。
それではお付き合いのほどよろしくお願いします。
学習するうえで用意した物
・パソコン
これが無ければ何もできません。
・使うサイト
検索すれば出てきます。無料で登録するだけ。ただし、全てのレッスンを受講するには月額いくらか掛かるようです。
初心者におすすめのHTML&CSSをポチっとな。
・コピー用紙
学んだことを書いて覚える為。文章を省いて図解七割で書いておく。
因みに、基礎を学び終えた所でブログも考えています……が、疎かになりそうなのでちょっと思案中。
・筆記用具
コピー用紙に書く為。色も考えましたが、しっかり纏める時に行おう、かな？
以上を用意して行いました。
次は、使ってみた手応えの感想から書きます。
●気になる人が多いと思う『使い心地』
これはかなり良いのではないかと思います。
私は素人も素人、ど素人なのであくまでも今の段階での無知な私が思う所がそれです。
就職の時に名前を出すなりして役立つのかと言われたら首を傾げますが、学んだことを生かして何かを作ったのなら実績となるかもしれません。そして、その学ぶ為の知識がこのサイトにあると思います。
プログラミング系のブログやサイトは大概小難しく書かれていることが多く、素人の知りたいことが書かれていない、若しくは見つけられないことが多いです(主観)。
その点このサイトは初歩の初歩、HTMLとは何かという所から始まり、プログラムのプを覚えるのがとても簡単に思えます。まだ触っただけなので分かりませんが。
●何が良かったのか『内容』
何が良いかって言われたら『図解』です。
これ以外にもあるのですが、兎にも角にも全てに図解がある為分かりやすい、覚えやすい、印象に残るんですよ。前にも触れましたが、英語を覚えるにも文字ばっかりなんですよね。私達が日本語を覚えるのに文字だけを見て覚えましたかって話ですよ。物があって、説明があって、人がいて、間違えて覚えるんです。
まあ、図解と言ってもプログラミングですから文字ばかりなのは変わらないんですがね。
他にも文字が色分けしてあることや、重要な箇所は何度も表示されます。
一度で覚えられるものはあり得ませんから、『印象が強い』というのは良い事だと思いますね。
それでは、本題の学んだプログラミングについて書いていきます。
※ここで書くのは復習に近い感じになります。恐らく、かなり小説っぽくならないので他人の日記を覗いている感覚で読んでください。
１．HTML&CSSとは
HTMLとCSSは『Webページ』を作る言語の組み合わせ。
この二つを覚えることで普段目にしたり、利用するサイトが作れるということ。
基本も基本と言われるのが分かる言語です。
疑問なんですが、ブログもHTML言語を使っているんですよね？ なら、ブロガーの人は皆知っているということでしょうか。んなわけありませんよね(教えて)。
２．テキストとタグ
テキスト＝表示される文章。
直訳すると教科書や書類の様な感じなんですが、ここではサイト等に表示される漢字・ひらがな・英語・数字・記号等が該当します。
タグ＝テキストを示す印。
直訳すると付け札や値札等ですね。テキストの両端を囲む(最初と終わりに書く)ことで意味を持ちます。
タグには『開始タグ』と『終了タグ』があります。
両方文字通り『開始タグ』＝テキストの最初
『終了タグ』＝テキストの終わりに書いて置くもの。
注意として、『終了タグ』には【/】が必ず必要です。
(【/】――スラッシュ、キーボードの「め」の位置、三点リーダーを押す場所ですね)
例
<h1>プログラマーに！ 俺はなるっ！</h1>
<p>by049</p>
<h1>,<p>＝タグ、開始タグ
</h1>,</p>＝タグ、終了タグ
○○＝テキスト
注意点
・タグは<>で囲むこと(Shiftキーと「ね」と「る」)
・『終了タグ』に【/】を忘れないこと！
・面倒でも基本的にテキスト以外は半角英数字
・小文字と大文字も関係する？
・一つを作ったら別の分は下に書くこと(見やすくする為)
３．<h1>、<p>とは
<h1>＝タグ……という意味ではなく、<>の中身――何故『h1』なのかと言うことです。
簡単に説明すると、『h』＝『heading』。
直訳すると頭とか、サッカー用語とかなんでしょうが、ここでは『見出し』となります。
はい、『見出し』とは何ぞや、となりますね。
『見出し』とは、新聞で言う大きい文字で書かれた題名や記事内容が分かるタイトルの事です。
これはプログラミングでも変わらず、<h1></h1>で囲んだテキストを『見出し』として表示するということになります。
即ち、h＝『見出し』となります。
次に<h1></h1>の数字について。
この数字は番号なのですが、意味となると『文字の大きさ』となります。フォントサイズと言えばいいのでしょうか。
『1』～『6』まであるらしく、『1』が一番大きく太い字、『6』が一番小さく細い字で表示されるそうです。まあ、『見出し』ですから当たり前の変更を数字で変えると思えば良いでしょう。
次に<p>です。
これは『paragraph』＝段落。
普段使っているワードなり、エクセルなり、文章作成中にEnterキーを押すと改行され、下の段に移動するのと同じです。
<p></p>で囲んだテキストが一つの段落となり、表示されるときも一つの文章として改行されず表示されます。別の<p></p>で囲むと二つの段落文章が表示されることになります。
※<p></p>の中で改行しても見やすくなるだけで表示されるのは改行されない事に注意。
また、幾つかプログラムを書くと何が何なのか分からなくなることがあります。そういう時に<!--○○-->を使うと表示させない文章を書いておくことが出来ます。
『コメント』と言うそうで、製作者しか見ることが出来ないので簡単に説明文でも入れておくことの出来る機能でしょう。
４．<a>○○</a>について
『a』＝anchor、アンカーと読みます。
アンカーと聞いて思い付くのはリレーの最後の選手、船の錨、支えると言ったことでしょう。
ここでは『リンク』を意味するタグの事です。
※断じてエルフそっくりの緑の帽子を被った時を掛けるマスターなソードを持つ少年ではありません。
『リンク』とは、この小説を読むためにクリックした『次のページへ』や『小説家になろう』というテキストと同じです。
分かりやすく言うと、文字を右クリックしたときに『新しいタブで開く』と表示されるのが『リンク』です。
例
<a>ハンバーグ</a>
<a href=”url”>ハンバーグ</a>
上の文章は先に説明した通りとなります(ハンバーグというリンクへ飛ぶ)。
下の文章の『a href=”url”』とは飛び先を指定する場合に使います。小文字なので分かり難いでしょうがurlはURLです。『””』の中にURLを貼り付ければいいでしょう。
『href』は属性と呼び、定型文となるので覚えるしかありません。
基本的にプログラミングは社会や歴史と同じく暗記物と思っています。何度も打ち込んで覚えるしかありません。私は頑張りますよ。
注意点
・aとhrefの間はSpaceキーで空白を空けておくこと(これに限らず英語の文章と同じと覚えておく)
・URLは『””』で囲うこと(Shiftキーと2を押すと打ち込めます)
他にも学んだのですが長くなりそうなので、一旦ここで区切ります。
因みに、この文章はWordを使っていますが、プログラミングのコードを入力するエディターの多くは打ち間違い等を×印、色の使い分けで機能を示してくれるので分かりやすいです。打ちミスはデバッグという機能でエラー確認、修正が簡単です。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど」を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
あ、あと、ハンバーグ美味しかったです。
