Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

こういうのが float というやつですが ↓ (文章はダミーです)


君は場合もしこういう約束院に従ってのの時を進んでた。むしろ結果から話家はさぞ大きな希望ないただけが握ってならますからは前後さないないて、当然にはさざるですたまし。種類が考えう事はまるで前にまあたでらしく。けっして嘉納さんを発展個人まだ講演であろた必竟そのい何か通知をという大実在ないでしょんうと、その十一月はおれか女学校自分を出て、岡田さんののを必竟の何をようやくお奔走と次ぐてどっち仕立に皆発見をいうようについごらくにいうたたて、万最も存在が云っなて来なけれのに行くたです。あるいはまたご空を立つのはたった自由としですて、こんな雑木へは用いますからとかいう書物に限るからいるたです。


パソコンから閲覧されている方は少しブラウザ幅を小さくして頂いた方がわかりやすいかと思います。
今回は【各個人ユーザーが記事を作成する際に利用したfloatの解除】についてです。
テンプレートの方でなく (´・ω・`)
やっぱり拝見しますと、どうしても 解除 を忘れてしまう方が多いんですね。
理由としては

・ 根本的にfloatの性質を理解していない
・ 難しい
・ 忘れちゃう

目に見えて崩れるようなことが無ければfloat解除を忘れてしまうことがありますね。
あるいは「崩れてないからいっか」と判断してしまう。
解除していないにも関わらず崩れていないのは

・ テンプレートで予防策を取ってある(テンプレ製作者さんの親切心) ← この点で私は不親切製作者です(笑)
後続要素が無い

こんなところでしょうか。
floatというのは 後続の要素に必ず影響を及ぼします。
なので確実に解除すべき性質のものです。
その「解除方法」について、どうするのが一番簡単なのかを考えてみた。
ま、先に結論言ってしまえば overflow: hidden; を使うのが良いと思うよ (´・ω・`)
でもって、本記事の主旨というのは
テンプレートの独自クラスなどに頼らない
ことを目的としています。
何故なら独自クラスというのは テンプレートを変更してしまったら機能が失われてしまう からです。
だからなるべく避けた方が良いですね。
画像に枠やシャドウが付かなくなった、ぐらいならどうってことありませんが、floatが解除されないなんてのは大変。
場合によってはページレイアウトが崩壊します。
またはfloat自体が適用されなくなるか(解除だけでなくfloatそのものを独自クラス化している場合)
なのでfloatに関しては独自クラス反対派です。ワタクシは (´・ω・`)
記事内で全て済ませてしまえばテンプレ変更時でもその内容は生き残ります。


floatを解除しなければいけない理由


高さが出ないから です。
float = 浮動化
した要素は高さが出ませんので、後続要素がfloat要素と重なってしまうわけです。
何故?どうして?の理由の一番はこれですので、まずここを理解しておかないと何をすれば良いのかがわかりません。
理由がわかれば目的がわかる。
目的がわかれば方法を探せる。
ってやつです。
これは全てのお勉強の基本ですね。


昔ながらの方法① brタグのclear属性


一昔前だとこんな感じですね ↓

<img src="画像アドレス" alt="" style="float: left;">文章<br clear="both">

文章をpタグやdivタグで挟んで
<p>文章</p>
のように製作している場合もあるかと思いますが、文章だけなら別段必要なし。

brタグclear属性 の値に both (あるいは left or right) を指定。
で、このclear属性ですが、 html5では既に廃止されております。
廃止要素を利用して得することは何一つありませんので、現web標準であるhtml5を意識する方は 使わない
廃止の理由は「そんなのCSSでやれよ。」ってことです。
なにせhtml5の大きな指針は「装飾はhtmlですんなし!CSS使いなはれや!」なので。
いわゆる「文章の回り込み」も「装飾」にあたります。

* でもfloatの動作や性質のことを「回り込み」などといういい加減な対訳で覚えない方が良いですよ。
理由は以下の記事で




clear属性を使わない方が良い理由

・ 廃止要素
・ brタグ本来の意味は「改行」であるという点

など



昔ながらの方法② 後続要素に clearプロパティ


方法①の方はhtmlのclear属性です。
こちらはCSSのclearプロパティ
ややこしいね (´・ω・`)
使い方はこんな感じ ↓

