全28件 (28件中 1-28件目)
1
・引用タグ<Blockquote>~</Blockquote>タグを記入します。このHTMLタグを使えば、文章の引用をしていると一目見て分かります。例えば次の例を見てください 段落全体など、ブロック要素の引用を行う場合に用いられます。文章の縦横に余白ができこれを使えば、文章の引用をしていると一目見て分かります。↓入力ソース<Blockquote>段落全体など、ブロック要素の引用を行う場合に用いられます。文章の縦横に余白ができこれを使えば、文章の引用をしていると一目見て分かります。</Blockquote>[トップページへ戻る]
2012.03.02
・リストのつくり方(3)前回は、複雑なリストのつくり方について学びました。今回は、定義型リストの作り方を学んで行きます。定義型リストを作るには<DL><DT><DD></DL>タグを記入します。全体を<DL>~</DL>で囲み、見出しの先頭に<DT>を。見出しの内容の文章の先頭に<DD>を記入します。例えば次の例を見てください 見出し1 見出し1に対する箇条書き 見出し2 見出し2に対する箇条書き↓入力ソース<DL><DT>見出し1 <DD>見出し1に対しての箇条書き <DT>見出し2 <DD>見出し2に対しての箇条書き</DL>[トップページへ戻る]
2012.03.02
・フォントの変え方フォントタグのface属性を使って以下のように指定します。指定したフォントが見つからなかった場合、有効になりませんので対策として複数のフォントを指定することが可能です。複数の候補を並べるときは、「,」(カンマ)で区切って第一候補から順に記述します。その場合、左から優先的に表示されます。<FONT face="Verdana","Tahoma","MS P明朝">複数のフォント</FONT>文字の部分を変更してコピー貼り付けで使ってくださいMS Pゴシック(標準)<font face="MS Pゴシック">文字</font>Terminal<font face="Terminal">文字</font>Small Fonts<font face="Small Fonts">文字</font>Arial Unicode MS<font face="Arial Unicode MS">文字</font>MS 明朝<font face="MS 明朝">文字</font>MS UI Gothic<font face="MS UI Gothic">文字</font>HG丸ゴシックM-PRO<font face="HG丸ゴシックM-PRO">文字</font>HGゴシックM<font face="HGゴシックM">文字</font>HGゴシックE<font face="HGゴシックE">文字</font>HG創英角ポップ体<font face="HG創英角ポップ体">文字</font>HG創英角ゴシックUB<font face="HG創英角ゴシックUB">文字</font>ふみゴシック<font face="ふみゴシック">文字</font>HG行書体<font face="HG行書体">文字</font>HG祥南行書体<font face="HG祥南行書体">文字</font>HG正楷書体<font face="HG正楷書体">文字</font>恋文ペン字<font face="恋文ペン字">文字</font>Verdana<font face="Verdana">文字</font>Tahoma<font face="Tahoma">文字</font>Geogia<font face="Geogia">文字</font>Impact<font face="Impact">文字</font>おすすめHP作成ツールアフィリエイト関連書籍★HTML関連書籍★主婦もかせげるアフィリエイトで月収50万主婦もかせげるパソコンで月収30万できる100ワザアフィリエイトTOPページへ戻ります
2008.06.20
・リンクの方法前回までは、リンクについて学びました。今回は、ページの特定の場所にリンクを張る方法についてです。自分のサイトから、ページ内の特定の場所にリンクを張るにはname属性を使用して、その場所に名前(識別子)をつけます。 <a name="">~</a>を使ってみましょう!「<a name="abc"」と言う名前をつけます。「<a href="リンク先URL#abc">」abcと名前を付けた場所へリンクします。たとえば・・・クリックしてみてください。このページの"ココ下段にジャンプします。"入力ソース↓<a href="リンク先URL#abc">クリックしてみてください。このページのココ下段にジャンプします。</a>リンク先の入力ソース↓<a name="abc">リンク先の文章「クリックしてみてください。このページのココ下段にジャンプします。」abcと名前を付けた特定のリンク先ページにジャンプします。</a>HTMLソース<a name="abc">リンク先にabcという名前を付けます</a><a href="リンク先URL#abc">abcと名前を付けた場所へリンクします</a>リンクの張り方(復習)自分のサイトから、ちがうページにリンクをはる。他のサイトにリンクをはる。画像にリンクをはる。こんなとき・・・<a href="">~</a>を使ってみましょう!「=""」には、リンクしたいページのURLをいれます。「~」には、リンクであることがわかる言葉や画像をいれます。"ココ下段にジャンプします。"リンクのはり方はこれで終了です。(これとっても便利!)次回からは、いよいよテーブルタグについてです![トップページへ戻る][次のページ⇒]
2008.04.04
・文字のカスタマイズ■ フォントを強調させる前回は、文字を自分好みのフォントに変える方法を学びました。今回は、フォントを強調させる方法について学んでいきましょう。文字を強調するときはemタグを使い、さらに強調したいときはstrongタグを使用します。1.強調(太文字) <strong>~</strong>より強調を意味する<strong>太い文字</strong> になります。↓ より強調を意味する太い文字 になります。 説明 ブラウザでの表示のされ方は<B>と同じですが、<strong>タグの方がより強い強調を表します。ただし<strong>タグを乱用すると「SEOスパム」と見なされ逆効果です。<strong>タグは1ページ内に3つまでがよいとされています。キーワードを強調させることにより検索エンジンに拾われる確立が高くなります。 一般的なブラウザでは、強調された部分が斜体、または太字で表示されます。2.強調(斜体) <em>~</em><em>Googleなどの検索エンジンに重要視されるタグです。</em> ↓Googleなどの検索エンジンに重要視されるタグです。 3.addressタグで囲まれた内容には、そのページの作者情報(メールアドレス等)や更新日などを記述します。一般的には、ページの最後で使用されることが多いようです。強調(斜体)アドレスタグ <address>~</address><address>みんタグ@メールアドレス</address> ↓みんタグ@メールアドレス 4.sタグ、またはstrikeタグで、文字に抹消線を引くことができます。取り消し線 <s>~</s> 昔書いた文章の<s>訂正</s>などに使うといいですね。 昔書いた文章の訂正などに使うといいですね。。取り消し線 <strike>~</strike> こちらも<strike>同じ効果</strike>になります。 こちらも同じ効果になります。 5.delタグで、それが抹消された部分であることを明示することができます。取り消し線(削除文) <del>~</del> こちらは文章を<del>削除</del>する意味を含むタグです。 こちらは文章を抹消する意味を含むタグです。6.H1~H6タグ<H1>~<H6>のHとはHeadingの略で、見出しを意味します。 <H1>が最上位の見出し(大見出し)で、以下数字が小さくなるにつれて下位の見出し(小見出し)となります。 H1 楽天広場HTML講座<H1>H1</H1>H2 楽天広場HTML講座<H2>H2</H2>H3 楽天ブログでは使用不可<H3>H3</H3>H4 楽天ブログでは使用不可<H4>H4</H4>H5 楽天広場HTML講座<H5>H5</H5>H6 楽天広場HTML講座<H6>H6</H6>[トップページへ戻る][次のページ⇒]いつも応援していただいてありがとうございます。アフィリエイト入門編被リンク数を調べる検索エンジン一括登録【HERMES】エルメス バーキンブログ系アフィリエイトアンケートリサーチ(1)株初心者 株式投資で増やす運気アップ講座TOP脳トレーニング講座TOP資生堂コレクション【NIKE】ナイキ オンラインアンケートリサーチ(2)商品が売れる法則楽天広場アフィリエイト講座福袋 2007(最新福袋情報)介護支援福祉情報アレカオ(arekao)ブログ楽天広場HTML講座TOP
2007.04.03
・文字のカスタマイズ■ テキスト・フォントタグ 前回は、水平線をつくる方法を学びました。今回は、まだご紹介していないタグをまとめてみました。ttタグに囲まれた文字は、等幅フォントで表示されますフォントを等幅にする<tt>~</tt>例:「<tt>等幅フォントです</tt>」↓等幅フォントですblinkタグに囲まれた文字は、点滅して表示されます。文字を点滅させる<blink>~</blink>例:「<blink>Internet Explorerでは点滅しません</blink>」↓Internet Explorerでは点滅しませんこのタグを指定すると、対象の文字にルビ(ふりがな)を付けることができます。ひらがなをふる<ruby><rb>~<rt>ふりがな</ruby> 例:「<ruby><rb>文字<rt>もじ</ruby>」↓文字もじ ※ネスケでは対応していません。文章中の引用部分を明示したいときは、blockquoteタグを使用します。文章を引用する<blockquote>~</blockquote> 例:「<blockquote>まわりに空白ができて、目立ちます</blockquote>」↓まわりに空白ができて、目立ちます今回で、文字のカスタマイズ講座は終了です。次回からは、画像の掲載方法・リンク作成方法を学んでいきます。[トップページへ戻る][次のページ⇒]いつも応援していただいてありがとうございます。アフィリエイト入門編被リンク数を調べる検索エンジン一括登録【HERMES】エルメス バーキンブログ系アフィリエイトアンケートリサーチ(1)株初心者 株式投資で増やす運気アップ講座TOP脳トレーニング講座TOP資生堂コレクション【NIKE】ナイキ オンラインアンケートリサーチ(2)商品が売れる法則楽天広場アフィリエイト講座福袋 2007(最新福袋情報)介護支援福祉情報アレカオ(arekao)ブログ楽天広場HTML講座TOP
2007.04.02
・画像を効果的にはる■ 画像のはりかた前回までは、文字をカスタマイズする方法を学びました。今回からは、新しく画像をはる方法について学んでいきます。画像をはるタグは<img src=""> です。「=""」の間には、画像を保管してある場所の住所、つまり画像のURLをいれます。これを「<img src="">」の「=""」の間にいれてあげれば、画像をはることができるのです。楽天広場の場合は、さきに「画像倉庫」に画像を保存することで、自分のブログに画像をはることができます。画像倉庫について詳しくはこちらを参照してください■ 画像に文字を回りこませる次の例をみてください。<img src="~jpg">位置を指定しないで文字を書くと、このように画像の回りにいくつも段落を表示する事はできません。alignは非常に役に立ちます。位置を指定しないで文字を書くと、このように画像の回りにいくつも段落を表示する事はできません。alignは非常に役に立ちます。 このように画像につづいて文章を書くと、画像の下に文章が回りこむことがあって、困っちゃうことよくあります。文章を画像のヨコにキレイにもってくるには、どうしたらいいのでしょう。ここで、またまた「align」属性をつかってみましょう。今回は、属性値に「left」か「right」を入れてみます。<IMG SRC="~.jpg" align="left">このように画像の回りにいくつも段落を表示する事ができます。alignは非常に役に立ちます。 ↓このように画像の回りにいくつも段落を表示する事ができます。alignは非常に役に立ちます。このように画像の回りにいくつも段落を表示する事ができます。alignは非常に役に立ちます。このように画像の左右に文章を回り込ませることができました。もし、文章の量が画像の高さに収まらないときは、画像の下にはみでます。逆に回りこみを強制的に解除したいときは、「br clear=""」をつかいます。「=""」には、画像の位置を左にしたときは「left」、右になら「right」「all」をいれると画像がどちらにあっても、回り込みが解除されます。これで、「br clear=""」以下の文字が画像より下にくるのです。「<IMG SRC="~.jpg" align="left">位置を指定して文字を書くと、このように画像の回りにいくつも段落を表示する事ができます。<br clear="left">alignは非常に役に立ちます。」↓位置を指定して文字を書くと、このように画像の回りにいくつも段落を表示する事ができます。alignは非常に役に立ちます。alignは、left、center、rightで指定できます。 [楽天広場HTML講座TOP][次のページ⇒]
2007.03.16
・フィルタ今回は、フィルタについて学んで行きたいと思います。フィルター(フィルタ、filter)とは、与えられた物の特定成分を取り除く(あるいは弱める)作用をする機能をもつものです。ある成分以外の全成分を弱めることによりその成分だけを強調する効果を得る場合もあります。さらに、各成分に対し何らかの処理を施す場合もあります。【注意】HTMLの表示は各ブラウザによって微妙に違います。IEでは確認取れていますが、Firefoxでは何の変化も無いようです。【フィルタなしの状態】<IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" alt="ky64-31.gif">↓ 入力ソース<div style="font: bold 20pt sans-serif; width: 100%;">楽天広場HTML講座</div>表示例↓こんな感じですね。楽天広場HTML講座■shadow() ・・・やわらかい影をつけてくれますfilter: shadow(color=影色, direction=角度); } □color 影の色□direction 影の方向(45度単位:0=上、45=右上、90=右、135=右下、180=下、225=左下、270=左、315=左上)<div style="width: 100%; padding-bottom: 10px; filter: shadow(color=blue, direction=135);"><IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" alt="ky64-31.gif"></div>↓入力ソース<div style="font: bold 20pt sans-serif; width: 100%; padding-bottom: 10px; filter: shadow(color=blue, direction=135);">楽天広場HTML講座</div>表示例↓こんな感じですね。楽天広場HTML講座■dropshadow() ・・・シャープな影をつけてくれますfilter: dropshadow(color=影色, offx=左右, offy=上下, positive=反転);□color 影の色□offx(影の左右の位置(ピクセル:整数)□offy(影の上下の位置□positive 影の反転(0(false) = 反転、1(true) = 通常)<div style="width: 100%; padding-bottom: 30px; filter: dropshadow(color=#C0C0C0, offx=20, offy=30);"><IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" alt="ky64-31.gif"></div>↓入力ソース<div style="font: bold 20pt sans-serif; width: 70%; padding: 5px 10px; filter: dropshadow(color=#C0C0C0, positive=false);">楽天広場HTML講座</div>表示例↓こんな感じですね。楽天広場HTML講座■blur() ・・・「ブレ」の効果を表示しますfilter: blur(add=true, direction=90, strength=10);□add 元画像をブレに重ねるかどうか(0(false) = 重ねない、1(true) = 重ねる)□direction ブレの方向(45度単位:0=上、45=右上、90=右、135=右下、180=下、225=左下、270=左、315=左上)□strength ブレの距離(ピクセル)<IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" style="filter: blur(direction=0, strength=30);"> ↓入力ソース楽天広場HTML講座表示例↓こんな感じですね。<div style="font: bold 20pt sans-serif; width: 100%; filter: blur(add=false, direction=90, strength=15);">楽天広場HTML講座</div>■glow() ・・・発光しているような効果を表示しますfilter: glow(color=光の色, strength=100); □color 光の色□strength 光の強さ(0(弱) ~ 254(強))<div style="width: 100%; padding: 20px; filter: glow(color=#FFFF00, strength=30);"><IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" alt="ky64-31.gif"></div>↓入力ソース<div style="font: bold 20pt sans-serif; width: 100%; padding: 20px; filter: glow(color=red, strength=20);">楽天広場HTML講座</div>表示例↓こんな感じですね。楽天広場HTML講座■wave() ・・・波状に表示しますfilter: wave(add=false, freq=3, strength=5, lightstrength=30, phase=50); □add 元画像を波に重ねるかどうか(0(false) = 重ねない、1(true) = 重ねる)□freq 波の数(数値) □strength 波の横幅(数値) □lightstrength 光の強さ(0(弱) ~ 100(強))□phase 波の開始位置(0 ~ 100)<div style="width: 100%; padding-left: 10px; filter: wave(strength=5, lightstrength=50, phase=75);"><IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" alt="ky64-31.gif"></div>↓入力ソース<div style="font: bold 20pt sans-serif; color: red; width: 100%; padding-left: 10px; filter: wave(freq=1, strength=3, lightstrength=50);">楽天広場HTML講座</div>表示例↓こんな感じですね。楽天広場HTML講座楽天広場HTML講座TOP
2007.02.02
ゆっくりゆっくり↓入力ソース<table width="300" height="200" cellpadding="15" style="border:10px outset #c0c0c0;background-color:#ffccff;"><tr><td><marquee direction="up" scrollamount="2">ゆっくりゆっくり</marquee></td></tr></table>「background-color:#ffccff;」RGB値カラーコードを変える事で、背景色を自由に変えられます。「direction="up"」「direction」属性のの「""」の中の「up down left right」を入力する事で自由に移動方向を変えられます。「scrollamount="2"」「scrollamount」の「”数値”」を変える事で、文字の移動スピードを自由に調節できます。楽天広場アフィリエイト講座(サブタイトル)いつも応援していただいてありがとうございます。アフィリエイト入門編被リンク数を調べる検索エンジン一括登録【HERMES】エルメス バーキン人気の季節品冬物家電FC2 BLOG ブログ株初心者 株式投資で増やす運気アップ講座TOP脳トレーニング講座TOP資生堂コレクション【NIKE】ナイキ オンラインアメーバブログ アメブロ商品が売れる法則楽天広場アフィリエイト講座福袋 2007(最新福袋情報)介護支援福祉情報アレカオ(arekao)ブログ楽天広場HTML講座TOP
2007.01.18
・リストのつくり方(2)前回は、リストのつくり方について学びました。今回は、アルファベットやローマ字を使ったリストの作り方を学んで行きます。アルファベットやローマ字を使ったリストを作るには<ol type="a,A,1,i,I のいずれか1つ"><li>~</li></ol>タグを記入します。その中にリストの項目分の<li>項目名</li>を記入します。最後に</ol>タグを記入します。例えば次の例を見てください モンブランチョコレートケーキチーズケーキ↓入力ソース<ol type="A"><li>モンブラン</li><li>チョコレートケーキ</li><li>チーズケーキ</li></ol>type=~値"を a にした時 モンブランチョコレートケーキチーズケーキ↓入力ソース<ol type="a"><li>モンブラン</li><li>チョコレートケーキ</li><li>チーズケーキ</li></ol>数字のリストを作る場合には<ol>タグを使いましたがこのタグに type 属性をつけて、値に A,a,I,i,1 を指定します。また、<li>タグに指定すれば、その項目だけをアルファベットなどに変えることが出来ます。<ol type="a,A,1,i,I" のいずれか1つ"><li>~</li></ol><li="値">にはa,A,1,i,I のいずれかを指定 モンブランチョコレートケーキチーズケーキ↓入力ソース<ol type="A"><li>モンブラン</li><li type="a">チョコレートケーキ</li><li type="I">チーズケーキ</li></ol>こんな感じですね。<li="値">タグを使うことによって、より複雑なリストをつくることができます。[トップページへ戻る]
2007.01.10
・人気のあるフォント(字体)サンプル今回はブラウザで読みやすいフォントについても説明します。フォントには様々な種類が用意されていてどれにするのか迷いますね。そこで、ブラウザで読みやすいフォントとは ?フォントには様々な種類がありますが画面上で一番読みやすいフォントは「Verdana」フォントだと思います。当ブログでも「Verdana」フォントを使用していますが「Verdana」フォントは、他のブログサービスやWebサイトでも非常によく使用されていますね。では、なぜ、「Verdana」フォントがよく使用されているのでしょうか?そこで、今回は、「Verdana」フォントについて調べてみましたので是非、参考にしてください。◆Verdana フォント「Verdana」フォントは、 「画面上での見た目、読みやすさ」を基準として 1996 年にデザインされた比較的新しいフォントです。Windows に標準でインストールされていますのでほとんどのユーザー環境に対応しています。表示例あいうえおABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789 入力ソース<font face="Verdana">文字や文章を入れる</font>フォントの特徴として、文字の幅が広く小さな文字でもつぶれにくい特徴があります。また、エックスハイトが高く設定されておりサイズの割に大きく見えるという特徴をもちます。この「Verdana」フォントを生み出したのは書体デザイナーとして世界的に有名な人物である Matthew Carter 氏であるようです。Matthew Carter氏は、「Verdana」以外にも「Tahoma」 や「Geogia」などもデザインしています。[トップページへ戻る][次のページ⇒]
2006.12.21
・リストのつくり方今回は、リストのつくり方について学んでいきます。記号を使ったリストを作るには、リストの初めに<ul>タグを記入します。その中にリストの項目分の<li>項目名</li>を記入します。最後に</ul>タグを記入します。例えば次の例を見てください モンブランチョコレートケーキチーズケーキ↓入力ソース<ul><li>モンブラン</li><li>チョコレートケーキ</li><li>チーズケーキ</li></ul>◆リストの記号は何も指定しない場合は、●(黒丸)ですがtype属性を使って指定すれば○(白丸)や■(黒四角)にすることが出来ます。白丸にしたい場合はtype属性の値にcircleを黒四角にしたい場合はsquareを指定します。<ul type="キーワード"><li>~</li></ul>キーワードにはdisk、circle、squareのいずれかを指定白丸にしたい場合はtype属性の値にcircleを モンブランチョコレートケーキチーズケーキ↓入力ソース<ul type="circle"><li>モンブラン</li><li>チョコレートケーキ</li><li>チーズケーキ</li></ul>黒四角にしたい場合はsquareを モンブランチョコレートケーキチーズケーキ↓入力ソース<ul type="square"><li>モンブラン</li><li>チョコレートケーキ</li><li>チーズケーキ</li></ul>◆数字を使ったリスト数字を使ったリストを作るには、リストの初めに<ol>タグを記入します。その中にリストの項目分の<li>項目名</li>を記入します。項目分の<li>タグを記入したら最後に</ol>タグを記入します。<ol><li>~</li></ol>数字を使ったリストを作るには モンブランチョコレートケーキチーズケーキ↓入力ソース<ol><li>モンブラン</li><li>チョコレートケーキ</li><li>チーズケーキ</li></ol>こんな感じですね。リストタグを使うことによって、より解りやすくまとめることができます。終了タグ</li>は省略可能です。[トップページへ戻る][次のページ⇒]
2006.12.13
・画像を効果的にはる■画像の縦横にスペースを空けるこのように、通常の状態では、画像と文章がかなりくっついて表示されます。この画像と文章の間にスペースを空けるとどうなるでしょう?ここで、「hspace」「vspace」属性をつかってみましょう。「hspace」はヨコの間隔を、「vspace」はタテの間隔を調節できます。「<IMG SRC="~.jpg" align="left" hspace="20" vspace="10">このように~せんか?」と入力します。↓このように画像の回りにいくつも段落を表示する事はできます。alignは非常に役に立ちます。今回は画像にわかりやすいように、ふちどりをつけてあります。すると、このように「ヨコ20」「タテ10」のスペースがあきました。上の例と比べると、すっきり見やすくなったとおもいせんか?
2006.10.26
・画像を効果的にはる■ 画像のはりかた前回までは、文字をカスタマイズする方法を学びました。今回からは、新しく画像をはる方法について学んでいきます。画像をはるタグは<img src=""> です。「=""」の間には、画像を保管してある場所の住所、つまり画像のURLをいれます。これを「<img src="">」の「=""」の間にいれてあげれば、画像をはることができるのです。楽天広場の場合は、さきに「画像倉庫」に画像を保存することで、自分のブログに画像をはることができます。画像倉庫について詳しくはこちらを参照してください■ 画像に文字を回りこませる次の例をみてください。<img src="~jpg">位置を指定しないで文字を書くと、このように画像の回りにいくつも段落を表示する事はできません。alignは非常に役に立ちます。位置を指定しないで文字を書くと、このように画像の回りにいくつも段落を表示する事はできません。alignは非常に役に立ちます。 このように画像につづいて文章を書くと、画像の下に文章が回りこむことがあって、困っちゃうことよくあります。文章を画像のヨコにキレイにもってくるには、どうしたらいいのでしょう。ここで、またまた「align」属性をつかってみましょう。今回は、属性値に「left」か「right」を入れてみます。<IMG SRC="~.jpg" align="left">このように画像の回りにいくつも段落を表示する事はできます。alignは非常に役に立ちます。 ↓このように画像の回りにいくつも段落を表示する事はできます。alignは非常に役に立ちます。このように画像の左右に文章を回り込ませることができました。もし、文章の量が画像の高さに収まらないときは、画像の下にはみでます。逆に回りこみを強制的に解除したいときは、「br clear=""」をつかいます。「=""」には、画像の位置を左にしたときは「left」、右になら「right」「all」をいれると画像がどちらにあっても、回り込みが解除されます。これで、「br clear=""」以下の文字が画像より下にくるのです。「<IMG SRC="~.jpg" align="right">位置を指定しないで文字を書くと、このように画像の回りにいくつも段落を表示する事はできます。<br clear="left">alignは非常に役に立ちます。」位置を指定しないで文字を書くと、このように画像の回りにいくつも段落を表示する事はできます。alignは非常に役に立ちます。alignは、left、center、rightで指定できます。 次回は、画像の縦横にスペースを空けるです![トップページへ戻る][次のページ⇒]
2006.10.26
・リンクの方法前回までは、画像について学びました。今回からは、リンクについてです。自分のサイトから、ちがうページにリンクをはる。他のサイトにリンクをはる。画像にリンクをはる。こんなとき・・・<a href="">~</a>を使ってみましょう!「=""」には、リンクしたいページのURLをいれます。「~」には、リンクであることがわかる言葉や画像をいれます。たとえば・・・「楽天広場」(「<a href="http://plaza.rakuten.co.jp/">楽天広場</a>」と入力)これをクリックすると、楽天広場のページがでてきます。このように「<a href="">~</a>」をつかうと、自サイトや他サイトにリンクをはることができるのです。とっても便利な「target="_blank"」属性もつかってみよう。この属性をつかうと、リンク先のページを新しいウィンドウで表示することができます。ということは・・・楽天広場のページを閉じると、自分のサイトがまた表示されます。自分のサイトをまた見てもらえる可能性が、グ~ンと高くなるのです。この属性が活躍するのは、たとえばアフィリエイト。自分のページからお店のページを見てもらいますよね。自分のページが常に表示されていると・・・「お店のページを残しつつ、自分のページからまた新しいページを開いて比較する」なんてこともできるのです。上の例ですと「楽天広場」(「<a href="http://plaza.rakuten.co.jp/" target="_blank">楽天広場</a>」と入力します)「a href="」と「target="_blank"」の間には半角スペースを忘れずに。リンクのはり方はこれで終了です。(これとっても大切!)次回からは、いよいよテーブルタグについてです![トップページへ戻る][次のページ⇒]
2006.07.15
・画像リンク 前回は、画像の効果的なはりかたを学びました。今回は、画像タグにリンクを張る方法です。 リンクを張るタグは<a href="リンク先のURL">~</a>です。<a href="リンク先のURL"><img src="バナー画像または画像のURL"></a> ↑<a href="リンク先のURL"><img src="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/img92a1a252hf8ntc.gif" width="92" height="63" alt="車とスクーター"></a>■ 大切なこと ここで見落としがちなのが border="0"です。これを記述しておかないと・・・ ↑<a href="http://my.plaza.rakuten.co.jp/"><img src="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/img92a1a252hf8ntc.gif" width="92" height="63" alt="車とスクーター"></a>このように枠線がでてしまいます。 border="0"を入力するとこのように枠線がとれるのです。 ↑<a href="http://my.plaza.rakuten.co.jp/"><img src="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/img92a1a252hf8ntc.gif" width="92" height="63" alt="車とスクーター" border="0"></a>枠線の消し方を覚えておくと便利ですよ!同じようなやり方でバナーにもつかえます。次回は,リンクのはり方についてです。[トップページへ戻る][次のページ⇒]
2006.07.15
・画像を効果的にはる■ 画像のはりかた前回までは、文字をカスタマイズする方法を学びました。今回からは、新しく画像をはる方法について学んでいきます。画像をはるタグは<img src=""> です。「=""」の間には、画像を保管してある場所の住所、つまり画像のURLをいれます。これを「<img src="">」の「=""」の間にいれてあげれば、画像をはることができるのです。楽天広場の場合は、さきに「画像倉庫」に画像を保存することで、自分のブログに画像をはることができます。画像倉庫について詳しくはこちらを参照してください■ 画像に文字を回りこませる次の例をみてください。<img src="~jpg">位置を指定しないで文字を書くと、このように画像の回りにいくつも段落を表示する事はできません。alignは非常に役に立ちます。位置を指定しないで文字を書くと、このように画像の回りにいくつも段落を表示する事はできません。alignは非常に役に立ちます。 このように画像につづいて文章を書くと、画像の下に文章が回りこむことがあって、困っちゃうことよくあります。文章を画像のヨコにキレイにもってくるには、どうしたらいいのでしょう。ここで、またまた「align」属性をつかってみましょう。今回は、属性値に「left」か「right」を入れてみます。<IMG SRC="~.jpg" align="left">このように画像の回りにいくつも段落を表示する事ができます。alignは非常に役に立ちます。 ↓このように画像の回りにいくつも段落を表示する事ができます。alignは非常に役に立ちます。このように画像の回りにいくつも段落を表示する事ができます。alignは非常に役に立ちます。このように画像の左右に文章を回り込ませることができました。もし、文章の量が画像の高さに収まらないときは、画像の下にはみでます。逆に回りこみを強制的に解除したいときは、「br clear=""」をつかいます。「=""」には、画像の位置を左にしたときは「left」、右になら「right」「all」をいれると画像がどちらにあっても、回り込みが解除されます。これで、「br clear=""」以下の文字が画像より下にくるのです。「<IMG SRC="~.jpg" align="left">位置を指定して文字を書くと、このように画像の回りにいくつも段落を表示する事ができます。<br clear="left">alignは非常に役に立ちます。」↓位置を指定して文字を書くと、このように画像の回りにいくつも段落を表示する事ができます。alignは非常に役に立ちます。alignは、left、center、rightで指定できます。 [トップページへ戻る][次のページ⇒]
2006.07.15
・文字のカスタマイズ■ 改行をつくるタグ前回は、フォントを強調させるタグについて学びました。今回は、改行をつくるタグです。改行 <br> 改行したい部分にこのタグを入れることで<br>改行されます。↓ 改行したい部分にこのタグを入れることで改行されます。 <br>タグには終了タグはありません。回りこみ解除改行 <br clear="位置"><img src="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/img92a1a252hf8ntc.gif" width="92" height="63" alt="回りこみ" align="left">画像に文字の回りこみをしていた場合、<br>回りこみを解除して改行できます。<br clear="left">位置には、left、center、rightが入ります。 ↓画像に文字の回りこみをしていた場合、回りこみを解除して改行できます。位置には、left、center、rightが入ります。改行禁止 <nobr>~</nobr> <nobr>改行させたくない文字を改行させないように出来ます。</nobr>使用例 一般的なブラウザでは<P>~</P>の前後に1行分改行されますが単に改行することが目的の場合には、<P>タグではなく、<BR>タグを使用してください。 終了タグ</p>は省略可能です。 一行空けて改行、行揃えするタグです。一行空けて改行<p> 一行空けて改行します。<p>1行空白が空きます。 ↓一行空けて改行します。1行空白が空きます。 一行空けて行揃え align="left、center、right " <p align="left">一行空けて左</p><p align="center">一行空けて真ん中</p><p align="right">一行空けて右</p> ↓一行空けて左一行空けて真ん中一行空けて右 この前回学んだ<br>と今回の<p>通常の日記の場合は、改行が簡単にできますので普段、使うことはほとんどありません。しかし!! この<br>と<p>の使い方はぜひ覚えておいてくださいね。なぜなら、後々でてくる「<table>」タグや「トップページ自由欄」や「フリーページ」作成時に必須になるからです。要チェック!! 要暗記なタグなのです!![トップページへ戻る][次のページ⇒]
2006.07.15
・文字のカスタマイズ■ フォントを強調させる前回は、文字を自分好みのフォントに変える方法を学びました。今回は、フォントを強調させる方法について学んでいきましょう。文字を強調するときはemタグを使い、さらに強調したいときはstrongタグを使用します。1.強調(太文字) <strong>~</strong>より強調を意味する<strong>太い文字</strong> になります。↓ より強調を意味する太い文字 になります。 説明 ブラウザでの表示のされ方は<B>と同じですが、<strong>タグの方がより強い強調を表します。ただし<strong>タグを乱用すると「SEOスパム」と見なされ逆効果です。<strong>タグは1ページ内に3つまでがよいとされています。キーワードを強調させることにより検索エンジンに拾われる確立が高くなります。 一般的なブラウザでは、強調された部分が斜体、または太字で表示されます。2.強調(斜体) <em>~</em><em>Googleなどの検索エンジンに重要視されるタグです。</em> ↓Googleなどの検索エンジンに重要視されるタグです。 3.addressタグで囲まれた内容には、そのページの作者情報(メールアドレス等)や更新日などを記述します。一般的には、ページの最後で使用されることが多いようです。強調(斜体)アドレスタグ <address>~</address><address>みんタグ@メールアドレス</address> ↓みんタグ@メールアドレス 4.sタグ、またはstrikeタグで、文字に抹消線を引くことができます。取り消し線 <s>~</s> 昔書いた文章の<s>訂正</s>などに使うといいですね。 昔書いた文章の訂正などに使うといいですね。。取り消し線 <strike>~</strike> こちらも<strike>同じ効果</strike>になります。 こちらも同じ効果になります。 5.delタグで、それが抹消された部分であることを明示することができます。取り消し線(削除文) <del>~</del> こちらは文章を<del>削除</del>する意味を含むタグです。 こちらは文章を抹消する意味を含むタグです。6.H1~H6タグ<H1>~<H6>のHとはHeadingの略で、見出しを意味します。 <H1>が最上位の見出し(大見出し)で、以下数字が小さくなるにつれて下位の見出し(小見出し)となります。 H1 楽天広場HTML講座<H1>H1</H1>H2 楽天広場HTML講座<H2>H2</H2>H3 楽天ブログでは使用不可<H3>H3</H3>H4 楽天ブログでは使用不可<H4>H4</H4>H5 楽天広場HTML講座<H5>H5</H5>H6 楽天広場HTML講座<H6>H6</H6>[トップページへ戻る][次のページ⇒]
2006.07.14
・文字のカスタマイズ■ 自分好みのフォントにする前回は、水平線をつくる方法を学びました。今回は、まだご紹介していないタグをまとめてみました。ttタグに囲まれた文字は、等幅フォントで表示されますフォントを等幅にする<tt>~</tt>例:「<tt>等幅フォントです</tt>」↓等幅フォントですblinkタグに囲まれた文字は、点滅して表示されます。文字を点滅させる<blink>~</blink>例:「<blink>Internet Explorerでは点滅しません</blink>」↓Internet Explorerでは点滅しませんこのタグを指定すると、対象の文字にルビ(ふりがな)を付けることができます。ひらがなをふる<ruby><rb>~<rt>ふりがな</ruby> 例:「<ruby><rb>文字<rt>もじ</ruby>」↓文字もじ ※ネスケでは対応していません。文章中の引用部分を明示したいときは、blockquoteタグを使用します。文章を引用する<blockquote>~</blockquote> 例:「<blockquote>まわりに空白ができて、目立ちます</blockquote>」↓まわりに空白ができて、目立ちますフォントタグのface属性を変更します文字の部分を変更してコピー貼り付けで使ってくださいMS Pゴシック(標準)<font face="MS Pゴシック">文字</font>Terminal<font face="Terminal">文字</font>Small Fonts<font face="Small Fonts">文字</font>Arial Unicode MS<font face="Arial Unicode MS">文字</font>MS 明朝<font face="MS 明朝">文字</font>MS UI Gothic<font face="MS UI Gothic">文字</font>HG丸ゴシックM-PRO<font face="HG丸ゴシックM-PRO">文字</font>HGゴシックM<font face="HGゴシックM">文字</font>HGゴシックE<font face="HGゴシックE">文字</font>HG創英角ポップ体<font face="HG創英角ポップ体">文字</font>HG創英角ゴシックUB<font face="HG創英角ゴシックUB">文字</font>ふみゴシック<font face="ふみゴシック">文字</font>HG行書体<font face="HG行書体">文字</font>HG祥南行書体<font face="HG祥南行書体">文字</font>HG正楷書体<font face="HG正楷書体">文字</font>恋文ペン字<font face="恋文ペン字">文字</font>Verdana<font face="Verdana">文字</font>Tahoma<font face="Tahoma">文字</font>Geogia<font face="Geogia">文字</font>Impact<font face="Impact">文字</font>今回で、文字のカスタマイズ講座は終了です。次回からは、画像の掲載方法・リンク作成方法を学んでいきます。[トップページへ戻る][次のページ⇒]
2006.07.14
・文字のカスタマイズ■ 水平線でメリハリを出す前回は、スクロールに背景・余白を加える方法を学びました。今回は、水平線を書く方法です。水平線をうまくつかうと、ページがすっきり区切れてキレイに見えます。水平線を書くのにつかうタグはこれ!<hr> 例:「<hr>」↓ このように線が引けました。では、この線をカスタマイズしてみましょう!線の立体感をなくす(通常は立体的に見えるようになっています)<hr noshade> 例:「<hr noshade>」↓ 線に色をつける<hr color=""> 例:「<hr color="brown">」↓ さらに線の太さを変える(通常の太さは"2")<hr size="">例:「<hr color="brown" size="10">」↓ さらに線の長さを変える<hr width=""> 例:「<hr color="brown" size="10" width="200">」↓ さらに線の位置を変える(属性値は「left」「center」「right」の3つ)<hr align=""> 例:「<hr color="brown" size="10" width="200" align="center">」↓[トップページへ戻る][次のページ⇒]
2006.07.14
・スクロールに背景・余白を加える前回は、スクロールの幅・高さ・回数の変更を学びました。今回は、スクロールの最終回です。スクロールの背景を決める<marquee bgcolor="">~</marquee>「bgcolor」属性を組み合わせることで、スクロールの背景が変わります。「=""」にいれる属性値は「色の名前」か「RGB値」です。例:「#ff9900」でのスクロール背景です。「<marquee bgcolor="#ff9900">オレンジっぽい背景になりました</marquee>」と入力↓オレンジぽっい背景になりました スクロールの余白を決める<marquee hspace="">~</marquee>(ヨコの余白) <marquee vspace="">~</marquee>(タテの余白) 「hspace」「vspace」属性を組み合わせることで、スクロールの余白が変わります。「=""」にいれる属性値は「数字」です。「hspace」で左右に「100ピクセル」の余白を作ってみます。「<marquee hspace="100" bgcolor="#ff9900" width="200">左右があきました</marquee>」と入力↓左右があきました「vspace」で上下に「50ピクセル」の余白をつくってみます。すると・・・上のスクロールとの間に50ピクセルの間があきました。「<marquee vspace="50" bgcolor="#ff9900" width="200">上下があきました</marquee>」と入力 ↓上下があきました【最後にちょこっと応用です】★こんな動きもできるよ★↑「marquee」を2つ使ってサンドイッチ。赤の部分でタテの往復と背景・幅・高さを、黒の部分でヨコの往復を設定しています。「<marquee behavior="alternate" direction="up" height="80" bgcolor="#ff9900" width="400"><marquee behavior="alternate">★こんな動きもできるよ★</marquee></marquee>」と入力 文字のスクロールおもしろかったでしょ?[トップページへ戻る][次のページ⇒]
2006.07.14
・移動する幅・高さ・回数前回は、スクロールスピードの変更方法を学びました。今回は、スクロールの幅・高さ・回数の変更です。スクロールする幅を決めるタグは<marquee width="">~</marquee>です。「width」属性を組み合わせることで、スクロールする幅が変わります。「=""」にいれる属性値は「数字」です。「300」でのスクロール幅です。「<marquee width="300">300ピクセルの幅でスクロールします</marquee>」300ピクセルの幅でスクロールします。「100」でのスクロール幅です。「<marquee width="100">100ピクセルの幅でスクロールします</marquee>」100ピクセルの幅でスクロールしますスクロールする高さを決める<marquee height="">~</marquee>「height」属性を組み合わせることで、スクロールする幅が変わります。「=""」にいれる属性値は「数字」です。進行方法を上下にする「direction=""」属性といっしょにつかいます。「100」でのスクロールする高さです。「<marquee height="100" direction="up">高さ100のスクロールです</marquee>」100ピクセルの高さでスクロールします「50」でのスクロールする高さです。「<marquee height="50" direction="down">高さ50のスクロールです</marquee>」50ピクセルの高さでスクロールしますスクロールする回数を決める<marquee loop="">~</marquee>「loop」属性を組み合わせることで、スクロールする回数が変わります。「=""」にいれる属性値は「数字」です。「loop」属性を設定しないときは、無限にスクロールします。「2」回だけスクロールします。(「更新」を押すと、もう一度みられます)「<marquee loop="2">2回スクロールだけします</marquee>」2回だけスクロールします これで自分の好きなスペースの中で、文字のスクロールが可能になりました。[トップページへ戻る][次のページ⇒]
2006.07.14
・文字の移動スピードを変える前回は、スクロールの方向を変える方法を学びました。今回からは、さらにいろいろな設定をしていきます。スクロールの移動スピードを変えるタグは<marquee scrolldelay=””>~</marquee>です。「scrolldelay」属性を組み合わせる事で、スクロールのスピードが変わります。「=””」に入れる属性は「数字」です。通常は「85」数字が小さくなるとスピードアップします。「10」以下のスピードを指定するときは、「truespeed」属性を付け足します。「85」で通常のスクロールスピードです。「<marquee scrolldelay="85">通常のスピードです</marquee>」と入力。通常のスピードです「200」でのスクロールスピードです。「<marquee scrolldelay=”200">ちょっと遅くなりました</marquee>」ちょっと遅くなりました「10」以下のときは、半角スペースをあけて「truespeed」属性を追加します。「<marquee scrolldelay="10" truespeed>はやすぎーー!!</marquee>」はやすぎーー!!スクロールするスピードを変える<marquee scrollamount="">~</marquee> 「scrollamount」属性を組み合わせることでも、スクロールするスピードが変わります。「=""」にいれる属性値は「数字」です。通常は「6」。数字が大きくなるとスピードアップします。「6」で通常のスクロールスピードです。「<marquee scrollamount="6">通常のスピードです</marquee>」と入力。↓通常のスピードですと入力。「20」でのスクロールスピードです。「<marquee scrollamount="20">ちょっと速くなりました</marquee>」と入力。↓ ちょっと速くなりました「1」でのスクロールスピードです。「<marquee scrollamount="1">ゆっくりゆっくり</marquee>」と入力。↓ゆっくりゆっくり次はスクロールの幅や高さ、回数を決めてみましょう。[トップページへ戻る][次のページ⇒]
2006.07.13
・文字の移動方向を変える前回は、文字をスクロールさせる方法を学びました。今回は、文字のスクロール方向を変えてみます。スクロール方向を変えるタグは<marquee direction=””>~</marquee>です。「direction」属性を組み合わせる事で、スクロールの方向が変わります。「=””」に入れる属性値は「left」「right」「up」「down」の4つ。「left」を入れると、右から左へスクロールします。(指定しない場合もいっしょの動き)「<marquee direction="left">あいうえお</marquee>あいうえお「right」を入れると左から右へスクロールします。「<marquee direction="right">あいうえお</marquee>」あいうえお「up」を入れると下から上へスクロールします。「<marquee direction="up">あいうえお</marquee>」あいうえお「down」を入れると上から下へスクロールします。「<marquee direction="down">あいうえお</marquee>」あいうえお「<center>あいうえお</center>」を入れると文字をセンタリングさせることが出来ます。「<marquee direction="down"><center>あいうえお</center></marquee>」あいうえおどうですか?実際にやって遊んでみて下さいね。[トップページへ戻る][次のページ⇒]
2006.07.13
■ 文字をスクロールさせる前回は、文字と色を同時に変える方法を学びました。今回は、文字のスクロールについてです。使うタグは<marquee>あいうえお</marquee>おいうえお画像もスクロールできます<marquee><IMG SRC=”画像のURL”></marquee>と入力。 スクロールの方法を変える「behavior」属性を組み合わせる事で、スクロール方法が変わります。「=” “」に入れる属性値は「scroll」「slide」「alternate」の3つ。「scroll」を入れると、通常のスクロールをします。「<marquee behavior="scroll">あいうえお</marquee>」と入力おいうえお「slide」を入れると、出た反対側で止まります。「<marquee behavior="slide">あいうえお</marquee>」と入力。(更新ボタンを押すと、もう一度流れが見れます)おいうえお「alternate」を入れると、往復を繰り返します。「<marquee behavior="alternate">あいうえお</marquee>」と入力。おいうえお次回は、文字の移動方向を変えてみます。[トップページへ戻る][次のページ⇒]
2006.07.13
・文字のカスタマイズ■ 文字サイズと色を同時に変える前回は、HTMLタグについてでした。今回は、応用として、文字サイズと色を同時に変えてみましょう。文字の大きさを変えるタグは<font size="">~</font>でした。文字の色を変えるタグは<font color="">~</font> でした。では、このふたつを同時に表現するには、どうしたらいいのでしょう。やり方は<font size="" color="">~</font>です。そう、得意の合体攻撃!「size」も「color」も、ともに「<font>~</font>」の属性。ということで、「<font -------->~」の--部分に仲良くいれちゃうのです。必ず、「font」と「size」の間に半角スペースを。もうひとつ、「size=""」と「color=""」の間にも半角スペースを入れてくださいね。「<font半角スペースsize=""半角スペースcolor="">~</font>」という形です。ちなみに「size=""」と「color=""」の順番はどちらでもかまいません。ちなみに、この属性をまとめる方法は、他のタグでもつかうことができます。ぜひ覚えてね!!では、実際に大きさと色を変えてみましょう。「<font size="1" color="#990033">あ</font>」→「あ」「<font size="2" color="gray">あ</font>」→「あ」「<font size="3" color="green">あ</font>」→「あ」「<font size="4" color="lime">あ</font>」→「あ」「<font size="5" color="aqua">あ</font>」→「あ」「<font size="6" color="#ff6600">あ</font>」→「あ」「<font size="7" color="blue">あ</font>」→「あ」 できました?では次回は、文字をカスタマイズ出来るタグをまとめてみます。[トップページへ戻る][次のページ⇒]
2006.07.13
・HTMLの基本■ HTMLってなに?誰でも簡単に自分のホームページがつくれるようになる。慣れてくるにつれ、自分でデザインをカスタマイズしたい。もっとカッコイイブログにしたい。もっとオシャレなブログにしたい。 そう思った事ありませんか?では、カッコイイブログをつくるためには、如何すれば良いのでしょう。文字に色をつけたり、大きさを変えたりする?印象的な画像をはる?見やすいレイアウトにする?楽天広場の場合なら、トップページ自由欄をカッコよく作ったり、フリーページにアフィリエイトをキレイに並べたりだとかいろいろ手を加えたくなりますよね。それを可能にしてくれるものが、ズバリ「HTML」。HTML(エイチティエムエル)とは「HYPER TEXT MARKUP LANGUAGE」(ハイパーテキストマークアップランゲージ)の略。ホームページを作る時に使う魔法の言葉のこと。これをつかえば、文字の色や大きさを変えたり、画像やリンクをはったり、レイアウトを自由に変える事ができるのです。例えば、文字をセンタリング(中央揃え)したい場合は<center>タグを使用し、「<center>センタリングする文字列 </center>」のようにすることで文字をセンタリング(中央揃え)する事もできます。文字の大きさ(サイズ)を変更したい場合は、<font size="7"> 大きくなります </font>※size="サイズ"の色の部分を1~7の数字に変えると文字の大きさを変えることができます。 文字の色を変えたい場合は、<font color="red"> ここが赤くなる </font>#FFFFFFのようにRGB値カラーコードで指定することも可能です。whiteblackgraybluecyangreenlimekhakiyelloworangebrownredpinkpurplevioletAqua※タグと呼ばれるカッコで文字などをくくることでデザインや大きさを変えたりすることができます。 タグは「」ではさまれたのような形をしておりデザインを変えたい文字などを「HTMLを適用させる文字列</○○○○>」のようにくくることで機能します。では、実際にどうやって使って行くのか。詳しい使い方を、次回から順をおってみていきましょう![トップページへ戻る][次のページ⇒]
2006.07.13
全28件 (28件中 1-28件目)
1