明日から使える中二病のためのHTML講座
今回は中二病がのあなたが授業で使えるHTMLのテクニックを紹介します。
■対象
明日パソコンの授業がある学生
HTMLとは
あなたが見ているこのページも「HTML」という言語が基本で作られています。ちなみにHTMLとは「ハイパーテキストマークアップランゲージ」の略です。なんか凄そうですね。
ごちゃごちゃ言うより実際みていたほうが早いのでみんな大好きgoogleホームページのHTMLを確認してみましょう。
goolgeのトップページを開いたらF12を押してください。
インターネットエクスプローラーで見た場合画像の円に囲まれた部分にそのページの構成が表示されます。
まず最初に<html lang=”ja” itemtype=”http://scema.org/webPage” itemscope=””>という行があると思います。
これはHTMLの設定のようなものと思ってください。
次に<head>…</head>の行ですが、ヘッダーを呼ばれる部分を括弧の間に書きます。横の三角のボタンを押すと中身をみることができます。このページで言うとgoogleのロゴの設定などが書かれています。
そして同じように<body></body>の間にもこのページの本文が書かれています。このぺージでいうと検索ボックスとか書かれた部分ですね。
最後に</html>で終わります。これらの<>はタグと呼ばれるもので見てみるとかなりシンプルなつくりとなっているのがわかります。
googleのロゴで遊んでみる
ではもう少し具体的にみていきましょう。
丸で囲んだアイコンを選択してください。その後にgoogleのロゴをクリックすると<divから始まる部分が表示されたと思います。その中で
ここに書かれた数字をダブルクリックした下さい。すると数字を編集できるようになるので800と入力してみてください。
はい、ロゴのサイズが変わりましたね？このようにサイズなどは簡単に変えることができます。明日隣の席の同級生に「googleのロゴを変えてやったぜ」と自慢しましょう。他にもここに書かれた数字をかたっぱしから変更してみるのもいいでしょう。もとに戻したくなったらF5(更新)ボタンを押しましょう。どれだけ変えてもあくまで自分のパソコンの中だけのことなので、更新すると最初の状態に戻ります。
最後に
この記事ではインターネットエクスプローラーで紹介しましたが、ブラウザにはこういう「デベロッパーツール」という機能がついています。意味的には開発者ツールと呼ばれるもので開発者が表示の変更などを確認するときに使います。グーグルクロームもF12を押すと同じようにデベロッパーツールが表示されるので紹介したようなことができます。
今回は数字を変えてみましたが、「タグ」の意味を調べてみることでここを変えるとこう変わるというのがわかるので興味を持った人は調べてみるといいでしょう。
- soon
1986年生まれのjavaプログラマー。28歳の時に7年働いた販売士からプログラマーに転職をする。常駐先を転々としながら日々生きています。
- 現状整理の日記 2023-03-15
- おやすみ、世界。 2023-02-11
- 動画投稿に時間を割いてしまう 2022-08-31
- 7月の日記 2022-07-06
- 更新していなかった間にしていたこと 2022-06-23