<img src="画像アドレス" alt="" style="float: left;">文章

<p style="clear: both;">後続要素(文章など)</p>

これだと例えばその「後続要素」がテキストのみだったとしても、pやdivなどのタグで囲う必要があります。
じゃあ後続要素が無い場合はどーすんの?
その場合にはこの方法は使えませんね。

clearプロパティを使わない方が良い理由

・ 後続要素が必ずしも存在するとは限らない

など



イマドキの解除法 clearfix


clearfix というのはhtmlタグ名, 属性名などでもなく、CSSプロパティでもありません。手法の名称です。
CSSを用いた一連の調整方法を「clearfix」と言います。
(CSSでの方法全般をそう呼ぶのではなく、CSS操作での手法のひとつがclearfixと名付けられた、という意味です)

実際の動作は「float解除」というよりも、「floatが影響しない位置まで高さ調節をする」といった感じです。
内容については前々章に掲載したリンク先でご確認頂くとして。
この方法を取るならばスタイルシートの存在が必須です。
つまり記事内では処理ができない。
ということで、独自クラス です。

独自クラスは一旦利用すると、その装飾を維持するためにCSS内容を恒久的に移植し続ける必要があります。
簡単に言うと、テンプレートを変えた時は該当独自クラスもコピペしなきゃいけないよ、ってことですね。
それが意外とめんどっちいんですよねぇ (´・ω・`)

それから、最近のテンプレートはfloat解除にこの方法を取っていることが多いんですね。
これまでの私のテンプレートも全てそうですし。
ということは、clearfixの内容が既にテンプレートCSSに含まれている ことがほとんどです。
記事内でのfloat解除を行うためにわざわざサイトで調べて追加をする方をよくみかけますが、実際には既にテンプレ内容に含まれているため 内容重複 の形になってます。
これは全くの 無駄 (´・ω・`)
ですからテンプレート内にあるclearfixをそのまま使えば良いわけですが…。
テンプレート製作者によってクラス名がまちまちです。
私は cf という名称にしていますが、ある方は clearfix かもしれないし、ある方は float-clear かもしれないし。
なにせ独自に付ける名称ですから予測が立ちません。
クラス名は 一文字でも違えば全く別の物 ですので、テンプレート内のクラス名を利用した場合には結局別テンプレートに変更したら無効化されることに。
無効化が嫌なら移設。
移設したら重複。
負のループ ( ̄∀ ̄;)

clearfixを使った際の注意点

・ テンプレート変更時に移植の手間が発生
・ CSS内容重複の可能性大

など

clearfixについては「使わない方が良い理由」ではなく、「使用した際の注意点」ということにしておきます。
clearfix自体は昨今主流の方法で大変優れた方法ですので内容的におすすめしない理由が見当たらない。
あくまでも作業面で面倒が生じるという意味でおすすめしない、という感じで捉えて頂けると良いかな、と。
この記事の主旨は「スタイルシートに頼らずに記事内で全て補完しようず。」なのです。


一番簡単なのは親要素に overflow: hidden;


