夫婦2人とわんこ1匹。好きなものに囲まれて暮らす。

好きなものに囲まれて暮らす。

夫婦とトイプードル凪(なぎ)との2人+1匹暮らし。いろんなことに「オタク」な「なぎパパ」、「ショッピング好き」の「なぎママ」が好きなことを綴っています。凪との暮らしも公開!?

いまさら聞けない「html」について。

スポンサーリンク


html入門

初にお伝えしておきますが、こちらの記事はhtmlの基礎の基礎の基礎の基礎の・・・レベルですので温かく見守っていただければ幸いです。どちらかと言うと「ブログを始めたけど、やたらhtmlという単語が出てくるねん。なんやコレ。」という方に向けて書いた記事です。事実、私もそんなに詳しくはありませんので(;^_^A一緒に勉強していきましょう~。

htmlとは?

そもそも「html」(エイチ・ティ・エム・エル」がわからないですよね。「html」とは、Hyper Text Markup Languageの頭文字をとったもので、私たち人間とコンピュータとの「共通言語」です。インターネット上に存在するホームページはほぼhtmlで作成されているのではないでしょうか。

htmlとの出会い

自分の話になっちゃいますが、私とhtmlとの初めての出会いは20年以上前まで遡ります(元彼みたいな切り口やな)。当時はまだ「自宅でネットをしたら何十万もとられる」という(本当かウソかわからない)時代です。そんな時代に就活をしていた私は、インターネットカフェの職員の求人募集を見つけ応募したところ採用されました。自宅にパソコンすら置いていない私がなぜ採用されたのかはいまだ謎ですが、いきなり時代を先取りしたかのような環境に身を置くことになりました。パソコンマニアのお兄さんに混ざり、新入社員全員がお店のホームページ作成を担当するという指令まで出され、当時は頭が爆発しそうだったことを覚えています。

htmlタグ

そんなむちゃぶりな仕事のお陰で基礎が身についたんですが、ここでよく目にする「htmlタグ」というものに触れたいと思います。 たとえば、文字のサイズを変えたい場合のhtmlタグは下記のように記述します。

 

<font size="1"> </font>

 

これは私がこのブログで実際に使用しているんですが、始まりと終わりの<font size="1"> </font>の部分をタグと呼びます。タグを作るには、< >のカッコで始まり、</ >スラッシュを含むカッコで終わるというルールがあります。極端に言えばこのルールさえ知っておくと、< >内の意味(英語)はチンプンカンプンでも何かしら指示を出しているんだということがわかります。htmlタグを理解できる一番の近道は自分で実際に作ってみる!これを言うと元も子もないけど(;´・ω・)。

このタグは押さえておこう

今はコンピュータが自動生成してくれるので、初心者がタグをいじるのは下記のタグくらいでよいかなぁと思います。私が使っている程度のタグならアルファベットは大文字でも小文字でも問題ありません。分かりやすいように色をつけていますが実際にタグを組む時は黒でOKです。

◆中央(センタリング)<center> </center>

使い方:私はアドセンス広告を中央に表示したいときのみ使用しています。

◆フォントサイズ変更 <font size="1"> </font>

" "内の数字を変更することにより文字を大きくしたり小さくしたりできます。 

指定できるサイズ:1(最小)~7(最大)

使い方:アドセンス広告の近くに記載しないといけない「広告」や「スポンサーリンク」の文字サイズをデフォルトサイズから変更。

◆フォントカラー変更 <font color=" "> </font>

" "内の文字を変更することにより色を変更できます。色はRGB(レッド・グリーン・ブルーの三原色)指定です。下記のホームページがわかりやすいですよ^^。

Web Safe Color一覧表/カラーチャート

例えば文字の色をにしたい場合、カラーチャートから変更したい緑色を選びます。

カラーチャート

選択したカラーの一行目に記載されている#00cc33をタグに追記してみます。

 

<font color="#00cc33">文字の色は緑色です</font>

 

ホームページ上だと、文字の色は緑色ですというように表示されます。面白いですよね(^_-)-☆。さらにサイズも大きくしてみよう。

 

<font size="7"><font color="#00cc33">文字の色は緑色です</font>

文字の色は緑色です

サイズを最大の"7"にしてみました。さすがにデカ過ぎたな(;´・ω・)。

 

タグですが、「サイズ変更」も「色の変更」も始まりは同じ<font>を使用しているので、終わりの</font>は1つでOK。(2つ置いても支障はありません。)

htmlを見よう見真似で作成するようになった

今みたいにパソコンがhtmlタグを自動生成してくれると本当にありがたいんですが、その反面素人には敷居が高くなっちゃうんですよね・・・。私は自分でも気づかなかったんですが、自分で作っていくことが好きみたいで(料理や裁縫はダメです)始めるとのめり込みます。どうしてもタグについて勉強したいと思ったとき、本を一冊用意しました。20年以上前に購入したので今の書店には並んでいないと思いますし、もう家にもありません(笑)がかなり重宝しました!htmlの基礎の基礎を本で学んだといっても過言ではありません。それを見ながら自分でホームページを一から(一からですよ!奥さんっ!)作成し、そのテキストデータをサーバーにアップするところまで成長しました!そこまで行くと自分の思うとおりに動くホームページにめちゃくちゃ愛着がわき、どんどん勉強意欲もアップ!習うより慣れろは本当ですね。

まとめ

今は初心者向けのサイトがたっくさんあるので、本を買わなくても作成することはできますが、基本を知っておくだけで理解できるスピードは大きく変わるので「サルでもわかる~」シリーズのような本を一冊用意し、実際に自分で操作をしてみることをお勧めします。早速、ご紹介した文字の色や文字のサイズを変えてみてください。htmlの面白さをすぐに実感できますよ♪