2008年10月02日
簡単なHTMLのタグの勉強
自分もペーペー素人の携帯アフィリエイターなのに、
生意気にもHTMLのタグ講座てきなことをしようとしている自分にビックリです(汗
まず、
「無料ホームページで携帯サイトを作る練習を楽しんでみてくださいね☆」
と、話しましたが、
ただ、文章を書くだけでは物足りないし、
飽きてしまいます。
ですので、
これから教えちゃう
『タグ』
というものを利用して、
色々、携帯サイトに変化をつけることを楽しんでみて下さい♪
では、さっそく参ります。
<strong>タグ
これは<strong>〜</strong>に挟まれた文字を強調します。
強調するというのは、
強調されている部分の文字は若干、太文字で表示されます!
ちなみに、</〜>の / は、
「このタグの指定する(効果がある)範囲を終了しますよ〜」
ということを表しています。
(例)
携帯アフィリエイト
こんな感じです。
若干、文字が太くなりましたよね!?
僕が書いているタグは、
ブログという性質上「全角」で書いていますが、
実際には、半角で書いてくださいね?
そうしないときちんとサイトにタグの性質が反映されません!
次によく使うのが、
<h1>〜</h1>というタグです。
これは、囲まれた中の文字を最大の大きさで表示することができます。
(例)
こんな感じになります。
これは、<h2><h3><h4>・・・・と、<h6>、
まで、あったかな(???)
今、確認したので情報に間違いはないですが、
僕は<h2>までしか使用していないです(色々理由はありますが!)
<h1>から<h6>までに向かって文字が小さくなっていきます。
次によく使うのが、
<font color=”色コード”></font>
です。
これは、文字の色を指定します。
こんな感じです。
(例)
携帯アフィリエイト
文字が赤いですよね。
色について、よく使うものをご紹介しておきますので、
メモに取っておいてください!
・red
・yellow
・blue
・green
・black
・navy
・white
・gray
・silver
・fuchsia(薄紫)
・purple
・olive(抹茶色)
・aqua(水色)
・lime(明るい緑)
・teal(濃い緑)
・maroon(ほぼ茶色)
だいたい、このくらいの色を使います!
そろそろ眠くなった人もいると思いますが、
あと少しです。
<center>〜</center>タグ
この間に囲まれた文字は、画面の真ん中に寄せられます!
今までの知識でちょっと実験してみますね!
<font color=”red”><center><h1>携帯アフィリエイト</h1></center></font>
と、するとどのように表示されるか!?な!?
(例)
こんな感じになります!
ちょっとテンション上がりましたか!!?????
<h1>を使わなければこのようになります!
(例)
携帯アフィリエイト
画面の真ん中に文字が寄りましたよね!??
次に、よく見る方が多いと思いますが、
「横線」
です。
これは、
<hr>
で、表します。
使ってみますね!
(例)
あと、大事なのが
「改行」
ですね。
改行の意味が分からない人は周りにいる人に聞いてみてくださいね!
3人に1人は知ってますよ!
<br>
で、表します。
これは使わなくて良い無料ホームページもあれば、
使わないと改行が出来ない無料ホームページがあります!
疲れたら各自自由に休憩してくださいね♪
まだ後ちょっと続きます!
まるで「魚くん」みたいなノリになってきましたが、
僕は魚くんではないです。
魚くんくらいの勢いで携帯アフィリイエイトをしていたら、
それはそれでえらいすごい人になりそうですよね!?
気分転換にマーキーを覚えますか!?
携帯サイトで必ず見るのが、
文字がスクロールして横から流れてくるやつです!
<marquee>〜</marquee>
この〜の中に文字を入れると、
特にいじらなければ、
右から左へと文字が流れていきます!
試してみますね、
(例)
ちゃんとブログでも文字が流れてますね、エライエライ!
そうですね、使うのが、
あと僕が実際に使っているタグが2つくらいで、
・文字を斜めにする
・文字を点滅させる
残りはその2つです!
僕の今、現在の技量ではそのくらいが限度です!
けっこうよく使うのが、
理由はあるのですが、
文字を斜めに表す方法です!
<em>〜</em>
この〜に斜めにしたい文字を入れます。
(例)
ちょっとおまけで、
<h2>タグを使って文字を大きくしてみましたよ!
その方が分かり易いですよね(???)
最後、まだ見せたいものがあるので、
まだ最後じゃないのですが、
・文字を「点滅」させる方法
これは見たことがある人もいて、
興味はあるのではないでしょうか!?
<blink>〜</blink>
この〜の部分に入れた文字が点滅します!
ブログで出来るかどうか、
ちょっと試してみますね!
(例)
どうでしょうか!?
ちょっと色まで付けてみたのですが、
さすがにブログじゃ点滅はしませんかね。
でもこのタグ、覚えておいてください。
最後に、
よく、『リンク』といって、
携帯アフィイエイト
みたいな文字があって、
そこをクリックすると次のページに飛ぶ、
みたいなのあるじゃないですか!?
あれをやりたいと思いますね!
<a href=”ここに飛ばしたい先のサイトのURLを書く”>
ここに飛んだ先のタイトルなどが分かるように書く</a>
では、これで、
僕が人生で初めて作った携帯サイトを、
ちょっと恥ずかしいところはありますが、
デビュー作なんで、お見せしたいと思いますね!
(例)
占いBAR
これが2008年9月の半ばに作った、
僕の携帯アフィリエイトサイト処女作です!
今から2,3週間前に作りました!
初めてのサイトならもうちょっと頑張ろうよ、
っていう感じですが、
こんな感じでデビューしました!?
今のは「モバイルスペース」という無料HPスペースで作ったサイトなのですが、
なんのヒネリも無い、といった感じです!
最後、おまけで、
僕がmixiで管理人をやっているコミュで使っている、
サイト、
これ一番ある意味人に見せるのは恥ずかしいのですが、
この際、なのでオマケ的に見せますね!
『aimew(アイミュー)』
という無料ホームページを利用しています。
僕という人間が先へ進もうとするほど恥ずかしくなってきます(汗)
(例)
携帯アフィリエイト〜0⇒1
いやいや、では、
「そもそも、あなたどこでそんな知識を身に付けたの!?」
ということでしょうが、
これまでご紹介したHTMLタグは、
僕の教科書でもある、この本で勉強しました!
今日、紹介したタグは、
ほんの僕が頻繁に使うタグだけを抜粋しました。
きちんと勉強されたい方はコチラです。
↓ ↓
生意気にもHTMLのタグ講座てきなことをしようとしている自分にビックリです(汗
まず、
「無料ホームページで携帯サイトを作る練習を楽しんでみてくださいね☆」
と、話しましたが、
ただ、文章を書くだけでは物足りないし、
飽きてしまいます。
ですので、
これから教えちゃう
『タグ』
というものを利用して、
色々、携帯サイトに変化をつけることを楽しんでみて下さい♪
では、さっそく参ります。
<strong>タグ
これは<strong>〜</strong>に挟まれた文字を強調します。
強調するというのは、
強調されている部分の文字は若干、太文字で表示されます!
ちなみに、</〜>の / は、
「このタグの指定する(効果がある)範囲を終了しますよ〜」
ということを表しています。
(例)
携帯アフィリエイト
こんな感じです。
若干、文字が太くなりましたよね!?
僕が書いているタグは、
ブログという性質上「全角」で書いていますが、
実際には、半角で書いてくださいね?
そうしないときちんとサイトにタグの性質が反映されません!
次によく使うのが、
<h1>〜</h1>というタグです。
これは、囲まれた中の文字を最大の大きさで表示することができます。
(例)
携帯アフィリエイト
こんな感じになります。
これは、<h2><h3><h4>・・・・と、<h6>、
まで、あったかな(???)
今、確認したので情報に間違いはないですが、
僕は<h2>までしか使用していないです(色々理由はありますが!)
<h1>から<h6>までに向かって文字が小さくなっていきます。
次によく使うのが、
<font color=”色コード”></font>
です。
これは、文字の色を指定します。
こんな感じです。
(例)
携帯アフィリエイト
文字が赤いですよね。
色について、よく使うものをご紹介しておきますので、
メモに取っておいてください!
・red
・yellow
・blue
・green
・black
・navy
・white
・gray
・silver
・fuchsia(薄紫)
・purple
・olive(抹茶色)
・aqua(水色)
・lime(明るい緑)
・teal(濃い緑)
・maroon(ほぼ茶色)
だいたい、このくらいの色を使います!
そろそろ眠くなった人もいると思いますが、
あと少しです。
<center>〜</center>タグ
この間に囲まれた文字は、画面の真ん中に寄せられます!
今までの知識でちょっと実験してみますね!
<font color=”red”><center><h1>携帯アフィリエイト</h1></center></font>
と、するとどのように表示されるか!?な!?
(例)
携帯アフィリエイト
こんな感じになります!
ちょっとテンション上がりましたか!!?????
<h1>を使わなければこのようになります!
(例)
画面の真ん中に文字が寄りましたよね!??
次に、よく見る方が多いと思いますが、
「横線」
です。
これは、
<hr>
で、表します。
使ってみますね!
(例)
あと、大事なのが
「改行」
ですね。
改行の意味が分からない人は周りにいる人に聞いてみてくださいね!
3人に1人は知ってますよ!
<br>
で、表します。
これは使わなくて良い無料ホームページもあれば、
使わないと改行が出来ない無料ホームページがあります!
疲れたら各自自由に休憩してくださいね♪
まだ後ちょっと続きます!
まるで「魚くん」みたいなノリになってきましたが、
僕は魚くんではないです。
魚くんくらいの勢いで携帯アフィリイエイトをしていたら、
それはそれでえらいすごい人になりそうですよね!?
気分転換にマーキーを覚えますか!?
携帯サイトで必ず見るのが、
文字がスクロールして横から流れてくるやつです!
<marquee>〜</marquee>
この〜の中に文字を入れると、
特にいじらなければ、
右から左へと文字が流れていきます!
試してみますね、
(例)
ちゃんとブログでも文字が流れてますね、エライエライ!
そうですね、使うのが、
あと僕が実際に使っているタグが2つくらいで、
・文字を斜めにする
・文字を点滅させる
残りはその2つです!
僕の今、現在の技量ではそのくらいが限度です!
けっこうよく使うのが、
理由はあるのですが、
文字を斜めに表す方法です!
<em>〜</em>
この〜に斜めにしたい文字を入れます。
(例)
携帯アフィリエイト
ちょっとおまけで、
<h2>タグを使って文字を大きくしてみましたよ!
その方が分かり易いですよね(???)
最後、まだ見せたいものがあるので、
まだ最後じゃないのですが、
・文字を「点滅」させる方法
これは見たことがある人もいて、
興味はあるのではないでしょうか!?
<blink>〜</blink>
この〜の部分に入れた文字が点滅します!
ブログで出来るかどうか、
ちょっと試してみますね!
(例)
どうでしょうか!?
ちょっと色まで付けてみたのですが、
さすがにブログじゃ点滅はしませんかね。
でもこのタグ、覚えておいてください。
最後に、
よく、『リンク』といって、
携帯アフィイエイト
みたいな文字があって、
そこをクリックすると次のページに飛ぶ、
みたいなのあるじゃないですか!?
あれをやりたいと思いますね!
<a href=”ここに飛ばしたい先のサイトのURLを書く”>
ここに飛んだ先のタイトルなどが分かるように書く</a>
では、これで、
僕が人生で初めて作った携帯サイトを、
ちょっと恥ずかしいところはありますが、
デビュー作なんで、お見せしたいと思いますね!
(例)
占いBAR
これが2008年9月の半ばに作った、
僕の携帯アフィリエイトサイト処女作です!
今から2,3週間前に作りました!
初めてのサイトならもうちょっと頑張ろうよ、
っていう感じですが、
こんな感じでデビューしました!?
今のは「モバイルスペース」という無料HPスペースで作ったサイトなのですが、
なんのヒネリも無い、といった感じです!
最後、おまけで、
僕がmixiで管理人をやっているコミュで使っている、
サイト、
これ一番ある意味人に見せるのは恥ずかしいのですが、
この際、なのでオマケ的に見せますね!
『aimew(アイミュー)』
という無料ホームページを利用しています。
僕という人間が先へ進もうとするほど恥ずかしくなってきます(汗)
(例)
携帯アフィリエイト〜0⇒1
いやいや、では、
「そもそも、あなたどこでそんな知識を身に付けたの!?」
ということでしょうが、
これまでご紹介したHTMLタグは、
僕の教科書でもある、この本で勉強しました!
今日、紹介したタグは、
ほんの僕が頻繁に使うタグだけを抜粋しました。
きちんと勉強されたい方はコチラです。
↓ ↓