結局これが一番簡素で手っ取り早く済むんじゃないかと思ふ (´・ω・`)

overflow というCSSプロパティは 範囲からはみ出したモノに対しどういった処理を行うか を指定するものです。
一番伝わりやすいのは スクロールボックス ですかね。
こういうの ↓

包みは野ねずみのまねゴーシュ手へ向うへ合せ外たた。するとたいへんばかなたにとっておいないた。
同じましん方ではでしまた人の上手館のっきりをももう残念だたて、ここほどゴーシュになれれんでしまし。
なおる過ぎきみは楽長をなきたて前の下の工合みちをまぜ第十かっこう汁のまねを習えといなくでし。床は毎晩とまっと出した。
外国も一ばっ勢のようを急いと切れた。外はお父さん駒とそれをなってはじめませ。ベロリはあとがそうにけして眼に小節のようをすってゴーシュへ弾きてよろよろおっかさんが熟しているでし。まるでちゃんとゴーシュが畑をいじめだなら。わたし間もなくにぶんから死にて猫をはじいたな。
ぶんをしましで。「兎でこねまし。ぼう、どこが下。引きさい。」
何はさっきのなかのそう一生けん命のなかのちがうたまし。別はざとじぶんのでまっ下にせてかっこうにゴーシュを飛びてにわかに元来ついられるましままをあるくでしです。どうぞ挨拶見て、つづけて済まして行っるて箱をまたゴーシュをとうとう枚できませで。
「金星出し。用がききない。向いよ。
わたしもこっちを手へまげてなど云い顔はひどいことないてべ。」やつはまじめそうへするてねえ長椅子ゴーシュが飛びたちたりです音楽の狸が呑みて出だの呑みながらいた。赤はなっからうしにやぶれたた。
誰は夜通し顔は重わけたでゴーシュはあんまりこわくのございた。「一生けん命の午前の代りを。
飛びだし。」やつはまだ引きあげたで。ねこは手へたべて一番ん。すると一生けん命はぞろぞろふみますます。
ないかっかなと云いといてドレミファで聞えようまし窓で弾きてではもう眼にそう教えるだん。これからかと窓もてもう込みでしたて高く方ではこんどはセロのガラスましまし。ラプソディもみんなに前なゴーシュのときわたしをだまっですようにかいざとじぶんの東にひとをしゃくにさわりて何かたべるんがなおしてはじめただ。「それからすぐ毎日のゴーシュ。
思う。」
ああとおろして鳴らしたかとくってまた音をシュッをぱちぱち出すてボー云っでた。「生意気ん。やっと出してくださいた。あのものは仲間のぶんんんる。
ぼくを小さなこつこつ近づけたんを。仲間。息までどうしても音二ぺんはよしんたべ。
ゴーシュを実におろしててるそこげよりどういう音パンおじぎや底屋の床じゃの子口へ出とあげうどうぞ誰のちがいもちょっとするんた。
ゴーシュ頭さん。
君をはしことましてね。ゴーシュというのががぶがぶはいっいな。出はしは楽長というのへしばらくしましんまし。そしていったいじつに音楽のからだと出たはな。
誰ばかりこっちでももっん次のふしぎをなおるてそれの窓にして云いようますんた、聞えべ、そうしとやるたてよ。顔つきせ大きなまん中ゴーシュげのそれ六そうのところにゴーシュへあるくようましんないも、これをはどっかり生たてぞ。いや近くもまねはそれだけ、いただけて二日をはしいんとねずみがわかっていし。」それはかっこうが云いて、またひとが弾けてかっこうよりしやおれかでいてしまいたりちがうたた。


スクロールボックスは overflowプロパティの値を auto あるいは scroll に指定することで可能になります。

で、この overflowプロパティは
初期値である visible 以外の値の時、浮動化ボックスも高さ計算に加える
という仕様になっています。
前章のclearfixと同様に「高さを出す」ことで、以降のfloatによる影響を無効化する方法。
(tableも同じような性質を持ってますので、clearfixに用いるdisplay値はtableになってます)
記事内だけで処理(つまり記事編集中に処理を済ませる)場合にはこれを利用すると良いんじゃないか、という提案です。

サンプル

浮動化ボックス1
浮動化ボックス2
通常のボックス


紫のボックス1は float: left;
赤のボックス2も float: left;
を指定しています。
続く緑のボックスは float の影響を受けないように解除を行って、紫・赤 両ボックスの直下に置いています。
ということは、紫と赤の配置が終わったらfloat解除を行わなければいけません。
解除しないとこうなります ↓ (スクショ)



★ 紫ボックス/ 赤ボックス

<div style="width: 120px; height: 120px;"></div>

テキストなど細かい部分は省いてます。

★ 緑ボックス

<div style="width: 300px; height: 100px;"></div>

width と height が違うだけです。

紫・赤・緑 の3つのボックスは displayプロパティの初期値が block です。
display: block; の要素はそのままでは 横に並べることはできません
そこで横に並べるひとつの方法として float が選択されます。

★ 紫と赤を横並びにする

<div style="width: 120px; height: 120px; float: left;"></div>
<div style="width: 120px; height: 120px; float: left;"></div>

ひとつめのdiv要素が「紫」ふたつめのdiv要素が「赤」
floatで左詰めに並びます。
ちなみに「赤」のfloatプロパティに right を指定するとこう ↓



横に並びつつ左右に分かれます。

紫・赤のふたつがこれで横に並びました。
緑は横に並べたくないので、緑を配置する前にfloatを解除します

<div style="overflow: hidden;">
<div style="width: 120px; height: 120px;"></div>
<div style="width: 120px; height: 120px;"></div>
</div>

floatの対象となっている要素を全て div で挟んで、そこに overflow: hidden; を指定します。
専門的な言葉で表すと

floatする要素の 親要素overflow: hidden;

紫と赤は 兄弟 です。
この兄弟を包括しているのが
親から見ると紫・赤の兄弟は共に です。
ということでひとつ要素が増えますが、この程度はめんどくさがらずにしっかり追加します。
こうしておいてから緑ボックスの内容を書く、と。

<div style="overflow: hidden;">
<div style="width: 120px; height: 120px;"></div>
<div style="width: 120px; height: 120px;"></div>
</div>
<div style="width: 300px; height: 100px;"></div>

この方法を取ればわざわざスタイルシートに独自クラスとして記載する必要もないのではないでしょうか。
記事を書く際に親要素に
<div class="clearfix">
って書くのと。
<div style="overflow: hidden;">
って書くのと。
労力としては大差ないと思います。
辞書登録すれば良いだけだし (´・ω・`)

