にほんブログ村 ブログブログ ブログ初心者へ にほんブログ村 その他日記ブログ つれづれへ にほんブログ村 小遣いブログ ポイントサイトへ
  にほんブログ村に登録しています!(^-^ )

2008年04月30日

連続<BR>の代わりにスペースを作るもの

86.連続<BR>の代わりにスペースを作るもの

2007年12月、サイト開設から4ヶ月くらい経った頃の体験談です。

連続<BR>を使わずに、行間を空ける方法。探しました。
で、出てきた答えは3つ。

1.<P>タグを使って『段落』として行を空ける。
2.スタイルシートを使って空間を空ける
3.スペーサーギフを使う

<P>タグは、前回も出ましたが・・・確かに、一行空けるのには役立ちます。
一行しか空かないのは、段落の前に挿入されるその一行が、あくまで段落分けのための空行だからです。
つまり、段落分けのためだったら空行は一行で十分だろう、ということなんでしょう。

でも私には十分じゃない(二行以上空けたいときもある)ので、他の方法を探すしかありません。

スタイルシートは、大分前にも書きましたが、ホームページビルダー10ライト「かんたん」スタイルではスタイルシートを使った編集ができないのです。

ただ、文章の構造的観点から言えば、
「装飾的な意味合いのものは、タグではなくスタイルシートでした方がいい」
とのこと。

HTMLというのは、あくまで『構造』を記すものであり、レイアウトなどの『表現』は、スタイルシートで行うのが正しい、ということらしいです。

そんなこと言われても、スタイルシートが使えないんです(T∇T)
かと言って、ビルダーなしでページを作るには、まだまだ技術も知識も全然足りない・・・。
おまけに、スタイルシートはブラウザによって見え方も大分違ってしまうとのことで、ちょっと躊躇してしまうところもあります。

スペーサーギフというのは、いわゆる画像です。
透過gif画像・・・つまり、空白を画像にしたもので、幅や高さなどを、好きに設定して、好きな分だけ空白を空けることができるというものです。
(行を空けるだけなら幅は必要ないので幅の値は「1」で十分です)

「スペーサーギフ ダウンロード」で検索すれば、画像をダウンロードできるサイトがいくつも見つかります。
タグは
<img src="(画像の保存場所)spacer.gif" mce_src="(画像の保存場所)spacer.gif" width(幅)="1" height=(高さ)"空けたい分の数値を好きに設定" border="0" alt="">
(もちろんこの透過画像「スペーサーギフ」をアップロードした上で使わなければ反映されません)

これは、行を空けるというより、行に画像を挿入するという方法です。
その画像が透過処理(透明に)されているので見えないというだけです。

でもこれだと、確かに行間を空けることはできますけど、いちいち画像挿入しなきゃいけないわけでとっても面倒な上、
サイズがいくら小さくても、多用すればページが重くなってしまう危険もあります。

また、画像をこのように用いるのは推奨されていないということも書かれていました。


・・・・・・困りました。

どうも、私には難しかったり、面倒だったり、推奨されていなかったりで、「これはいい!」というものが見つかりません。
(本当はスタイルシートが一番いいんでしょうけど、もろもろの理由によりそれ以外の方法を探しているので)

そして、散々考えた結果。

Another HTML-lintで、
「<BR>連続の警告を回避するために、<BR>&nbsp;<BR>とするようなお馬鹿なことはくれぐれもしないように」と書かれていたということを前回書きましたが、

それならこれはどうよ、と、
<P><BR></P>
なるソースを考えました。

通常の段落は<P>タグ一つでいいとして、
さらに行を空けたいときには、<BR>を一つの段落として扱ったらどうか、ということです。

<P>あいうえお</P>
<P>かきくけこ</P>
これだと、一行空く。

<P>あいうえお</P>
<BR>
<P>かきくけこ</P>
<BR>一個なら、連続してないし・・・。
これで二行空く。

<P>あいうえお</P>
<BR>
<P><BR></P>
<P>かきくけこ</P>
連続<BR>にならないように、<BR>を段落にして・・・
これで三行空く。

これでどうだ!?

チェックしてみても、エラーが出ません。

ヤッター!!ヽ(*^▽^*)/

早速、それを用いてさくさくページを直し始めました。
何しろ、この警告(連続<BR>)が一番多い警告だったので、直しも大変です。

ガンガン直しまくり、チェックしまくり、過ごしていましたよ。

ところが。

エラー項目を何となくスクロールして見ていたところ、こんな記述があるのを発見。

