携帯アフィリエイトサイト作成

携帯サイト作成基礎講座 > スポンサー広告 > よく使うタグ集> 未分類 > よく使うタグ集

レンタルサーバー

お気に入りに追加

携帯サイト作成基礎講座

当サイトについて

携帯サイト作成基礎講座

当サイトは、携帯サイトの作り方や携帯電話を使って稼ぐ方法を説明しております。

2005年より運営。おかげ様で5周年を迎えることができました。

無断転用・転載、二次使用などは固く禁止します

サイト内容

最新記事

全記事表示リンク


>>今すぐ詳細を知りたいならこちら<<

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


>>今すぐ詳細を知りたいならこちら<<

よく使うタグ集

2006年05月02日(火)

ここでは携帯サイトを作る際によく使うタグを説明します。

中にはあまり使わないものもありますが、知ってて損はありませんので参考までに覚えておいてください。



1.フォントサイズの指定


フォントサイズの指定はフォントの大きさを変えたい部分を

<FONT SIZE="大きさ">と</FONT>ではさみます。

フォントサイズは1~7まであり、通常のサイズは3です。







2.文字色の変更



文字色の変更は「色・配置の変更」でも触れましたが、変更したい文字を<FONT COLOR="色">と</FONT>で挟みます。

色の種類についても「色・配置の変更」を参照してください。







3.太字の設定



太字の設定は太字にしたい文字列を<B>と</B>ではさみます。

・見本

こんな風になります。







4.斜体の設定



斜体は斜体にしたい文字列を<I>と</I>ではさみます。

・見本

こんな風になります。







5.下線の設定



下線は下線をひきたい文字列を<U>と</U>ではさみます。

・見本

こんな風になります。








6.取消し線の設定



文字列に取消し線をひきたい場合は、文字列を<S>と</S>
で挟みます。

・見本

こんな風になります。







7.段落の設定



文字列に段落を設定するには、文字列を<P>と</P>ではさみます。
段落を設定した文字列の前後には1行分のスペースが入ります。







8.改行の設定



改行の設定は文字列の間に<BR>を挿入します。
<BR>の挿入されたところで改行されます。







9.背景色の変更



ページの背景色を変更するには<body><div id="sh_fc2blogheadbar"> <div class="sh_fc2blogheadbar_body"> <div id="sh_fc2blogheadbar_menu"> <a href="http://blog.fc2.com/" rel="nofollow"> <img src="//static.fc2.com/image/headbar/sh_fc2blogheadbar_logo.png" alt="FC2ブログ" /> </a> </div> <div id="sh_fc2blogheadbar_search"> <form name="barForm" method="get" action="" target="blank"> <input class="sh_fc2blogheadbar_searchform" type="text" name="q" value="" maxlength="30" onclick="this.style.color='#000000';" onfocus="this.select();" onblur="this.style.color='#999999'" /> <input type="hidden" name="charset" value="utf-8" /> <input class="sh_fc2blogheadbar_searchbtn" type="submit" value="ブログ内検索" /> </form> </div> <div id="sh_fc2blogheadbar_link_box" class="sh_fc2blogheadbar_link" style="visibility: hidden;"></div> </div> </div> ~ <!-- passive:ad:171 --> <div id="fc2_bottom_bnr" style="position:fixed;z-index:10000;left:0;bottom:0;width:100%;display:block;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#70000000,EndColorStr=#70000000);background:rgba(0,0,0,0.7);"><div id="fc2_bottom_bnr_img" style="display:block;width:728px;height:94px;margin:0px auto;padding:10px 0px 14px;"><iframe src='//assys01.fc2.com/1346' style='width:728px;height:90px;border:none;' scrolling='no'></iframe><!-- FC2管理用 --><img src="//media.fc2.com/counter_img.php?id=1505" width="1" height="1"><!-- FC2管理用 --><div style="color:#C0C0C0;text-align:center;font-size:9px;margin:0px;padding:2px 0px 0px;">上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。</div></div><span id="fc2_bottom_bnr_close" style="cursor:pointer;display:block;position:absolute;padding:5px;top:0;right:0;width:20px;height:20px;opacity:0.8;max-width:100%;max-height:100%;"><img src="//blog-imgs-61.fc2.com/t/e/s/test0006/fc2_bottom_bnr_close.png" width="20" height="20" style="border:none;width:20px;height:20px;max-width: 100%;" /></span></div> <script type="text/javascript">(function(w, d) {var area = d.getElementById('fc2_bottom_bnr'),areaStyle = area.style;var getScrollMax = function() { return d.documentElement.getBoundingClientRect().height - w.innerHeight; };var getScrollCurrent = function() { return d.documentElement.scrollTop || d.body.scrollTop; };var overlayPosition = function() {if (getScrollMax() > getScrollCurrent()) {areaStyle.bottom = 0;areaStyle.top = 'auto';} else {areaStyle.bottom = 'auto';areaStyle.top = 0;}};var closeBtn = d.getElementById('fc2_bottom_bnr_close'),close = function() { area.style.display = 'none'; };if (w.addEventListener) {w.addEventListener('resize', overlayPosition, false);w.addEventListener('scroll', overlayPosition, false);closeBtn.addEventListener('click', close, false);} else {w.attachEvent('onresize', overlayPosition);w.attachEvent('onscroll', overlayPosition);closeBtn.attachEvent('onclick', close);}})(window, document);</script> </body>を
<BODY BGCOLOR="色">~ <!-- passive:ad:171 --> <div id="fc2_bottom_bnr" style="position:fixed;z-index:10000;left:0;bottom:0;width:100%;display:block;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#70000000,EndColorStr=#70000000);background:rgba(0,0,0,0.7);"><div id="fc2_bottom_bnr_img" style="display:block;width:728px;height:94px;margin:0px auto;padding:10px 0px 14px;"><iframe src='//assys01.fc2.com/1346' style='width:728px;height:90px;border:none;' scrolling='no'></iframe><!-- FC2管理用 --><img src="//media.fc2.com/counter_img.php?id=1505" width="1" height="1"><!-- FC2管理用 --><div style="color:#C0C0C0;text-align:center;font-size:9px;margin:0px;padding:2px 0px 0px;">上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。</div></div><span id="fc2_bottom_bnr_close" style="cursor:pointer;display:block;position:absolute;padding:5px;top:0;right:0;width:20px;height:20px;opacity:0.8;max-width:100%;max-height:100%;"><img src="//blog-imgs-61.fc2.com/t/e/s/test0006/fc2_bottom_bnr_close.png" width="20" height="20" style="border:none;width:20px;height:20px;max-width: 100%;" /></span></div> <script type="text/javascript">(function(w, d) {var area = d.getElementById('fc2_bottom_bnr'),areaStyle = area.style;var getScrollMax = function() { return d.documentElement.getBoundingClientRect().height - w.innerHeight; };var getScrollCurrent = function() { return d.documentElement.scrollTop || d.body.scrollTop; };var overlayPosition = function() {if (getScrollMax() > getScrollCurrent()) {areaStyle.bottom = 0;areaStyle.top = 'auto';} else {areaStyle.bottom = 'auto';areaStyle.top = 0;}};var closeBtn = d.getElementById('fc2_bottom_bnr_close'),close = function() { area.style.display = 'none'; };if (w.addEventListener) {w.addEventListener('resize', overlayPosition, false);w.addEventListener('scroll', overlayPosition, false);closeBtn.addEventListener('click', close, false);} else {w.attachEvent('onresize', overlayPosition);w.attachEvent('onscroll', overlayPosition);closeBtn.attachEvent('onclick', close);}})(window, document);</script> </body>に書き換えます。