ここから以降の内容は記事内でfloatを扱う際の注意点やコツ。


floatが一旦途切れるならば逐一解除を


例えばこんな ↓

Lorem ipsum dolor sit amet, te ius erant consul platonem, vel duis fuisset in. Erat argumentum ius an, possim numquam volumus no ius. Veri putant regione ei vim, sed error elitr ei. Ne sea putant integre sanctus, eu nobis omnium latine per.
Mel mediocrem hendrerit in. An sed legere platonem honestatis, mei nemore suavitate te, lucilius sadipscing te ius. In est iudico molestiae intellegebat, duo ne solum saepe scripta, eu utinam mucius eos. Cu per ceteros tractatos interesset, omnium impetus mediocrem sea an.

Ius et postulant efficiantur. Vel ad malis honestatis concludaturque, has cu placerat invidunt, te pri tation dolore. Sit doming putant honestatis ei, cetero audire praesent pro at, aperiam vivendum no ius. No duo suscipit intellegat inciderint. Ex his possim eligendi salutatus, vero ubique efficiendi vim eu. Veri vocent cotidieque eum ex.

Lorem ipsum dolor sit amet, te ius erant consul platonem, vel duis fuisset in. Erat argumentum ius an, possim numquam volumus no ius. Veri putant regione ei vim, sed error elitr ei. Ne sea putant integre sanctus, eu nobis omnium latine per.
Mel mediocrem hendrerit in. An sed legere platonem honestatis, mei nemore suavitate te, lucilius sadipscing te ius. In est iudico molestiae intellegebat, duo ne solum saepe scripta, eu utinam mucius eos. Cu per ceteros tractatos interesset, omnium impetus mediocrem sea an.



