253831

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

七鍵＠楽天

コメント新着

うしまる＠ @ Re:タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技(08/21) タグの検索でぐぐってたらコチラに辿り着…

k.kyouka @ すきやき占い『しいたけ』の重要度27% 『しいたけ』…

なな@ Re:迷っています(11/01) レオ　がいいですよ☆★

マロン@ かわいいキュート

ｆｏｏｌｉｓｈ☆ｆｏｏ @ Re[1]:お久しぶりです。(07/15) ＞実演を踏まえてテストをしておりました…

バックナンバー

Aug , 2026
Jul , 2026

Jun , 2026

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Aug 13, 2004

少しずつタグを覚えていこうと言う企画であるはずのこの日記。
ふと気がつけばなんだか話が難しい方向へと進んでますね。
ってわけで、今日は少し息抜きに簡単なタグを紹介します(〃⌒▽⌒)

通常ページに文字を記述したり画像を貼り付けたりすると、
画面の左から順番に表示されていきますよね。
普段はこれで何も気にならないのですが、
ページ全体のデザインなどを考えだすと
「この画像は画面の真ん中に表示したいなー」とか
「この文字は画面の右端に表示したいな」とか・・・

そこで今回は表示位置を指定するタグをご紹介します(〃⌒▽⌒)
中学生レベルの英語力があれば簡単に覚えれますので
この機会にしっかり覚えておきましょう(〃⌒▽⌒)

例）

<div align="left">左寄せ表示</div>
<div align="center">中央表示</div>
<div align="right">右寄せ表示</div>

表示結果）

左寄せ表示

中央表示

右寄せ表示

どうです？簡単でしょ(〃⌒▽⌒)
当然、文字だけではなく画像などなどの表示位置も指定できますよ。

例）

表示結果）

表示位置のお話はこれで終わりです(〃⌒▽⌒)
特に難しい記述でもなく、簡単な英語そのまんまなので覚えやすいでしょ(￣▽￣人)

で、例のごとくこのまま終わるのもあっけなさすぎますので
ちょっとした予備知識を(〃⌒▽⌒)

♥

♣

こんな記号の表記の仕方知っていますか？
意外と知られていないのでちょっとしたおしゃれなワンポイントに使えますよね(〃⌒▽⌒)
ちなみに記述方法は

例）

<font color="#ff0000">&hearts;</font>
&spades;
&clubs;

となっています。
もちろん文字ですので、

例）
<font color="#ff0000" size="7">&hearts;</font>

表示結果）
♥

なんてこともできます(￣^￣*)
これらは専門用語で「特殊文字」と呼ばれ、たくさんの種類があります。
興味のある方は

特殊文字一覧表

を参考にしてください(〃⌒▽⌒)

明日の一日一タグは・・・
お盆休みです（笑
あさってにはきっちり復活しますので
あさってにはきっちり来てくださいね(ﾟ▽^*)ﾉ⌒☆

お気に入りの記事を「いいね！」で応援しよう

最終更新日 Aug 13, 2004 05:45:58 AM
コメント(7) | コメントを書く

[タグ教室] カテゴリの最新記事

■コメント

Re:タグを覚えよう【第８回目】　-　表示位置を変えてみよう(08/13)

chr...trtr さん

はじめまして！
画像真ん中にしたかったんです!!
早速やってみます～ ^^
(Aug 13, 2004 03:38:21 PM)

返事を書く

こんばんは

ゆりん☆ さん

昨日今日と私もお盆休みでした（笑）

質問です
<div align="left">　</div>　←divは始めて見たのですが、<p>と同じ意味ですよね。
division place　って事ですか？

１．画像の説明文を上、下、左、右、それぞれに表示するには？
２．例えば画像を左に、説明文を右に回り込ませて
しかも画像の中央辺りにするには？
どうすれば良いでしょうか？

(Aug 14, 2004 12:26:56 AM)

返事を書く

もう１つ質問

ゆりん☆ さん