なお、色については「色・配置の変更」を参照してください。







10.区切り線をひく



区切り線は区切り線を挿入したい部分に<HR>と記述します。
携帯の画面は小さいので、適宜区切り線を挿入することでページがみやすくなります。このタグを覚えておくと便利です。

・見本

こんな風に


なります。







11.区切り線の長さの変更



区切り線の長さを変更するには<HR WIDTH="線の長さ">と
記述します。線の長さは数値を入力することでも変更できますが、「%」を入力するのが便利です。

例えば、<HR WIDTH="80%">と入力すると区切り線が画面の
80%に設定されます。変更された区切り線は中央揃えになります。

左揃えにするには<HR WIDTH="線の長さ" align="LEFT">
と記述します。







12.区切り線の太さの変更



区切り線の太さを変更するには<HR SIZE="線の太さ">と
記述します。

線の太さは数値を入力することで変えることができます。
例えば<HR SIZE="5">と記述すれば5ピクセルの太さに変更
できます。

・見本

これが




こんな風になります。










13.区切り線の色の変更



区切り線の色を変更するには<HR COLOR="線の色">と記述します。
なお色については「色・配置の変更」を参照してください。

・見本

こんな風になります。














14.文字を右から左にスクロールさせる



文字を右から左にスクロールさせるには、
<MARQUEE DIRECTION="RIGHT">文字列</MARQUEE>
と記述します。

ちなみに左から右にスクロールさせるには"RIGHT"を"LEFT"と変更します。
下から上は"UP"、上から下は"DOWN"と記述します。

・見本

"right"と記述しています。右に流れます

"left"と記述しています。左に流れます







15.スクロールの繰り返し回数を指定する



スクロールを繰り返し行う場合は、
<MARQUEE LOOP="回数">文字列</MARQUEE>と記述します。

例えば<MARQUEE LOOP="10">文字列</MARQUEE>と記述すれば
文字列が10回スクロールします。


・見本


↓5と記述してあるものが流れています。
(表示されていない場合、すでにスクロール回数を終えています。
お手数ですが、再度このページを開きなおしてください)
"3"と記述しています。

↓10と記述してあるものが流れています。
(表示されていない場合、すでにスクロール回数を終えています。
お手数ですが、再度このページを開きなおしてください)
"10"と記述しています。







16.スクロールエリアに背景色をつける



スクロールエリアに背景色をつけるには、
<MARQUEE BGCOLOR="色">文字列</MARQUEE>と記述します。

なお、色は「色・配置の変更」を参照してください。

"blue"と記述しました。

"red"と記述しました。

"yellow"と記述しました。





以上、16のタグを紹介しましたが、全てが携帯サイトを作るのに
必要なものではありませんので、適宜必要と思ったものを利用してください。


携帯サイト作成~初級編~TOP
スポンサーサイト

タグ :

未分類 | PAGE TOP↑
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。