HTMLとJavascriptを我流でやり続けたよつやのメモ帳教室、始めました!

こんにちはよつやです。
寒い。寒いです。とてつもなく寒いです。なんでこんなに寒いのでしょう。暖冬だとか言われてますが、嘘でしょ?ねえ、嘘でしょ??
あ、天気予報って嘘つきみたいな風潮あるからきっと天気予報が嘘つきなだけだよね、そうだよね。だって現にすごく寒いし。
さて、今日は家に一日中いたのですが、それでもすごく寒いです。外に出たらもっと寒かったのでしょうね。
明日は出かけないと行けないのでちょっと防寒も考えないといけないですね。

さて、新しいジャンルを始めることにした。その名も「メモ帳は素晴らしい!」ということでやらせていただきたいと思います。
なぜこんな新ジャンルを始めるかというと、そもそもこのブログ、ジャンル登録上はコンピュータジャンルなのにこの一週間を不利買ってみるとコンピュータに関する記事はなんとゼロ!しかもそんな状態で「IT Express」なんて名乗ってるんですよ、奥さん。
しかし、最近コンピュータ関連の記事が書けなくなっているのには2つ理由があって、一つは海未ちゃんドールが可愛すぎてコンピュータのことを語ってる場合じゃねぇ!となっていること。もう一つは大学後期から予想以上に忙しくなってきてコンピュータの記事を書くための下調べがあまりできなくなっているということ。
というわけで、時間が無い時は自分の知っている知識の中からネタを出そう!という考えの元、ここ1年ちょっとずっとHTMLとJavascriptのプログラムを書いていたので、超初心者講座ということでそれらのことをやっていきたいと思います。
ちなみに、注意事項ですが、一応大学の授業でHTMLはやったことがあるのですが、その後HTMLを書き始めたのは授業が終わってからしばらく経っていたため、ほとんど独学+我流という最悪な状況です。
なので、変なところとかあるかと思いますが、ぐっとこらえていただけたらと思います。
間違っても、正しい知識を身に着けたいという人は見てはいけません。

まず、プログラムを書くときにはエディタというものが必要になります。しかし、心配ご無用。Windowsにはすでにエディタがあります。
それが僕が最近愛してやまないメモ帳です。ちなみに何度か紹介している自作カーナビは基本的にはすべてメモ帳で書いています。というわけで、メモ帳でも全然問題なくプログラムを書くことができるわけですね!(ただ、大学とかでは異端児の目で見られてしまいますが・・・)

というわけで、まずは導入編。
まず右クリックをして「新規作成」から「テキストドキュメント」を選択してテキストを作ります。
1_20151226230236847.png
そしてこのドキュメントの名前を変更します。
ここで重要なのは最後に「~.html」という風にすること。そう、ひらがなで書くと「どっとえいちてぃーえむえる」ですよ。
2_20151226230238b31.png
するとさっきのドキュメントがHTMLのファイルに変化します。
もし、HTMLファイルにならないという方はフォルダオプションからこの青枠の部分のチェックを外してみてくださいね。
3_201512262302390de.png
これはWindows7ですが、確かWindows8だと上のリボン上にこの項目があった気がします。やっぱりできる子Windows8。

さて、じゃあ早速HTMLを書いていきたいと思います。
しかし、問題があります。それはフォーマットです。普通の開発環境なら最初から基本的なフォーマットは書いた状態で出てくるのですぐプログラムを書き始めることができるのですが、メモ帳の場合、元々”メモ帳”でメモをするためのアプリなので、真っ白です。どこかの洗剤のように”驚きの白さ”です。
というわけで、基本的なフォーマットを自分で書きます。
4_20151226230241545.png
書くとこんな感じ。HTML4時代はDOCTYPE宣言はかなり長々と書かなければならず結構めんどくさかったのですが、HTML5では<!DOCTYPE html>だけでよくなったのでかなり楽です。
解説をしておくと、headという部分はHTMLファイルが読み込まれた時に最初に実行する物。そしてここに書いたものは基本的にはブラウザ上には表示されません。もちろんスクリプトからdocument.writeすれば表示できますが、そんな使い方は基本的にしません。
Javaとかが書ける人向けに言えば、コンストラクタみたいな物です。まあこれが理解できる人はすでに超初心者では無いのでまったり行きましょう。
また、<>の中に色々かいていますが、これをタグと言います。ニコ動とかのあれでは無いですよ?そう、だからこのタグを神がかった使い方をする人のことをタグ職人というわけでも無いですよ?ここには文字の大きさや段落の指定など簡単な命令を書いていきます。

というわけでとりあえず、百聞は一見にしかずです。とりあえず基本的なタグを使って見ましたので、メモ帳の画面と実行画面を見比べてみてください。
まずはメモ帳の画面。
5_20151226230235c60.png
次に実行画面。
6_201512262302493ce.png
h1とか言うのは題名を書いたりするときに使うものでhのとなりにある数字が小さくなるほど文字が大きくなります。一番大きいのは1です。
また、HTMLでは入れ子という形で既述します。例えばさっきの題名のやつだとh1と書いたら必ず終わりには/h1と書かなければなりません。

しかし、実は入れ子にしなくてもいいタグというものが存在します。その例としてimgタグというのがあります。
というわけでまずはメモ帳から見てみましょう。
7_201512262302495ce.png
そう、img~って始めてるのに終わりの/imgがありません。これを単独タグと言います。
ちなみにさっきの例で出した改行を意味する<br>も単独タグです。
これを実行するとこんな感じです。
8.png
ああ、海未ちゃん可愛い。普段みたいに髪をおろしている姿も素晴らしいですが、弓道の時に見せる結んだ姿もいいですね。
この画像のように結ぼうとしているところなんて最高に可愛いじゃないですか!普段凛としている海未ちゃんがこういう姿を見せると世界中の男性は間違いなくノックアウトされてしまうのでは無いでしょうか?いや~そりゃ可愛すぎて萌死にしますよね?(あれ?萌とかもう死語な気が・・・)

というわけで、今回はこの辺で終わりにしたいと思います。
繰り返しますが、これを書いた本人が独学+我流でやってきているため説明はかなりへんてこです。まあ、こんな感じでWebページって書いてあるんだなって位に思っていただければ幸いです。

いかがでしたか?
ではまたお会いしましょう!
今日もいい日でありますように!
スポンサーサイト

コメントの投稿

非公開コメント

プロフィール

よつや

Author:よつや
こんにちはよつやです。
主にPC関係の記事を書いていきます。
コメントやメッセージ大歓迎です。
相互リンクなども遠慮なくお申し付けください!

アクセスランキング
[ジャンルランキング]
コンピュータ
383位
アクセスランキングを見る>>

[サブジャンルランキング]
その他
80位
アクセスランキングを見る>>
twitter
カテゴリ
最新記事
RSSリンクの表示
最新コメント
最新トラックバック
月別アーカイブ
ブロとも申請フォーム

この人とブロともになる

リンク
検索フォーム
RSSリンクの表示
QRコード
QR