水色背景部分2箇所はそれぞれfloatレイアウトです(画像 + テキスト)
間に挟まれたピンク背景部分はfloatとは無関係。floatの影響を受けたくない部分。
こういう場合に「また後でfloatするから…。」という理由で解除を怠る方が結構多いのですが。
最初の水色部分が終わったら解除。
ピンク部分を書き、また2度目の水色部分で改めてfloat開始、終わったら解除。
すごくめんどっちいかもしれませんが、「後からどーせまたやるし」的放置はNGです。
画像 + テキスト の組み合わせの場合には一見して問題が出てこないこともあって、こういったパターンで書いてしまう方が多いのだと思いますけれど。


pタグを安易に利用しない


これはfloatに限ったことではないのですが。
例えば上の分割floatのサンプルの場合、文章をpタグで囲うのは間違いではありません。
pは「段落」ですから文章を挟むためのもの。
ですが例えば overflow: hidden; を指定すべき親要素にpタグは ダメ です。
pタグというのは入れ子できるタグがかなり限定されていて、divやpなども中に入れることはできません。
そして引き起こされたエラーが目に見えてレイアウトに影響を与えるのもpタグの特徴です。
pタグは終了タグの
</p>
を「省略しても良い」という決まりになってます。
省略するとどうなるかというと、然るべき位置・正しいと思われる位置にブラウザが自動補完を行います。
入れ子が間違っているなどのミスが生じた場合、本来あるべき正しい位置に勝手に(という表現はふさわしくないですが)終了タグを入れてしまいますので、結果的に意図した通りの見た目にならない = レイアウトが崩れる と。
そういう仕組み。
そもそもデザイン目的でpを利用すること自体が間違いですけどもね。
デザインで使用するならば迷わず div を選択。

横並びのレイアウトはfloatだけでなく table (おすすめはしません) や inline-blockflex という選択肢もあるのですが。
それはまた別の話しですので、今回はfloatで横並びを実現する際の提案でした。
関連記事
最終更新日2017-07-01
Posted by

Comments 6

There are no comments yet.
hige  
う~ん~っ 

 噛みしめて読ませていただきました。
 私は個別の記事内で <br style="clear: both;"> で処理してきました。floatはここで終わりという意味では判りやすいので。(とは言っても試行錯誤の結果ですが)
 で、私が使わせていただいているSynchronisityでは.cfが用意されています。
 ここの.cfのソース(?と書けばいいのか?)は、なかなか興味深い。ビフォア、アフタ!。勉強します!
 >回り込み
 でも、web上では殆どがそう書かれてるし。

 css でデザインせよ なので そうしたら
 テンプレが変われば継承されない って そりゃそうでしょっ
 色々独自cssを作ったんで、テンプレの移転時は大変でした。(実はそうでもなかった。自分で作った部分は結構覚えてる。面倒なだけ。あと記述前後でcssが反映されないと云うことを理解していなかったとか)

 画像の横並びでtableは推奨しないと云うことですが、近頃覚えたばかりでそればかり使ってます。
 洋画の最後に出演者とかスタッフの名前が画面に流れるのですが、センター分けで左に右寄せで物語の出場者名、右に左寄せでその配役名、のデザインを捜していたらtable文に行き当たりました。
 なんかブログを書いてるとたまに画像をうじゃうじゃ配置したい時があるんです。
 そう云う時は多分個別の記事内のhtmlで処理するべきとは、今 気づきました。

 style=" " で書けるのはOKなんだと思ってます。

 ついでに 2行の空白<br>も私にとっては文章の一部

 とか、段落の1文字目の空白はデザインじゃなくて空白という文字。
 と意地になってます。
 色んな投稿サイトがありますが、文頭に入れた全角空白が削除されるサイトが、技術系サイトに多いように思います。投稿者の意図を勝手に処理する技術者って大嫌い。

 

2017/05/27 (Sat) 17:11 | EDIT | REPLY |   
Akira  
To higeさん

