<p>タグの仕様を極める

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

<p>タグの仕様を極める

サンプル画像

あなたはシリウスで記事を書くとき「<p>タグ改行」派ですか?
それとも「改行なし」派ですか?

 

「えっ、何それ?」って思った方はおそらく「<p>タグ改行」派でしょうね。
シリウスのデフォルト設定は「<p>タグ改行」になってたはずですから。

 

知らなかった方のためにあらためて説明すると、
シリウスでは記事1、記事2、記事3……ごとに <p>タグの改行方法が指定できます。

 

こちら↓がその設定変更箇所です。
実は目に入っていたけどよくわからなかったという方もいるんじゃないでしょうか。

 

サンプル画像

 

「<p>タグ改行」は HTMLタグを気にせずブログ感覚で記事を書きたい方向けの設定、「改行なし」は HTMLに詳しい完全タグ打ちで記事を書きたい方向けの設定です。
(<BR>タグ改行はおススメしません)

 

これから書いてあることは「改行なし」で編集している人にとっては何の意味もありませんのでとっととページを閉じちゃってください。

 

そうではなく「<p>タグ改行」で記事を書いてるんだったら、もしかしたらこんな悩みがあったんじゃないの?と思われる段落と改行”仕様”についてのお話です。

 

もっともこれは「テキストモード」での編集時の話で、デザインモード時の編集ではまたさらに挙動が異なります。

ここでは「テキストモード」での編集をベースに話を進めていきます。

 

予期した通りに表示されない謎

たとえば「<p>タグ改行」で、
「これは文章1です。これは文章2です。これは文章3です。」
という文章を書いたとします。

 

そのままだとブラウザ上ではこんな↓風に左寄せで表示されますよね。

これは文章1です。これは文章2です。これは文章3です。

 

その後、気が変わってこの文章を中央寄せにしたいと思ったとします。
普通は文全体を範囲選択して『中央揃え』アイコンをクリックすると思うんですよ。

 

その結果、シリウスの編集画面上ではこんな↓感じで
中央寄せのタグ(style="text-align:center")が自動的に打ち込まれます。

<p style="text-align:center">これは文章1です。これは文章2です。これは文章3です。</p>

 

そしてこれをブラウザで見ると、やはりこんな↓風に中央寄せで表示されます。

これは文章1です。これは文章2です。これは文章3です。

 

しかし「やっぱり見栄えが悪いので『これは文章3です。』の部分だけ次の行に持っていきたい」と考え、『これは文章3です。』の前で[Enter]キーを押して”改行”したとします。

 

当然シリウスの編集画面上ではこんな↓風に段が変わります。それだけです。

<p style="text-align:center">これは文章1です。これは文章2です。
これは文章3です。</p>

 

一見すると特に問題はなさそうですね。
中央揃えを意味する「style="text-align:center"」はそのままだし、<p>~</p> ではさまれた 1つの”段落文”ですし。

 

しかしこれをプレビューしてブラウザで見てみると、
なぜかこんな↓風に中央揃えが崩れて表示されてしまいます。

これは文章1です。これは文章2です。

これは文章3です。

 

なぜ中央揃えにならないのか……どうやったら直るのだろうか……。

 

こういったことで延々と悩んでしまって結局そのままにしちゃってる人がもしかしたらいるんじゃないでしょうか (-_-;)。

 

これはシリウスの改行タグの”仕様”によるもので、決して誤動作が起きてるわけではないんです。
そしてこの独特のクセを覚えておかないと何度も苦労するハメになるやもしれないというお話です。

もちろん『改行なし』にして完全タグ打ちで書いていけばこういった現象は起こりません。

 

シリウスの”改行”のクセ

先ほどの”不完全な”文章をブラウザで見たのがこちら↓ですね。

これは文章1です。これは文章2です。

これは文章3です。

 

これをブラウザのソース上で確認してみましょう。すると、、、実はこんな↓風になっていたんです。

<p style="text-align:center">これは文章1です。これは文章2です。
<p>これは文章3です。</p></p>

 

シリウスの編集画面上とちょっと違っている点にお気づきでしょうか。
よく見ると『これは文章3です。』の前に <p> が余計についてます。

 

実はコレ「これは文章3です。」の部分がシリウスの自動<p>補完仕様により
<p>~</p> で新たにくくられてしまったためなんです。

 

そのため文の最後も </p></p> と </p> が2つも重なっちゃっていますでしょ。

 

つまり「これは文章3です。」の 1行が、直前の1行とは完全な別段落とブラウザが認識してしまい、
その結果(中央揃え指定が解除された通常の)左寄せで表示されてしまったというわけです。

 

う~ん、ちょっとわかりにくかったかな。でも無視して先に進みますよ。m(_ _)m

 

