2026
2025
2024
2023
2022
2021
2020
2019
2018
2017
2016
2015
2014
2013
2004年09月の記事
全22件 (22件中 1-22件目)
1
-
タグを覚えよう【第４５回目】 - 何かの周りの線（２回目）
今日も昨日に引き続き・・・何かの周りに線を引く方法を紹介しましょう。まぁ、何かでは分かりにくいのでという画像に的をしぼって話を進めていましたよね(〃⌒▽⌒)しつこいようですが、今回は画像で紹介するだけで・・・方法自体は「TD」にでも「P」にでも「DIV」にでも「SPAN」にでも・・・はたまた「I」や「B」、「H2」までほんとうにいろいろなことに使用できるものとなっています。しっかりマスターしましょう(￣▽￣人)では早速いっきに例を紹介しましょう(〃⌒▽⌒)例）<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:solid 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:double 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:dashed 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:dotted 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:groove 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:ridge 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:inset 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:outset 12px #9999ff;"><br>表示結果）「border」を使用することにより、画像の周りの線をいろいろと変更することができます。スタイル、太さ、色を任意の順番にスペースで区切って指定をします。ただし、「border」では上下左右の線を個別に指定することはできません(´･ω･`)もし、個別に上下左右の線をいろいろと変更したい場合は上の線に関する指定：border-top左の線に関する指定：border-left右の線に関する指定：border-right下の線に関する指定：border-bottomをそれぞれ使用してください。記述方法は「border」と同じです(￣▽￣人)◇ スタイルに関する指定スタイルに関する指定は以下のキーワードのいずれかを指定します。none線は表示されず、太さも0になります。表のセル等線が重なり合う場合は他の値が優先されます（初期値）。hidden線は表示されず、太さも0になります。表のセル等線が重なり合う場合はこの値が優先されますsolid1本線で表示されます。double2本線で表示されます。dashed破線で表示されます。dotted点線で表示されます。groove立体的にくぼんだ線で表示されます。ridge立体的に隆起した線で表示されます。inset上と左の線が暗く、下と右のボーダーが明るく表示されます。outset上と左の線が明るく、下と右の線が暗く表示されます。◇ 線の太さに関する指定線の太さは単語もしくは数値で指定します。単語はthin ：細いmedium ：普通thick ：太いを指定することができます。ただし、単語で太さを指定した場合、実際に表示される太さはブラウザによって異なりますので注意が必要です。◇ 線の色に関する指定色の指定の際にはＲＧＢカラーを使用してくださいここをクリック！！以前紹介したときは・・・さも当たり前のように記述して何も解説をしていませんでしたよね(´･ω･`)ってなわけで紹介しなおしました(〃⌒▽⌒)
Sep 30, 2004
コメント(6)
-
タグを覚えよう【第４５回目】 - 何かの周りの線（１回目）
今日は何かの周りに線を引く方法を紹介しましょう。どこかで聞いたような聞いたこと無いような・・・そんな内容になっています(〃⌒▽⌒)まぁ、ただ今回は漠然と何か・・・ではよく分かりませんのでという画像に的をしぼりましょう。ただ、今回は画像で紹介するだけで・・・方法自体は「TD」にでも「P」にでも「DIV」にでも「SPAN」にでも・・・はたまた「I」や「B」、「H2」までほんとうにいろいろなことに使用できるものとなっています。しっかりマスターしましょう(￣▽￣人)例）<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px 9px;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px 9px 12px;">表示結果）違いはわかりますか？ＨＴＭＬで記述する場合はborder=3のように全体に対する記述しかできませんでしたよね。スタイルシートを使用し、スペースで区切り複数の値を指定することによって上下左右を異なった幅にすることができるというわけです(￣▽￣人)上記例で分かるかと思いますが、値を1つ指定： 上下左右が指定幅値を2つ指定： 記述した順に上下、左右が指定幅値を3つ指定： 記述した順に上、左右、下、が指定幅値を4つ指定： 記述した順に上、右、下、左が指定幅となっています(〃⌒▽⌒)線の太さは単語もしくは数値で指定します。単語はthin ：細いmedium ：普通thick ：太いを指定することができます。ただし、単語で太さを指定した場合、実際に表示される太さはブラウザによって異なりますので注意が必要です。明日はさらにいろいろな線の引き方を細かく見ていきましょう(〃⌒▽⌒)では、またあしたー(ﾟ▽^*)ﾉ⌒☆
Sep 29, 2004
コメント(2)
-
タグを覚えよう【第４４回目】 - テーブルの基礎
今日も復習がてらテーブルのおさらいをしてみましょう(〃⌒▽⌒)初めて読む方向けに書きますので・・・２回目な方はさらーっと読み飛ばしてください。今回はあまり余分な機能の説明は省いて、テーブルの基本について勉強しましょう(￣▽￣人)まずはテーブルって何か知ってますか？英語では「Table」のように記述します。おそらく日本人が真っ先に思い浮かぶのは机と言う意味の「テーブル」でしょうが、今回はもちろん違います。テーブルにはもう一つ意味があり、「表（ひょう）」と和訳することもできるのです。まずは例を見てもらいましょう。例）○×○×○×○××上記の例では「○×ゲーム」っぽく表（ひょう）を使いましたが、これをテーブルと呼んでいます。これから紹介しますテーブルタグを使用することによって、Ｗｅｂページ上でいろいろな表（ひょう）を描画することができるというわけです。ただ、テーブルには表を描画する以外に、もう一つとてもよく使う使い道があります。もう一度例を見てください。例）○×○×○×○××表（ひょう）の線を消すことにより、ＨＴＭＬタグだけでは難しい配置に関するデザインもできるようになるというわけです。テーブルは作表のためだけに使われているのではない、ということも理解しておいて下さい。さてテーブルを作る方法ですが、これは少し複雑な記述となっています。基本的に３つのタグを組み合わせることにより、一つのテーブルを表現します。逆を言えば、テーブルを構成するタグは３つそろって１セットです。一つ一つでは意味をなさないことに注意してください。では早速記述例を見てみましょう。例）<table border="1"><tr><td>名前</td><td>住所</td></tr><tr><td>七鍵</td><td>www.7key.jp</td></tr></table>表示結果）名前住所七鍵www.7key.jp３つのタグを使っていることは分かってもらえましたか？順番に解説していきましょう。<table border="1">～</table>で囲まれた範囲はテーブルであることを表しています。「今からテーブルを記述します」「ここまでがテーブルでした」と宣言を行っているわけですね(￣▽￣人)<tr>～</tr>で囲まれた範囲は一行であることを表しています。「今から行が始まります」「ここまでで１行は終わりです」と宣言していることになります(〃⌒▽⌒)ですから、行を増やしたい場合は次のように記述します。例）<table border="1"><tr><td>名前</td><td>住所</td></tr><tr><td>七鍵</td><td>www.7key.jp</td></tr><tr><td>○○</td><td>××</td></tr></table>表示結果）名前住所七鍵www.7key.jp○○××そして最後に<td>～</td>で囲まれた範囲は一ますであることを宣言しています。ちなみに余談ではありますが、この一ますのことをセルと呼びますので覚えておくとよいかもしれません(〃⌒▽⌒)上記例では行を増やしましたので、列を増やす例も紹介しておきましょう。例）<table border="1"><tr><td>名前</td><td>住所</td><td>○○</td></tr><tr><td>七鍵</td><td>www.7key.jp</td><td>××</td></tr></table>表示結果）名前住所○○七鍵www.7key.jp××見てもらえば分かる通りなのですが「<tr>～</tr>」と「<td>～</td>」を増やすことにより行や列を増やしたり減らしたりできるというわけです(〃⌒▽⌒)
Sep 28, 2004
コメント(4)
-
タグを覚えよう【第４３回目】 - ＨＰに画像をはろう（復習）
今日はＨＰに画像を貼る方法の復習をしましょう。つまり「絵」や「写真」をＨＰに載せてみよう！ってことです(〃⌒▽⌒)まずは、楽天専用の方法をご紹介します。管理画面から「画像倉庫（画像の登録管理）」という画面を開き、まずあなたのパソコンに保存してあります写真や絵を「楽天」に保存します。すると、「保存した画像の一覧」というところに保存した画像が出てきますよね。それをクリックすると・・・下記のHTMLを利用すると、ホームページにこの画像を表示できます。<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key">って画面になりますよね(〃⌒▽⌒)この呪文を「日記」や「TOP自由欄」などの書き込み欄に貼り付けると、あら不思議・・・画像が表示されますよねー(￣▽￣人)覚えていますか？この辺りは基本中の基本ですよね。しっかりマスターしましょう(〃⌒▽⌒)次に画像の倍率を変える方法を紹介します。例）<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="300" height="100" alt="key">表示結果）見てのとおりですね(〃⌒▽⌒)「width」が画像の幅、「height」が画像の高さを表しています。もちろん、<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="50" height="50" alt="key">のように指定しますと、縮小表示されます。表示結果）もともとある画像を拡大したり縮小したり、縦横比を変えてみたりしたいときに便利ですよね(〃⌒▽⌒)さらに画像の周りを線で囲んでみましょう！例）<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" border="1"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" border="7">表示結果）これも簡単ですよね(〃⌒▽⌒)「border」に線の幅を指定します。指定する数が大きければ大きいほど太い線になるってことです。プラス・・・IE専用の裏技も紹介しておきます(〃⌒▽⌒)例）<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: blur(direction=45, strength=20);"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: xray();"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: invert();"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: flipv();"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: fliph();"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: wave(freq=3,lightstrength=50,strength=5);">表示結果）あまり深く考えないで下さい（笑こう記述したらこうなるんだ、くらいのちょっとした裏技でした(〃⌒▽⌒)（もう少し詳しく知りたい方はこちらを参考にしてみて下さい）最後のIE専用裏技は余計でしたが・・・他の記述は基本中の基本です(〃⌒▽⌒)しっかりマスターしましょう(￣▽￣人)
Sep 26, 2004
コメント(5)
-
タグを覚えよう【第４２回目】 - 文字の色いろいろ（復習）
今日は文字の色を変更する方法の復習です。初めての方はしっかりマスターするつもりで読み進めて下さい。２回目の方は・・・さらっと読み飛ばしつつもしっかり思い出してください（笑まずは以前にも紹介しました簡単に色の指定が分かる教材です(￣▽￣人)ここをクリック！！これを使えば多分簡単に色の指定ができること間違いなし(￣▽￣人)適当に遊んでみて下さい。赤と青と緑のつまみがあって、それを動かしたら背景の色が変わりますよね(〃⌒▽⌒)背景と一緒に右の方にある四角の枠内の文字も変わってることに気がつきましたか？「#02f811」のように「#」が頭についている７桁の文字のことなんですが、なんとこれが色を表す記号となっているのです。とっても簡単でしょ(〃⌒▽⌒)メモリを動かして好きな色を作ったら右上の四角の枠を見る！たったそれだけであなたの好きな色を表す記号が完成するのですから（笑さて、色を表す記号が完成したところで、実際に文字の色を変えてみましょう。例）<font color="#ff0000">テスト</font><font color="#ff00ff">テスト</font><font color="#ffff00">テスト</font><font color="#0000ff">テスト</font><font color="#00ffff">テスト</font><font color="#ffffff">テスト</font><font color="#000000">テスト</font>表示結果）テストテストテストテストテストテストテスト記述の仕方はぜんぜん難しくないですよね。プラス忘れてはいけない応用サンプル(￣▽￣人)例）<font color="#ff0000" size="6">応用例</font>表示結果）応用例文字の大きさの指定と組み合わせることもできるってサンプルでした(〃⌒▽⌒)文字の指定に限らず、Webページを作成する際にはさまざまな色の指定を行います。文字色の指定を通して色を指定する「感覚」のようなものを身に付けてもらえれば幸いです(￣▽￣人)ではまたあしたー(ﾟ▽^*)ﾉ⌒☆
Sep 25, 2004
コメント(10)
-
タグを覚えよう【第４１回目】 - 文字の大きさを変更する
今日から少しずつ今までに話してきた内容の復習をしましょう(￣▽￣人)初期のころは急ぎすぎて・・・せっかく読んでくれた方もあまり頭に入ってないし最近読み始めてくれた方はめんどくさくて昔の内容まで読んでないでしょうしなにより・・・もう解説するタグが残ってないのですよ(´･ω･`)ってなわけで今日は文字の大きさを変える復習です(〃⌒▽⌒)ＨＴＭＬで指定できる文字のサイズは７種類でしたよね。例）<font size="1">サンプル文字</font><font size="2">サンプル文字</font><font size="3">サンプル文字</font><font size="4">サンプル文字</font><font size="5">サンプル文字</font><font size="6">サンプル文字</font><font size="7">サンプル文字</font>表示結果）サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字文字に対するいろいろな指定は<font>タグを使うのでしたよね。サイズ指定では、数字が大きいほど文字も大きくなります。ちゃんと覚えていました？
Sep 24, 2004
コメント(1)
-
タグを覚えよう【第４０回目】 - 楽天で「OnMouse」？
今日はちょっとした裏技を覚えましょう(〃⌒▽⌒)とは言いましても・・・とっても簡単ですよ(￣▽￣人)どんなものかおぼつかない（？）日本語で説明するより実際見て下さい。例）<span title="文字が出ましたよね？">ここにマウスを乗せて下さい</span>表示結果）ここにマウスを乗せて下さいどうですか？ブラウザによって挙動も違いますので一概には言えないのですがたいていのブラウザでは付箋のようなコメントが近くにでると思います(〃⌒▽⌒)これ、意外と使えますよね(￣▽￣人)例）ここは<span title="HitPointではありません">ＨＰ</span>作成のための解説ページです。表示結果）ここはＨＰ作成のための解説ページです。のようにちょっとしたコメントに最適でしょ(〃⌒▽⌒)え？こんなとこ誰もマウスを重ねないからあるだけ無駄？そりゃそうですよね(´･ω･`)では、少し装飾しておきましょう(￣▽￣人)例）ここは<span title="HitPointではありません" style="border-bottom:double 4px #ff00ff;">ＨＰ</span>作成のための解説ページです。表示結果）ここはＨＰ作成のための解説ページです。こんな感じに装飾しておき、「ピンクの線の箇所はマウスを乗せてみて下さいね(￣▽￣人)」とでも注意書きをのせておけばどうでしょう？注釈程度には使えると思いますよ(〃⌒▽⌒)では、またあしたー(ﾟ▽^*)ﾉ⌒☆
Sep 22, 2004
コメント(8)
-
タグを覚えよう【第３９回目】 - 長さの単位
Ｗｅｂページを作る際に何かの大きさを指定することが多々ありますよね。例えば線の幅であったり、画像の高さであったり、文字の大きさであったり・・・今回はそれらの大きさを指定するための単位について話をしましょう(〃⌒▽⌒)まず、ＨＴＭＬタグで使用できる長さの単位についてです。「width="50"」のように、何も単位をつけずに記述すればピクセル指定となります。このピクセルと言う単位ですが、ディスプレイで表示することができる最小値を「1px」としています。パソコンで何かを表示する際は、点の集合としてその何かを表示します。文字も点の集合で表されていますし、写真のような画像も点の集合で表されています。早い話が、その点の大きさを「１ピクセル」と呼んでいるのです(￣▽￣人)ここで注意が必要なのですが、この「１ピクセル」は万人共通の単位ではありません(´･ω･`)表示することができる最小の単位と言うものはディスプレイのサイズによっても変わりますし、ディスプレイの解像度にもよります。つまり、ピクセルという単位は見る人の環境によって見た目の長さが変わってしまうので、注意が必要です。ただ、このピクセルという単位はスタイルシートでも使用することができますし、ディスプレイの表示単位がそもそもピクセルですから、画面表示優先でＷｅｂページをデザインする場合には非常に便利です。特徴をしっかりつかみ使いこなしましょう。次に「％」ですが、これはサイズを100分比で指定するものとなっています。何に対する比率かは使いどころによって違ってきます。例えば、「今の文字のサイズに対して120%の大きさで表示」とか、「今の画面サイズの半分の大きさで画像を表示」とか・・・こちらもピクセルと同様、ＨＴＭＬでもスタイルシートでも使うことができます。使い方によっては重宝するのではないでしょうか(〃⌒▽⌒)ＨＴＭＬで主に指定できる長さや大きさの単位は以上の２つです。これらは二つともディスプレイに対しての相対値になっているのが特徴といえます。ここから以降はスタイルシート（CSS）にて使用できる単位を紹介していきますが、スタイルシートはＷｅｂページの見栄えを記述するという役割がありますので、ＨＴＭＬに比べ何かの大きさや長さを指定する機会が多いですよね(￣▽￣人)そのため使用できる単位も増え、ＨＴＭＬには無かった環境に依存しない大きさも設定できるようになっています。具体的には次の表をごらんください。incmmmptpcin-2.45cm24.5mm72pt6pccm0.39in-10mm28.1pt2.34pcmm0.039in0.1cm-0.281pt0.234pcpt0.0139in0.0353cm0.353mm-0.0833pcpc0.167in0.4244.24mm12pt-やはり日本人がなじみ易いのは「cm」や「mm」ですよね(￣▽￣人)この二つは小学校でも習う単位ですので大丈夫ですよね(〃⌒▽⌒)「in」はインチの略で、ヤード-ポンド法の長さの単位となっています。アメリカやイギリスで広く使用されているらしいですね。「pt」はポイントの略で活字サイズに使用される単位となっています。Microsoft-ExcelやMicrosoft-Word、Adobe-Fotoshopなどなど。アプリケーションソフトにて文字のサイズを指定する際に見かけるあの単位です。「pc」はパイカの略で印刷レイアウトに使用される単位となっています。これらの単位にて長さや大きさを指定した際には閲覧者の環境に依存せず、Ｗｅｂページの作成者が意図した大きさで表示することができる、ということになっています。そして、スタイルシートにはピクセルとパーセントの他にも相対的に大きさを指定できる単位が用意されています。一つ目は「em」という単位でエムと発音します。この単位は、その時点で使用されている文字の大きさを１とした比率になり、考え方自体はパーセントと同じです。そのため、「1em」の大きさはとても流動的です。例）フォントサイズ「12px」の際の「1.5em」は「18px」と同じ大きさになります。フォントサイズ「20px」の際の「1.5em」は「30px」と同じ大きさになります。更に「ex」という単位もあります。こちらはエックスハイトと発音し、その時点で使用されているフォントのアルファベット小文字「x」の高さを基準とした大きさとなっています。そのため、同じ文字サイズであっても、使われている文字の種類によって大きさが異なるという特徴を持っています。あまり普段聞きなれない単位もたくさんでてきました。適材適所と言いますか・・・知ってて損はないですよね(〃⌒▽⌒)しっかり覚えておきましょう(￣▽￣人)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆
Sep 21, 2004
コメント(2)
-
タグを覚えよう【第３８回目】 - リストの向かって右側に絵を入れる方法
今日は実践編として・・・リストの右側に絵をいれる方法を解説します(〃⌒▽⌒)いろいろな方法があると思いますがなるべくシンプルな方法を解説していきますね(￣▽￣人)まずはテーブルを使った方法例）<table border=0><tr><td><ul><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul></td><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif"></td></tr></table>表示結果）リスト１リスト２リスト３表示がくずれる際はセルの幅を指定してみましょう(￣▽￣人)例）<table border=0><tr><td style="width:300px;"><ul><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul></td><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif"></td></tr></table>表示結果）リスト１リスト２リスト３さらに・・・画像の上から文字を記述したい場合は・・・画像をセルの背景にしてやればよさそうですよね(￣▽￣人)例）<table border=0><tr><td style="width:300px;"><ul><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul></td><td style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif);width:300px;height:140px;background-repeat:no-repeat;">ここに文字(￣▽￣人)</td></tr></table>表示結果）リスト１リスト２リスト３ここに文字(￣▽￣人)テーブルって本当に応用範囲広いですよね(￣▽￣人)アイデア次第でいろいろなことができちゃいます。しっかり使いこなしたいですよね(〃⌒▽⌒)最後に、テーブルを使わない方法もひとつ紹介しておきましょう。例）<div style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif);width:300px;height:140px;background-repeat:no-repeat;background-position:right;"><ul><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul></div>表示結果）リスト１リスト２リスト３実は・・・今日はある方からの質問を元にお送りいたしました(〃⌒▽⌒)皆さんも解説してもらいたい内容がもしありましたら・・・遠慮なくどうぞ(￣▽￣人)では、またあしたー(ﾟ▽^*)ﾉ⌒☆
Sep 17, 2004
コメント(8)
-
タグを覚えよう【第３７回目】 - ストロング？
今日は少し珍しいタグをご紹介します。とは言いましてもたいしたこと無いので・・・余談程度に読んでください(〃⌒▽⌒)もう題名の通りその名も「ストロング」タグです（笑早速例を見てみましょう。例）<strong>ここが強調されます</strong>表示結果）ここが強調されますはい、何も珍しくありませんね(´･ω･`)ただ単に太字になっているだけで表示結果は「B」タグと何も変わりません。ちなみに「B」タグは・・・例）<b>ここが太字になります</b>表示結果）ここが太字になりますでしたよね(〃⌒▽⌒)で、ストロングに戻りまして・・・何が「B」タグと違うかと言いますと・・・意味が全く違います「B」タグはただ文字を太字に表示するだけのタグです。意味など何も持ちません。変わって、ストロングタグが太字に表示されているのは結果だけの話で・・・Webページ内で強調したい部分に対して使用するタグなのです。グーグルなどロボット型検索エンジンは人間の手を介さずプログラムが自動で検索結果に使うページを集めてきます。その際に優先キーワードとして挙げられますのがこのストロングタグの中身です。（もちろんストロングだけではありませんが・・・）せっかくＨＰを作るからにはいろいろな人に見てもらいたいですよね？そして見てもらうためには、検索した人が指定したキーワードにマッチしたページであることが条件となります。誰も自分が知りたいことがないページ、興味がないページは見ようとしませんよね(´･ω･`)あなたのページを必要としてくれている人に見てもらうためにも適切な指定をしたいですよね(〃⌒▽⌒)しっかりタグの意味を理解し、適切なタグを使うように心がけましょう(￣▽￣人)では、またあしたー(ﾟ▽^*)ﾉ⌒☆
Sep 16, 2004
コメント(2)
-
タグを覚えよう【第３６回目】 - 文字の種類を変えてみよう
しばらくつまらない話ばかりが続いてしまいましたので今日辺りぱーっと分かりやすい講座にしましょう(〃⌒▽⌒)ってなわけで、題名の通り・・・文字の種類を変えてみることにしましょう(￣▽￣人)文字の種類って何？って方のためにまずはサンプルを見て下さい(〃⌒▽⌒)例）<font face="ＭＳ Ｐ明朝">ＭＳ Ｐ明朝</font><font face="ＭＳ Ｐゴシック">ＭＳ Ｐゴシック</font><font face="HG丸ｺﾞｼｯｸM-PRO">HG丸ｺﾞｼｯｸM-PRO</font><font face="Comic Sans MS">Comic Sans MS</font><font face="Westminster">Westminster</font><font face="Lucida Sans">Lucida Sans</font>表示結果）ＭＳ Ｐ明朝ＭＳ ＰゴシックHG丸ｺﾞｼｯｸM-PROComic Sans MSWestminsterLucida Sans注意）分かりやすいように、表示結果は文字を大きく指定しています。どうでしょうか(〃⌒▽⌒)なんでも変化が大事ですよね(￣▽￣人)ワンポイントとして文字の種類を変えるのも良し、ページ全体の文字の種類を変えるのも良し(〃⌒▽⌒)いろいろと使えますよね。ただ今回は、記述する際に注意事項があります(´･ω･`)フォント名は、全角半角、大文字小文字をすべて正しく記入しないといけませんフォント名にスペースが入る場合は半角のスペースを入れなければなりませんページを見てくれる人のパソコンに指定されたフォントがない場合、この指定は無視されます上記２点は守らなければ文字の種類が変わらず、標準の文字で表示されてしまいます。フォントが無い場合も標準の文字で表示されてしまいます。まぁ、何も表示されないわけではなく、種類を指定しない状態では表示されますのであまり神経質になることもないかもしれませんね（笑では、またあしたー(ﾟ▽^*)ﾉ⌒☆
Sep 15, 2004
コメント(2)
-
タグを覚えよう【第３５回目】 - スタイルシートってなに？
前回の「タグってなに？」という話で、「文字の大きさ、色、太字、見出し、画像表示、表、などなど、Ｗｅｂページに必要な命令はHTML タグにて命令する」と解説を行いましたよね。しかし実はこれ、正確な表現ではないのです(´･ω･`)本来ＨＴＭＬは効率的に情報を発信できるように、文書の構造を記述することが主な目的となっています。ですから、そこに文字の色や形など見栄えに関する情報を記述してしまいますと、せっかくの大事な情報が見栄えを表す記述（命令）に埋もれて不明確となり、本来の趣旨から外れてしまうのです。「ではどうやって、見栄えに関する命令を行えばいいの？」と当然思われるでしょう。その答えがスタイルシートなのです(〃⌒▽⌒)スタイルシートを使用することにより、本文とは別に見栄えのルールを設定することができます。そればかりではありません(￣▽￣人)このスタイルシートを外部ファイルとして保存することにより、Ｗｅｂサイト全体で統一した見栄えを実現することも可能ですし、一度作成した見栄えを修正することも簡単となります。早い話が、スタイルシートを使って文書のコンテンツや論理構造と表現のルールを分離することによって、さまざまなメリットがうまれるというわけです。ただ、残念ながら・・・ここ「楽天」では外部ファイルとしてスタイルシートを保存することはできません(´･ω･`)ページのスタイルを一括して指定する方法もとれません(´･ω･`)ではなんのために？とおっしゃられるかもしれませんが知っているにこしたことはありませんよね(〃⌒▽⌒)見た目の効果だけでもタグだけで記述するよりはるかにいろいろなことができます。しっかり基本を覚えましょう(〃⌒▽⌒)まずは用語の定義からです。p{color:#0000ff;font-size:20px;}セレクタプロパティ値プロパティ値宣言例として要素名「P」（段落を表すタグです）の文字色を「#0000ff」（青色）、文字の大きさを「20px」のように表示するスタイルシートについて見てみましょう。最初の「p」（要素名）のことをセレクタ（Selector）と呼び、見栄え（スタイル）を適用する対象を記述します。そして、「{」と「}」で囲まれた範囲を宣言（Declaration）と呼びます。宣言の中にはプロパティとその値をコロン（ : ）で区切って記述します。プロパティと値のペアはセミコロン（ ; ）で区切って複数記述することもできます。ただし・・・今のところ「楽天」では以上のような記述はできません(´･ω･`)個々のタグ内に「style」属性として見栄え（スタイル）に関する情報を指定するしかないのです。個々に見栄えを指定しますので・・・同じ種類のタグ（要素タイプ）でも他の場所にあるタグ（要素）にはその見栄えが反映されることはありません。また、見栄え（スタイル）を適用する対象は明らかなので、以下のようにセレクタは記述せず、宣言のみを記述します。□sample.html<html> <head> <title></title> </head> <body><p style="color:#0000ff;font-size:20px;">ここの段落にスタイルが適用されます。</p> </body></html>以上、楽天ではだめ、楽天ではだめ・・・ばかりの説明でしたが(´･ω･`)理解できたでしょうか？大事なのは・・・HTMLは文書の構造を表すものであって見栄えを表すものでは無い、ということです。見栄えはスタイルシートを使用し表現するものなのですね(〃⌒▽⌒)では、また明日ー(ﾟ▽^*)ﾉ⌒☆
Sep 14, 2004
コメント(5)
-
タグを覚えよう【第３４回目】 - タグってなに？
今日はスタイルシートの話を進めようかとも思ったのですが・・・実は今までHTMLタグについての話を全くしていなことに気づきました(´･ω･`)これじゃ順番が違いますよね(´･ω･`)ってことで今日はHTMLタグっていったいなんなのか、ということをお話しましょう(〃⌒▽⌒)少し復習になりますが、HPってなんでできてるの？で「ＨＴＭＬファイルの中身はＨＴＭＬ専用の特別な記述方法で書かれています」と話をはぐらかせていましたよね。この「ＨＴＭＬ専用の特別な記述」に使う記号のことを「ＨＴＭＬタグ」と呼びます。タグとはもともと「荷札」と和訳されるのですが、コンピューターの世界では多少意味が違っていまして、「命令の始まりと終わりを示す記号」ということになっています(〃⌒▽⌒)不等号でタグ名を囲む（<タグ名>）ことにより命令の始まりを示す記号を記述することができ、不等号でスラッシュ（/）とタグ名を囲む（</タグ名>）ことにより命令の終わりを示す記号を記述することができます。そしてこのHTML タグにより、文字の大きさ、色、太字、見出し、画像表示、表、などなど・・・Ｗｅｂページに必要な命令を出すことができるというわけですね(￣▽￣人) こんな説明では分かりにくいと思いますので、簡単な例を挙げてみましょう。すでに復習ですので分かりますよね(〃⌒▽⌒)HTMLファイルへの記述例）このように<b>太字</b>を記述できます。ブラウザへの表示結果）このように太字を記述できます。まず、「<b>」を記述することにより「ここから太字ですよ」と>命令を出します。この命令のことを「開始タグ」と呼んでいます。また、太字の命令が出された後にくる文字はずっと太字のままになりますので、どこかで太字の終了を命令してやる必要があります。それが「</b>」という記述なんですね(〃⌒▽⌒)「</b>」により、「ここで太字は終了ですよ」と命令を出しているのです。この命令は「終了タグ」と呼んでいます。ただし、HTML タグの中には終了タグをもたないものもありましたよね？「BR」や「HR」などがそうでしたよね(〃⌒▽⌒)これで話が終わりではありません。よい機会ですのでもう少し言葉の意味を覚えておきましょう(￣▽￣人)<font size="+1" color="#ff0000">文字を記入</font>１２２３１まず、「１」～「３」まで、ここで紹介しています全てをひっくるめて「要素」と呼ぶことを覚えて下さい。開始タグから終了タグまで全てが「要素」と言うわけですね。「１」はタグ名と先ほど紹介しましたが、正しくは「要素名」と呼ばれています。どんな命令を出すか、ということを決定するためのものでもあります。「２」は「属性」と呼ばれているもので、タグに指定することができる追加情報のようなものです。「３」は「内容」と呼ばれ、見ての通り実際に表示される部分になっています。 ＨＴＭＬの勉強を進めていく上で、「要素」「要素名」「属性」「内容」といった用語は避けて通れないものでしょう。しっかりと覚えておいて下さいね。ではまたあしたー(ﾟ▽^*)ﾉ⌒☆
Sep 12, 2004
コメント(5)
-
タグを覚えよう【第３３回目】 - リストを作ろう（５回目）
タグを覚えようリスト編も今日で最終回です。今日は仕上げとして独自の画像をマークに指定してみましょう(￣▽￣人)ちなみに今日使用します画像は・・・どこかで見たことあるような無いような(´･ω･`)まぁ、深くつっこまないで下さい。では早速例）<ul style="list-style:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/12.gif);"><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul>表示結果）リスト１リスト２リスト３どうですか？こんなリストも少し変わっていて面白いですよね(〃⌒▽⌒)ただこのままでは少し見にくいと思いますので少し画像とリストの間に余白をいれてみましょう(￣▽￣人)例）<ul style="list-style:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/12.gif);"><li style="padding-left:15px;">リスト１</li><li style="padding-left:15px;">リスト２</li><li style="padding-left:15px;">リスト３</li></ul>表示結果）リスト１リスト２リスト３少し見やすくなりましたよね(〃⌒▽⌒)ページ内のちょっとしたワンポイントにも使えると思います。記憶の片隅にくらい置いておいてください（笑ではまたあしたー(ﾟ▽^*)ﾉ⌒☆
Sep 11, 2004
コメント(4)
-
タグを覚えよう【第３２回目】 - リストを作ろう（４回目）
今日は「順番があるリスト」（OL）のマークを変えてみます(〃⌒▽⌒)とは言いましても・・・昨日紹介しました「順番の無いリスト」（UL）のマークを変える方法と大差ありません。こんなこともできるのか・・・くらいの感覚で眺めてくださいね(￣▽￣人)ではまず基本形から・・・例）<ol><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3何も指定しなければ「1.」「2.」「3.」という指定になりましたよね。これに昨日と同じように手を加えてみましょう(〃⌒▽⌒)例）<ol style="list-style:lower-roman;"><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3例）<ol style="list-style:upper-roman;"><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3例）<ol style="list-style:lower-alpha;"><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3例）<ol style="list-style:upper-alpha;"><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3いかがですか？色々な指定をすることができるでしょ(￣▽￣人)「lower-roman」はローマ数字（小文字）で表示されます。「upper-roman」はローマ数字（大文字）で表示されます。「lower-alpha」はローマ字（小文字）で表示されます。「upper-alpha」はローマ字（大文字）で表示されます。こちらも色々使い道がありそうですよね(〃⌒▽⌒)「UL」と「OL」の違いは大丈夫ですか？こんがらがったらこのページに復習に来ましょう（笑ではまた明日ー(ﾟ▽^*)ﾉ⌒☆
Sep 9, 2004
コメント(7)
-
タグを覚えよう【第３１回目】 - リストを作ろう（３回目）
今日は予告どおりリストのマークをいろいろと変えてみましょう(〃⌒▽⌒)とは言いましても、今日変えるのは「順番の無いリスト」（UL）のマークです。「順番があるリスト」（OL）のマークはまた明日紹介します（笑ではまず基本形から・・・例）<ul><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3何も指定しなければ黒丸でマークが表示されるのでしたよね(￣▽￣人)ではこれをいろいろ変えてみましょう。例）<ul style="list-style:none;"><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3例）<ul style="list-style:disk;"><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3例）<ul style="list-style:circle;"><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3例）<ul style="list-style:square;"><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3いかがですか？「list-style」（そのままでしょ？）に「disk」を指定するとデフォルトのままですよね。「none」を指定しますとマーク自体が消えてしまいます。「circle」を指定しますと白丸になりますよね。「square」を指定しますと黒四角になります(〃⌒▽⌒)今のところ用意されているマークはこれだけですがいかがでしょう？いろいろと応用できそうですよね(￣▽￣人)きっちり覚えておいていざというときに思い出せるようにしておいて下さい(〃⌒▽⌒)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆
Sep 8, 2004
コメント(0)
-
タグを覚えよう【第３０回目】 - リストを作ろう（２回目）
昨日はリストのさわりだけってことで簡単なリストを紹介しました。今日もさわりの続きです（笑手抜きしてる・・・って思われてる方。９７％正解です(´･ω･`)残り３％は「誰にでも分かりやすくするためにゆっくりと解説しているのよ」って感じの「言い訳」という名前の「大義名分」ですがあまり気にしないで下さい。こんな屁理屈っぽい前口上はさて置き・・・昨日のリストは「順番が無いリスト」でしたよね(￣▽￣人)「上から読んでいくのだから順番じゃないか」と言われたら元も子もないのですが昨日のリストには順番がありませんでした！ってわけで、今日は順番のあるリストを紹介しましょう(〃⌒▽⌒)例）<ol><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3使い方自体は昨日紹介しました「UL」タグとなんら変わりはありませんね(〃⌒▽⌒)順番があるものには「OL」タグを使用し、順番が無いものには「UL」タグを使用しましょうとただそれだけの違いです(￣▽￣人)ちなみに順番があるから、リストの頭のマークも順番どおりになっていますよね(〃⌒▽⌒)昨日、今日と簡単なところで話を止めましたが・・・これは明日以降への前ふりのためです（笑とは言いましても、明日以降の方がきっと面白いですよ(￣▽￣人)このリストに使用したマークをいろいろなものに変更してみますので(〃⌒▽⌒)楽しみにしておいて下さいね。では、また明日ー(ﾟ▽^*)ﾉ⌒☆
Sep 7, 2004
コメント(0)
-
タグを覚えよう【第２９回目】 - リストを作ろう（１回目）
今日はリストを作ってみましょう(〃⌒▽⌒)リストってなに？って方のために、今日はまずサンプルから(￣▽￣人)例）<ul><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3がっかりしました？(´･ω･`)なーんだ、またつまらない講座か・・・って。いえいえ、これですね、とっても使い勝手がいいのですよ(￣▽￣人)例えば・・・例）<ul><li>test1<br>test1</li><li>test2<br>test2</li><li>test3<br>test3</li></ul>表示結果）test1test1test2test2test3test3普通に・・・・test1<br>test1のように書きますと、頭をそろえるのに苦労しますよね(´･ω･`)苦労するだけでぜんぜんきれいに揃いませんし（笑今日からしばらくの間、この「リスト」というものについて勉強をしていきましょうね(￣▽￣人)明日はさらにもっといろいろなリストを紹介します。今日はさわりだけ(〃⌒▽⌒)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆
Sep 6, 2004
コメント(8)
-
タグを覚えよう【第２８回目】 - 等幅フォントで表示する
なんだか今日の講座は題名からして難しそうですね(´･ω･`)等幅フォントで表示？なんとなく漢字からして意味は想像してもらえると思いますが実際何に使うテクニックなのでしょう？前もって正直に言っておきます。使い道はほとんどありません(´･ω･`)ただ、使う使わないの判断はこの講座を読んでくれた方がするものですよね。何回も言っている言葉ですが、タグを全部完璧に覚える必要なんて全くありません（笑「タグを使えばこんなこともできた」ってことを覚えておけば後は必要なときにカンニングすればいいだけですよねー(〃⌒▽⌒)例えばこのサイトなどに来て(￣▽￣人)ってなわけで、今回も興味があれば覚えてください(〃⌒▽⌒)例）iiiiiiiiiiiiiiiiiiiiiiiiiii<tt>iiiiiiiiiiiiiiiiiiiiiiiiiii</tt>表示結果）iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii見ての通り等しい幅で文字が表示されましたよね(〃⌒▽⌒)見た目だけの問題ですが、英字の「i」や「l」などは前後のスペースが詰められて表示されます。これが読みやすい場合もあれば読みにくい場合もあると思います。例えば・・・通常表示）Pinging 192.168.1.101 with 32 bytes ob data:Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Ping Statistics for 192.168.1.101: Packets: sent = 4, Received = 4, Lost = 0 (0% loss),Approximate round trip times in milli-seconds: Minimum = 0ms, Maximum = 0ms, Average = 0ms等幅表示）Pinging 192.168.1.101 with 32 bytes ob data:Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Ping Statistics for 192.168.1.101: Packets: sent = 4, Received = 4, Lost = 0 (0% loss),Approximate round trip times in milli-seconds: Minimum = 0ms, Maximum = 0ms, Average = 0msどちらが読みやすいですか？多くの日本人は英数字がずらずら並ぶ文章を読む際に等幅フォントで表示されている方が読みやすく感じるらしいですよ(〃⌒▽⌒)まぁ、長々と英数字をＨＰに記述される方はさほど多くないでしょうから使い道が無いと言えば無いですね(´･ω･`)ただ、覚えておいて損は無いことですよね。こんなテクニックも・・・くらいで記憶の片隅に置いておいて下さい(￣▽￣人)では、また明日ー(ﾟ▽^*)ﾉ⌒☆
Sep 5, 2004
コメント(0)
-
タグを覚えよう【第２７回目】 - ＨＰってなんでできているの？
今回のテーマは「ＨＰ（ホームページ）ってなんでできてるの」です。そもそもなんでできているのかが分からないことには本来作りようがないですよね。インターネットを始めて、最初に開いたのがこのページだ、って方は多分いないでしょうから、少し思い出してみてください。Ｗｅｂページにもいろいろなページがありますよね。文書（文字）だけで構成されているページ、写真が掲載されているページ、開くと音楽が流れるページ、開くと動画が再生されるページ。本当に百ページ百様といった感じですが、これがＨＰってなんでできてるの、っていう質問の大きなヒントなのです。文字を書くのと同じ感覚で絵をかけるはずがありませんよね(´･ω･`)どうせでしたら、文書は文書でワープロソフトのようなもので作成して、絵は絵でお絵かきソフトのように、絵を描く専門のソフトをして作成した方が効率的ですよね。そうです。Ｗｅｂページに貼り付けられている写真も音楽も動画も、全部別のファイルとして用意するのです。そして、これらたくさんの種類のファイルを同時に表示しているのがＷｅｂページなのです。ここで気になるのが、「じゃぁ、絵や音楽などのほかのファイルを何に貼り付けるの？」ということではないでしょうか。答えはもうすでに言っていますよね。もう一度はっきりと言います。Ｗｅｂページに貼り付けるのです。ちょっと待ってください。「×ボタン」でこのページを閉じようとしたでしょう。もう少しだけお付き合いください。Ｗｅｂページの元になるファイルは「ＨＴＭＬファイル」と呼ばれています。このＨＴＭＬファイルに絵や音楽などのファイルを貼り付けていってＷｅｂページを作るので、Ｗｅｂページの正体はＨＴＭＬファイルだ、と言い切ってもいいでしょう。今、（もう少しだけという期限付きで）見てもらっていますこのページも当然ＨＴＭＬファイルでできています。ただ、ＨＴＭＬファイルだけでは絵を表示することができませんので、ＨＴＭＬファイルに絵を貼り付けてひとつのＷｅｂページにしているのです。もちろん、音楽をＷｅｂページに貼り付けますと、開くと音がなるＷｅｂページができあがりますし、特別なプログラムを貼り付けることによって、複雑な動きを見せるＷｅｂページを作ることもできます。# 残念ながら楽天ではできません(´･ω･`)では実際にＨＴＭＬファイルがどのようなものか例を見てみましょう。□ＨＴＭＬファイルここに「○○」という絵を表示しなさい。改行しなさい。今から文字を書きます。ようこそ私のほーむぺーじへ！ここで文字は終わりです。改行しなさい。横線をひきなさい。以下の文字は中央付近に表示させなさい。以下の文字をクリックしたときに別のページへジャンプ。Ｅｎｔｅｒジャンプさせる文字はここまでです。中央付近に表示させる文字はここまでです。横線をひきなさい。もちろん、こんな日本語だけで書かれているわけではありません。ＨＴＭＬ専用の特別な記述方法（これがタグですね）があるのですが、それはおいおい説明していきます。今は、Ｗｅｂページの正体は文字だけの命令文なんだということを覚えておいてください。そして、文字だけの命令文を読み込んで、読み込んだ内容どおりに表示する（再生する）ソフトウェアのことをＷｅｂブラウザと呼びます。長いはなしでしたが、ここまで読んでいただければ「ＨＰはなんでできているの？」という問いの答えもわかるのではないでしょうか。念のため、まとめておきます。ＨＰは、ＨＴＭＬファイルと呼ばれる文字だけの命令文からできています。ＨＰはこのＨＴＭＬファイルにより、あなたの使っているブラウザに、表示のしかたや表示するもの（文字や絵など）、配置などを命令しているのです。そして、命令を受け取ったあなたのブラウザは、その命令どおりにＨＰを再生するというわけです。楽天でＨＰを作る際にはあまり関係のないことかもしれませんが本質を理解するということは、応用力をつけるためにも大事なことですよね(〃⌒▽⌒)そんな感じで今日はＨＰは何でできているの？という解説をさせてもらいました。では、また明日ー(ﾟ▽^*)ﾉ⌒☆
Sep 4, 2004
コメント(4)
-
タグを覚えよう【第２６回目】 - 上付き下付き？
前回は文字にふりがなをふってみたのですが、ついでに上付き文字、下付き文字について解説しておきましょう(〃⌒▽⌒)ついでに・・・って言うくらいですから今回は簡単です(〃⌒▽⌒)簡単ですが使い道もあまり無いかもしれません(´･ω･`)まぁ、余談程度に「こんなこともできるんだ」くらいで頭の片隅にでも置いておいて下さい。例）2H<sub>2</sub>+O<sub>2</sub>→2H<sub>2</sub>O表示結果）2H2+O2→2H2Oこれが下付き文字ですね。「Subscript」の略らしく「<sub>」と「</sub>」で囲まれた範囲が下付きで表示されます。簡単ですよね(〃⌒▽⌒)上付き文字も同じくらい簡単です。例）C<sup>2</sup>=A<sup>2</sup>+B<sup>2</sup>表示結果）C2=A2+B2こちらは「Superscript」の略らしいです。「<sup>」と「</sup>」で囲まれた範囲が今度は上付き文字となりましたよね(￣▽￣人)今日はこれだけです（笑簡単ですが使い道も少ないタグの紹介でした(〃⌒▽⌒)ただ、数学関係、化学関係などのページを作りたい方は間違いなく必要になりますよね。まぁ余裕があれば覚えてください。ではまた明日ー(ﾟ▽^*)ﾉ⌒☆
Sep 3, 2004
コメント(2)
-
タグを覚えよう【第２５回目】 - 難しい漢字にはふりがなを
一日一タグとか言いつつしばらくお休みさせていただきました。また今日からがんばりますので応援よろしくお願いします。で、思い出しました・・・浸水→漏電→パソコンの電源が強制ダウン→登録していた顔文字がゼロになる・・・という不可解な現象に見舞われたのですよ（笑急いで今日使いそうな顔文字だけ登録してきました(〃⌒▽⌒)改めてよろしくお願いしますm（_ _）mさて、今日は少し変わり種のタグということで文字にふりがなをふってみましょう(〃⌒▽⌒)変わり種とは言いましても・・・ちょっとした気配りに使いたい一品でしてたとえば子供向けのページを作られる方、辞書のようなサイトを作られる方、読み方を混同しそうな文字を使う場合に・・・などなど。使う局面はさまざまですよね(￣▽￣人)では、早速例を見てみましょう。例）<ruby><rb>薔薇</rb><rp>（</rp><rt>ばら</rt><rp>）</rp></ruby>表示結果）薔薇（ばら）４種類のタグが一度に登場し、少し分かりづらいでしょうか(´･ω･`)でも、心配いりませんよ。順番に見ていきましょう(〃⌒▽⌒)まず、「<ruby>」タグで「今からふりがな付きの文字を記述しますよー」と宣言します。ちなみに「</ruby>」は「ここまでがふりがな付きの文字でした」って目印です。この辺りはタグを記述してきているうちになんとなく予想がつくようになったのではないでしょうか。次に、「<rb>」と「</rb>」でふりがなを付ける文字を囲みます。これは例を見てもらうとすぐ分かりますよね(〃⌒▽⌒)ちなみに「<rt>」と「</rt>」でふりがなを囲みます。これも一目瞭然ですよね(￣▽￣人)最後に残った「<rp>」と「</rp>」はと言いますと・・・このふりがなに非対応のブラウザへの考慮なのです。ちなみに非対応ブラウザでは上記の例が薔薇（ばら）のように見えるはずです。たちまちは省略することもできますが、非対応ブラウザへの考慮として記述しておきたいものですね。以上、今日はふりがなの記述例を勉強しました。目立つテクニックではありませんが、見てくれる人への配慮として覚えておきたいタグですよね(￣▽￣人)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆
Sep 2, 2004
コメント(10)
全22件 (22件中 1-22件目)
1
-
-
- 新生活にむけてほしい家電は？
- 新居で選んだBOSCH食洗機｜わが家が…
- (2026-09-24 09:14:38)
-
-
-
- モバイルよもやま
- スマートフォン・携帯電話 関連ニュ…
- (2026-09-24 11:50:47)
-
-
-
- 私のPC生活
- 【株】【自動化】制度信用倍率をExce…
- (2026-10-02 18:58:31)
-
