3493150 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

楽天広場HTML講座

全28件 (28件中 1-10件目)

1 2 3 >

全て | カテゴリ未分類 | HTML文字画像リンク | HTMLタグ(テーブル) | HTML(応用編) | アフィリエイト入門編 | ユーザービリティとSEO | 楽天で購入した商品 | 生活,美容,健康,家電 | スポーツ,アウトドア,車,バイク | 金運アップ,風水,自己トレ | 楽天市場のPR | 食品,グルメ,飲料 | ダイエット,健康,食品 | 園芸,DIY,ペット,おもちゃゲーム | 日用品雑貨,キッチン用品,寝具 | ファッション,ジュエリー,アクセサリー,靴 | パソコン・周辺機器 | アフィリエイト | 防災,介護,医療 | TV・オーディオ・カメラ | 自己管理,美容,インナー | DVD,CD,本,旅,楽器 | インテリア,ライト,収納,ベビー,キッズ | 心緒 | 音楽 | ブランド雑貨,時計 | 酒場放浪記 | 天気気象予報 | 気になる動画 | 最近チェックした商品 | 血圧測定 | 気になるニュース | 人生の名言集

HTML文字画像リンク

2012.03.02
XML
カテゴリ:HTML文字画像リンク
・引用タグ




<Blockquote>~</Blockquote>

タグを記入します。

このHTMLタグを使えば、文章の引用をしていると一目見て分かります。



例えば次の例を見てください

段落全体など、ブロック要素の引用を行う場合に用いられます。
文章の縦横に余白ができ
これを使えば、文章の引用をしていると一目見て分かります。



入力ソース

<Blockquote>段落全体など、ブロック要素の引用を行う場合に用いられます。
文章の縦横に余白ができ
これを使えば、文章の引用をしていると一目見て分かります。</Blockquote>




[トップページへ戻る]






Last updated  2012.03.02 15:32:07
カテゴリ:HTML文字画像リンク
・リストのつくり方(3)


前回は、複雑なリストのつくり方について学びました。
今回は、定義型リストの作り方を学んで行きます。


定義型リストを作るには


<DL>
<DT>
<DD>
</DL>

タグを記入します。


全体を<DL>~</DL>で囲み、見出しの先頭に<DT>を。見出しの内容の文章の先頭に<DD>を記入します。



例えば次の例を見てください


見出し1
見出し1に対する箇条書き

見出し2
見出し2に対する箇条書き



入力ソース

<DL>
<DT>見出し1
<DD>見出し1に対しての箇条書き

<DT>見出し2
<DD>見出し2に対しての箇条書き
</DL>




[トップページへ戻る]







Last updated  2012.03.02 10:45:10
2008.06.20
カテゴリ:HTML文字画像リンク
・フォントの変え方



フォントタグの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ページへ戻ります







Last updated  2008.06.20 11:48:42
2008.04.04
カテゴリ:HTML文字画像リンク
・リンクの方法


前回までは、リンクについて学びました。
今回は、ページの特定の場所にリンクを張る方法についてです。



自分のサイトから、ページ内の特定の場所にリンクを張るには
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をいれます。
「~」には、リンクであることがわかる言葉や画像をいれます。


"ココ下段にジャンプします。"


リンクのはり方はこれで終了です。(これとっても便利!)
次回からは、いよいよテーブルタグについてです!






[トップページへ戻る][次のページ⇒]







Last updated  2008.12.20 20:20:10
2007.04.03
カテゴリ:HTML文字画像リンク
・文字のカスタマイズ


■ フォントを強調させる



前回は、文字を自分好みのフォントに変える方法を学びました。
今回は、フォントを強調させる方法について学んでいきましょう。


文字を強調するときは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






Last updated  2008.04.04 12:30:12
2007.04.02
カテゴリ:HTML文字画像リンク
・文字のカスタマイズ


■ テキスト・フォントタグ



前回は、水平線をつくる方法を学びました。
今回は、まだご紹介していないタグをまとめてみました。


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






Last updated  2007.04.02 16:14:42
2007.03.16
カテゴリ:HTML文字画像リンク
・画像を効果的にはる


■ 画像のはりかた



前回までは、文字をカスタマイズする方法を学びました。
今回からは、新しく画像をはる方法について学んでいきます。



画像をはるタグは<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][次のページ⇒]






Last updated  2008.11.19 10:09:11
2007.02.02
カテゴリ:HTML文字画像リンク
・フィルタ


今回は、フィルタについて学んで行きたいと思います。



フィルター(フィルタ、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">


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>


ky64-31.gif


↓入力ソース

<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>


ky64-31.gif


↓入力ソース

<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>



ky64-31.gif


↓入力ソース

<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>



ky64-31.gif


↓入力ソース

<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








Last updated  2008.11.19 10:12:21
2007.01.18
カテゴリ:HTML文字画像リンク

ゆっくりゆっくり




入力ソース

<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






Last updated  2007.01.18 14:18:10
2007.01.10
カテゴリ:HTML文字画像リンク
・リストのつくり方(2)


前回は、リストのつくり方について学びました。
今回は、アルファベットやローマ字を使ったリストの作り方を学んで行きます。


アルファベットやローマ字を使ったリストを作るには


<ol type="a,A,1,i,I のいずれか1つ"><li>~</li></ol>


タグを記入します。

その中にリストの項目分の<li>項目名</li>を記入します。

最後に</ol>タグを記入します。



例えば次の例を見てください


  1. モンブラン

  2. チョコレートケーキ

  3. チーズケーキ




入力ソース

<ol type="A">
<li>モンブラン</li>
<li>チョコレートケーキ</li>
<li>チーズケーキ</li>
</ol>




type=~"を a にした時



  1. モンブラン

  2. チョコレートケーキ

  3. チーズケーキ




入力ソース

<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 のいずれかを指定





  1. モンブラン

  2. チョコレートケーキ

  3. チーズケーキ




入力ソース

<ol type="A">
<li>モンブラン</li>
<li type="a">チョコレートケーキ</li>
<li type="I">チーズケーキ</li>
</ol>




こんな感じですね。
<li="値">タグを使うことによって、より複雑な
リストをつくることができます。






[トップページへ戻る]








Last updated  2008.11.03 10:57:10

全28件 (28件中 1-10件目)

1 2 3 >


Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.