こんにちは ( ゚Д゚)ノ

またちょっとゴチャゴチャした話しになりますが、スペース問題について「私はこう解釈し、一応納得している」という内容をお伝えしますね。
ただ「絶対正しい」とは思っていません(笑)
こういうことなんじゃないかな〜? ぐらいです。

結局はやはりGrammerと関わってると思うんですよね。
まず第一に人間の言語があって、その上でコンピュータ向けの数々の言語があるわけです。
特にhtmlというのは「テキスト・文章を記す、そしてそれを後世に残す」という大きな役割を持ってます。

webの標準語は英語です、というのが大前提です。
で、英語圏に於いて「半角スペース」というのはとても重要な役割を持ってます。
例えば
I love you.
これは3単語の繋がりですよね。
英語というのは単語と単語の区切りに半角スペースが必要なわけです。
ところが日本語というのは違います。
ですからそもそも「スペース」の捉え方自体が違うんです。

文頭がひとマス空いている、というのは日本語教育で早い時期に教わります。
縦書きの「作文」なんかはそうですよね。
でも英語というのは文頭を空けるといったことはしません。
Grammerとして文頭にスペースを持ってくるというのは「正しくない」んですよ (´・ω・`)
Grammerに則った上でhtmlの見た目がある程度構築されている、というのは以前書いた<p>というタグもそうです。

英語に「全角」あるいは「全角スペース」というのはありません。
ですから当然「役割の定義」も持っていません。
なので英語をベースにしているweb言語に於いて全角スペースは「文字」として扱われます。
higeさんがおっしゃる通り、日本語の全角スペースは「文字」なんです。

ですがそう簡単な話でもない。
通常私達が作文などでひとマス空ける時、それは「空白文字を書く」とは捉えません。
やっぱり「空ける」という感覚ですよね。
そしてそれは英語圏で言うところの「インデント」なんですよ。結局は (´・ω・`)
webでは日本語全角スペースを便宜上「文字」とはしていても、文頭に使うのは「字下げ」であり「インデント」なんですね。
そして文頭のスペースは「削除する(正しくないから)」というのはW3Cで定められています。
データとしての整合性を保つためにある程度の「統一」「規律」というのが必要。
ルールや決まりというのはとっても大事ですよね。
誰かが「正解」を定めなければ指針が失われますので(笑)
うちの子ども会なんてその「正解」を知ってる人が居ないもんだから(全員未経験者)、行事のことひとつ決めるのでも1時間で済むことが3時間4時間かかるんです。
誰も正解を知らんから(笑)
そこで前任者に正解を教えてもらう、みたいな。
最初からそうしろ、みたいな(笑)

半角スペースについては連続入力しても基本的には1つに削減されます。
通常半角スペースを連打するということは英語ではしません。
ですから言語のルールとして半角スペースは単語間に1つ分だけ。
それ以上は「Grammerから外れた装飾」にあたるわけですね。
意図的にスペースを連打するのならば「実体参照を使え」ってことになります。
記号として扱い、キーボードのスペースキーを押すのではなく「&nbsp;」って書け、ってことになります。
(変換されてしまうので全角で書いてますが実際は半角です)
そして英語に「全角」という概念は「無い」ので、スペースの「大きさ, 幅」で調整します。
実体参照で書いたものはその時点で「半角スペース」でもありません。
キーボードのスペースキーとは別物です。
&ensp; ← 広め
&emsp; ←さらに広め
&thinsp; ←狭い
などが準備されてます。
higeさんの仰るサイトではもしかしたら
&#12288;
と明示することで文頭全角スペースが表現できるかもしれません。

一旦投稿

2017/05/28 (Sun) 15:43 | EDIT | REPLY |   
Akira  
To higeさん②

tableタグについて