よく占いをクリックすると、画面はそのままに、小さなウィンドウがポップアップしてくる。というのがありますが、ウィンドウの大きさを指定するのですか？

ず～っと知りたいと思っていました (Aug 14, 2004 12:35:22 AM)

返事を書く

Re[1]:タグを覚えよう【第８回目】　-　表示位置を変えてみよう(08/13)

＃七鍵さん

chr...trtrさん

はじめまして(〃⌒▽⌒)
お役に立ててうれしいです(￣▽￣人)
これからも「早速使える」タグの紹介がんばりますので
ちょこちょこ覗いて下さいねm（_ _）m

(Aug 15, 2004 11:44:26 AM)

返事を書く

Re:こんばんは(08/13)

＃七鍵さん

ゆりん☆さん

お盆休みも今日で終わり。
明日から通常の生活になるのが・・・
うれしいのか悲しいのか（笑

「DIV」ですが、何の略なんでしょう？
ってわけで調べてみたところ、「division」の略だそうです。
ちなみに「P」タグはそれで囲まれた部分が段落であることを表しています。
IEなどの一般的なブラウザでは前後に改行が入って表示されますよね(〃⌒▽⌒)
で、「DIV」タグですが、こちらも前後に改行が入り、表示上は「P」タグと大差ないのですが、
意味は少し違って、「ひとかたまりの単位」と言う意味になっています。
早い話が、「P」は囲まれた範囲に意味がある（段落としての）が、
「DIV」は囲まれた範囲がひとかたまりであると言うことを示すだけで特に意味がないと・・・
こんな感じですかね(〃⌒▽⌒)
説明が下手なので分かってもらえるかどうか不安ですが(´･ω･`)
ちなみに、「DIV」タグと同じ意味を持つタグの中に、「SPAN」と言うものもあります。
どちらも意味は同じなのですが、「DIV」は前後に改行が入り「SPAN」は前後に改行が入らないという違いがあります。

「P」「DIV」「SPAN」とそれぞれ微妙に意味が違いますので最初は戸惑うかもしれませんが、
使っているうちにだんだん慣れてきますよ(〃⌒▽⌒)

(Aug 15, 2004 11:59:21 AM)

返事を書く

Re:こんばんは(08/13)

＃七鍵さん

ゆりん☆さん

で、画像の上下左右に説明文を表示する方法ですが、
実はそんなタグないんですよ(´･ω･`)
「vertical-align」なんてスタイルシートもあるにはあるのですが、
（参照： http://www.7key.jp/program/hp/style/vertical-align.html ）
これは右に説明を記述する際にしか使えません。

ただ、正規の方法ではないですが実現する方法はもちろんあります(〃⌒▽⌒)
今日の一日一タグは「画像の周りに文章」みたいな題材を説明しますね。
題材提供ありがとうです（笑

(Aug 15, 2004 12:05:26 PM)

返事を書く

Re:もう１つ質問(08/13)

＃七鍵さん

ゆりん☆さん

こちらの方は「楽天」内では無理なんですよ(´･ω･`)
別ウィンドウをサイズを指定して開こうと思えば、
「JavaScript」なるテクニックを使わなければなりません。
ただ、ご存知かと思いますが、「楽天」内では、あらゆる「JavaScript」の使用が禁止されています。
なんで、残念ながら「できません」って回答になってしまうのです(´･ω･`)

楽天では使えないが記述方法を知りたい！ってときには、

http://www.7key.jp/program/javascript/child1.html

こちらなど参考にしてみて下さいm（_ _）m

(Aug 15, 2004 12:08:51 PM)

返事を書く

【毎日開催】

15記事にいいね！で1ポイント

10秒滞在

いいね! -- / --

次の日記を探す

おめでとうございます！
ミッションを達成しました。

※「ポイントを獲得する」ボタンを押すと広告が表示されます。

Design a Mobile Site

スマートフォン版を閲覧 | PC版を閲覧