「<P>を<BR>のように使っていたら警告され、<BR>に変えたらまた別の警告を受けたので、今度は<P><BR></P>と書いた」
という人に対し、
「本質を理解しないまま満点を目指した結果だが、意図的に使わないとも言い切れない」
などと書かれていました。
(減点はされないようですが、「タグの間に<BR>しか入っていない」という警告です)

同じようなことを考えた人がいたのね。
いや、そんなことはともかく・・・

「本質を理解しないまま」って、どういうこと?
このタグの使い方(<P><BR></P>)が「理解していない使い方」ってこと?

それとも、この人は理解して記述したわけじゃないけど、理解してる人があえて使うこともあるタグって意味?
それとも、意図的に<P><BR></P>を使う輩が出てこないとも言えない=ホントは使っちゃダメなのにって意味??

・・・・・・・
・・・・・・・・・・・・・

・・・・・・うーん・・・まあいっか。(え?)

「この警告は減点されません」ってことは・・・
「一番正しい」使い方ではないのかもしれないけど、HTMLとして「間違ってる」つまり「使っちゃダメ」ってことじゃないですよね。

だってそもそも、推奨されてることって、結局、見栄え的なものを設定するにはとにかくスタイルシートを使えってことですよね。

だけど私はスタイルシートではない方法を探しています。
そうなると、せめてその中で一番なんとかまだマシな方法を探して使うのが、一番いいのでは・・・と思うのです。

そして私たちがたどり着いた方法が・・・
<P><BR></P>なのです。
たとえ、お馬鹿な方法でも。


それでも・・・
いつかは、スタイルシートも使えるようになりたいと思ってはいます。
だってやっぱり、一番推奨されてる方法でやるのが、一番いいと思うので。
ただ、見え方の問題や何かが片付いてからの方がいいんですが・・・。

道のりは長いですけど、頑張ります。


・・・・・・でも、その前に。

この膨大な直しを全て終えてからの話ですね。
一体いつになるやら・・・トホホ(;´д` )
posted by 水沢藍 at 00:32 | Comment(7) | TrackBack(0) | ネット体験談
この記事へのコメント
通りすがりのものです。
約三年半前の記事に対してのトラックバックで
恐縮ですが、がんばってくださいです。
Posted by MC6800 at 2011年06月28日 13:22
MC6800さん、はじめまして。返信遅れてすみません。
あ〜この記事は・・・(^-^;)
結局今でもこの方法を使っていて、スタイルシートでの編集はできてないままです。見え方の問題とやらも、片付いたのかどうか。
よくわかりませんが、時代とともに色々変わっていく分野なんだとは思います。

応援メッセージありがとうございました。これからもがんばります!
Posted by 水沢藍 at 2011年06月30日 21:31
時は流れ2012年・・・<BR><BR>ってやりたいですよね〜(笑)
Posted by 7c at 2012年11月04日 17:56
もう5年も前になるのですね〜。
いまだにスタイルシートの編集はできていないままです。
そもそも最近サイトの勉強に手が回っていない状態なんですが><
<BR><BR>・・・やりたいですね(笑)
7cさんもサイトをお持ちなのでしょうか? お互い頑張りましょう♪
ではでは、コメントありがとうございました!
Posted by 水沢藍 at 2012年11月04日 19:02
Pタグはパラグラフ「paragraph」のPで、パラグラフとは文章の節または段落の意味です。

ですので段落の中が改行のBRタグのみというのは、通常の文章ではありえないですよね。

そういう意味でデザイン的には意図するように表現出来たとしても、本質を理解しないまま…ということだと思います。
Posted by さしお at 2013年06月29日 16:07
そうですね。他の記事にも書きましたが、<P>タグは段落のタグなので、改行だけの段落はあり得ませんよね。
今となっては、スタイルシートの問題が片付いたとしても、膨大なページを直すのがとても無理なのでこのままいこうと思ってしまっていますが^^;

それでは、コメントありがとうございました!
Posted by 水沢藍 at 2013年06月29日 22:31
<P><BR></P>は斬新ですねw
参考になりました
Posted by アリス at 2014年06月06日 21:54
コメントを書く (メールアドレスを記入するとエラーになる場合があります)
お名前: [必須入力]

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/40566802
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
  にほんブログ村 ブログブログ ブログ初心者へ にほんブログ村 その他日記ブログ つれづれへ にほんブログ村 小遣いブログ ポイントサイトへ
   ネット体験談 総目次1
   ネット体験談 総目次2
   ネット体験談 総目次3
   カテゴリ別目次
    ・「パソコン関連」
    ・「ネット関連」
    ・「サイト作り関連」
    ・「さくら(ブログ)関連」
   ポイントサイト目次
   日記目次
   好きな曲紹介目次
   それぞれの目次ページに飛べます。他の記事をご覧になりたい時にご活用ください。

トップページへ戻る