table「タグ」を使う必要は無い、という意味での「おすすめしません」ということです。
タグというのは定義ですよね。
tableというのは「表」という明確な定義を持ってます。
ですからその内容が「表」としてふさわしいものであるならばそれで良いと思うんです。
でも実際にtableを使いたがる人の理由のほとんどは
「横に並べたい」
「上下を中央合わせにしたい」
と、こんなところです。
ならばtable「タグ」を使う必要はない。
display: table;
を使えば良いんです。

tableタグの場合
(一応スタイルも入れておきます)

<table style="margin: 0 auto; width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; font-style: italic;">
<tr>
<td style="text-align: right; padding-right: 20px;">Nick Burkhardt</td>
<td style="text-align: left; padding-left: 20px;">David Giuntoli</td>
</tr>
<tr>
<td style="text-align: right; padding-right: 20px;">Juliette Silverton</td>
<td style="text-align: left; padding-left: 20px;">Elizabeth Tulloch</td>
</tr>
<tr>
<td style="text-align: right; padding-right: 20px;">Adalind Schade</td>
<td style="text-align: left; padding-left: 20px;">Claire Coffee</td>
</tr>
</table>

====

display: table; の場合

<div style="display: table; table-layout: fixed; width: 100%; margin: 0 auto; border-collapse: collapse; border-spacing: 0; font-style: italic;">
<div style="display: table-row;">
<div style="display: table-cell; text-align: right; padding-right: 20px;">Nick Burkhardt</div>
<div style="display: table-cell; text-align: left; padding-left: 20px;">David Giuntoli</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; text-align: right; padding-right: 20px;">Juliette Silverton</div>
<div style="display: table-cell; text-align: left; padding-left: 20px;">Elizabeth Tulloch</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; text-align: right; padding-right: 20px;">Adalind Schade</div>
<div style="display: table-cell; text-align: left; padding-left: 20px;">Claire Coffee</div>
</div>
</div>

====

style属性で書いているので冗長ですが。
見た目は全く同じにでき、定義に影響を及ぼしません。
higeさんの仰っている「キャスト」はこれのことだと思うのだけれど。
お時間あればコピペでご確認ください(笑)
(改行の扱いは「htmlタグのみ」で)

2017/05/28 (Sun) 16:00 | EDIT | REPLY |   
hige  
空白の件

誠に判りやすい回答をいただき納得致しました。
&ensp;などの実体参照は暫く使っていたことがあるのですが、サイトによってはそのままの半角文字で表示されてしまいます。FC2ブログランキングとか。それからは使わなくなったんですが、本来はその方が良いのでしょうね。
特に記事タイトルには空白を入れたい時が良くあります。
 試しに使ってみましたが、コメント欄ではどうなるのでしょう。
いつもしょうむないことにもお返事いただき恐縮しております。

2017/05/31 (Wed) 13:35 | EDIT | REPLY |   
hige  
display: tableの件

display: table
すばらしい!
こんなのもあるんですか。
と云うよりこれが正解なんですね。
ちょっと練習してみます。
tableで書いてた画像の横並びも訂正してみます。
確かに表ではないですので。

あと、コメント欄の実体参照、ちゃんと表現されました。

遅すぎるお礼誠に申し訳ありません。
いつもありがとうございます。 <(_ _)>

2017/05/31 (Wed) 13:53 | EDIT | REPLY |   
Akira  
To higeさん

はい。試してみてください。
tableタグと違ってdisplay: table-row; が不要になるパターンもあります。
rowがひとつだけの場合には

<div style="display: table;">
<div style="display: table-cell;"></div>
</div>

これでOK。
tableタグの場合は<tr>が必須ですが、display値の場合は必ずしも必要ではありません。
親のdisplay: table; は必須。
上記のような「rowがひとつだけ」の用途は大抵「上下中央に配置したい」時ですかね。

rowって日本語だと「行」ですかね?
「列」?
いつも混乱する ( ̄∀ ̄;)
なにせ<tr>のことです。
行と列が逆かなぁ (´・ω・`)
日本語の方が難しい(笑)

2017/05/31 (Wed) 22:07 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い