ではどうやったら全体が中央揃えになるのでしょうか。
答えはこちら↓。(シンキングタイム0秒!)

 

シリウス編集画面上で『これは文章2です。』の直後に「<br />」と打つ、これだけです。
こんな↓感じになります。

<p style="text-align:center">これは文章1です。これは文章2です。<br />これは文章3です。</p>

いちいちキーボードで <br /> と打つのが面倒くさい方は[shift]+[Enter]と押してみてください。

またこの先は『改行』という言葉だけではくくりが難しくなるので、<p> は”段落”、<br /> を”改行”と呼んでいきますね。

 

これの意味合いとしては、
<p>~</p> で囲まれた 1つの段落内での改行になるため、どこで”改行”されていようと全体が中央揃えになるというものです。

 

ブラウザで確認してみると、、、こんな↓風にちゃんと中央揃えになっています。

これは文章1です。これは文章2です。
これは文章3です。

 

注意:これを、

<p style="text-align:center">これは文章1です。これは文章2です。<br />
これは文章3です。</p>

とシリウス編集画面上でせっかく <br /> を足したものの、
そのあとでホントに”改行”してはダメですよ。
シリウスの自動<p>補完機能が働いてまたまた中央揃えにならなくなっちゃいますから。

 

デザインモードではどうなる?

さてここまでは『テキストモード』での話でした。
じゃぁ『デザインモード』だとどうなるんでしょうね。

 

デザインモードに切り替え、これまで同じく
『文章1です。これは文章2です。これは文章3です。』という文章に中央揃えを適用し、
『これは文章3です。』の手前で[Enter]キーを押してみます。

 

すると、、、きちんと中央揃えになってるじゃないですか。(こちら↓がそのキャプチャ画面です)

 

サンプル画像

 

テキストモード時のような <br /> を差し込む手間もないし、見た目も全然おかしくないですよね。

 

それじゃ最初からデザインモードでやった方がいいのでは、と当然なりますよね。

 

しかしこれをテキストモードに切り替えて確認してみると、シリウスが自動で打ち込んだタグはこんな↓感じになっていたんです。

<p style="text-align: center">これは文章1です。これは文章2です。</p>
<p style="text-align: center">これは文章3です。</p>

 

意味合いとしては <p>~</p> ではさまれていた 1つの段落2つの段落に完全分離されたというものですね。

 

ただしブラウザ上では、さきほどの <br /> を打ち込んで修正したものと見た目は実はまったく同じだったりするんです。

 

つまりこの現象の結果だけからいえば、
『最終的な見た目はどっちで編集しても変わりなし』なので
お好きなモードで編集してねということになりそうです。

 

しかしもしも <p> 段落の空き具合(マージン)をシリウス標準設定よりも広めにカスタマイズしていたとしたら話は変わってきます。

 

テキストモード編集で修正作業をした後のものをもう一度見てみましょう。こんな↓感じでしたね。

<p style="text-align:center">これは文章1です。これは文章2です。<br />これは文章3です。</p>

 

これは 1つの段落内で”改行”された文章ですから、
段落の空き具合に関係なく常に同じ行間で表示されます。

 

これに対しデザインモードで編集した場合は 2つの段落に分離されてしまうため、もしも<p>段落の空き具合を大き目にとっていた場合はこんな↓感じで”行間”に差が出てきちゃいます。

 

※テキストモード時に <br /> を加えて修正したもの。

これは文章1です。これは文章2です。
これは文章3です。

 

※デザインモード時に[Enter]キーで”改行”しただけのもの。

これは文章1です。これは文章2です。

これは文章3です。

 

覚えるべきは2パターン

だいぶ複雑になってきちゃっているのでこのあたりでこのページから離脱している人もきっといるでしょう(滝汗...)。
でも気にせず続けます。

 

覚えておくべきシリウスの段落仕様としては以下の 2つで十分です。

 

文章の先頭に『<p class="~">』とか『<p style="~">』と自動で入力されてしまうテキストについては、段落内の改行は <br /> で処理すべし。
編集画面上では <br /> のあとに([Enter]キーを押さずに)そのまま書き続けること。

 

※もちろん純粋に 2つの段落に分けたい場合はそれぞれのブロックを <p>~</p> でくくって分ければいいだけのことです。

 

そして『<p class="~">』などが先頭につかないテキストだけの文の時は、
シリウス上での見た目がそのままブラウザでの見た目となることがほとんどなので、
見た目そのままに”改行”するだけで OK というもの。

 

たとえば単なる改行だけなら[Enter]キーを1回押すだけ。
1行分空けたければ[Enter]キーを2回押すだけのことです。

 

以上です。

購入ページへ


TOPへ戻る