Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

table

というのはみなさんご存知の通り「表」のことを指します
これは html要素です

<table>


この文字列を称するに「htmlのテーブルタグ」「htmlのテーブル要素」
このtableはhtmlの代表的な要素ですが 同じく代表的な
<div>
とは明らかに違う挙動を持っています

・divは意味や定義を持たない

tableは「表である」という定義を有していますが divはそのものズバリを指し示す定義が存在しません
故に「万能タグ」であると言えるかと思います
htmlというのは決して「見た目」のことでなく「意味」「定義」です

一方「見た目」を決める役割を担うのが CSS というわけです
html, CSSに於いて
SEO
と言う時 通常は html構造のことを指します
意味・定義が正しいか否か
SEOはhtmlだけのことではありませんが ここでは狭義でhtml, CSSに的を絞ります

SEO対策済みテンプレート
というのは一般的にこのhtmlがvalid(ばりっど) つまり「正確である」ということ
構造の意味・定義が「正しい」ということですね
ですが htmlがvalidだからレイアウトが崩れないというわけではありません
レイアウト = 見た目
を決定するのは主にCSSの方ですので
CSSの内容如何によっては大きくレイアウトが崩れてしまいます
SEO対策済みテンプレ = レイアウトが崩れない
という図式は必ずしも成り立たない ということになります
もちろんhtml自体も見た目に影響しますが 主に「アウトライン」
"グループの括りがどうなっていて どのような順に配置されているのか"
という点に於いてです
グループの括りが違えば当然見た目に影響します

ともあれhtmlがvalidである というのは大事なことで
Googleなどの検索エンジンが情報をクロール(探索)してインデックス(登録)するわけですが
ロボットにとって装飾など不要なんです
ですが リッチな装飾のサイトが不利になるのか と言えばそんなことはありません
htmlとCSSは切り分けられるべきものであって CSSがゴージャスだと不利なんてことはありません(笑)
シンプルなページ = SEOに有利
これもある意味単純に成り立つわけではない ということです
htmlがvalidでも レイアウトが崩れていればそのページを見たいとは思いません
装飾が豪華 かつ 見易くとも htmlがinvalid(不正確)であれば検索上位にしてはもらえません
結局はバランスでしょうかね (´・ω・`)


毎度長い余談ですみませんね ^^;
(余談かよ)

-----------------

tableというのはレイアウト崩れを起こしやすい要素でもあります
それはtableが持つ「特徴」に起因します

画面サイズが変わっても(小さくなっても) セルが下に折り返してくれるわけではない


横並びのセル(td)は横幅が狭くとも強引に並んでしまいます

自身の外側のサイズを基準としない


これとっても大事です (´・ω・`)
divは自身の「外」の要素のサイズに依存します
width: 100%; が基本です
対象divにwidthを指定しない場合 ひとつ外の要素の横幅と同等になります
一方tableは外ではなく 自身の中身のサイズを基準とします
width: 0%; が基本
中身 つまり セル のサイズが小さければtable全体も小さく
セルのサイズが大きければtable全体も大きくなる という特徴を持っています
中身によって全体サイズが左右される挙動 これを

shrink to fit (しゅりんく とぅ ふぃっと)

と言います
直訳すると「ぴったりになるように縮む」でしょうかしら
そしてこれが「レイアウト崩れ」の大きな原因になることがあります

小さくなる分にはどうってことない
問題は「大きくなる」ことについて


---------------


sample

これtableレイアウト崩れの典型例です
できればこうなって欲しいところです ↓


sample


ここで登場するのがふたつのCSSプロパティ

word-wrap: break-word;
word-break: break-all;

このふたつ 一見しただけでヒジョーにややこしく 混同してしまうこともありますけれど
挙動としては全く異なるものです

tableのセルそのものは折り返しをしません
例えば 画面が大きい時は横4つのセル並び
小さい時は2つのセル並びになって残り2つは下へ.... ということはできません
従ってoverflow(はみ出し)を防ぐためにはセル内の内容を操作するほかありません

word-wrap (overflow-wrap) --- 文字包括をどうするか
word-break --- 文字改行をどうするか


break(ぶれいく) というのは英語で「改行」のことです
カッコ書きで overflow-wrap とありますが
W3C草案で CSS3では word-wrap という名称から overflow-wrap に変更されています
ややこしさ解消のためもあると思いますけども 古いブラウザで認識しませんので
まだ word-wrap の方を使った方が良い... ような希ガス (´・ω・`)

①の画像を見ると はみ出させている原因は
1 の羅列 それから = の羅列です
つまりは記号の連なりですね

webの基本言語はアルファベットですよね
私たちは日本語という大変特殊な言語を使う人種ですが webの基本は英語です
英語には「単語」という概念がありますね

I love you

これは3つの単語から成り立っています
では

Iloveyou

と書いたらどうでしょうか

単語を認識するのは「空白」の存在です
間に空白(半角スペース)が入っているのならば それは単語の区切りなのではないか
という判断の基づいています
Iloveyou
と書いてしまうと 単語の区切りがわからなくなるわけです

I love you という3単語に word-wrap: break-word; を指定した場合

sample

こうなります
love の横にはまだ余裕がありそうですがせいぜい一文字分程度で you 全ては入りませんので you の1単語を改行しています

word-break: break-all; を指定した場合には

sample

こちらは入りきるだけ目一杯上の行に並ばせ you という1単語の途中で改行しています
これが word-wrap: break-word; と word-break: break-all; の違いです
break-all の方は好まれません
何故なら英単語が単語単位でなく文字単位で改行されてしまうと何がなんやらわからん(笑)

で 本題ですが
①の画像のように記号の羅列であったり 数字の羅列であったり
そして一番多いのが

URL

これですよねー (´・ω・`)
URLというのは途中で任意改行してしまうと機能を失ってしまいます
ですから勝手にreturn/ enterキーで改行するわけにはいかない
①画像のようにはみ出す条件に合致してしまいます
実際よく見かけますよね ボックスからはみ出すリンクアドレス (´・ω・`)
URL対策に向けては word-wrap: break-word; で対処できます
ですがtableの場合には万全ではないんです
何故なら shrink to fit の概念があるからです
外を基準にしない = 中を基準にする = 外のサイズを事前に把握して限界まで来たら改行 というのが難しい
それゆえ一番良い方法としては

word-break: break-all;

を指定しておくことです

table {
word-break: break-all;
}

こういうことですね (´・ω・`)
スタイルシートでやっておくならば上記の通り
その都度適用する つまり インラインCSS(htmlソース内にCSSを組み込む)のであれば

<table style="word-break: break-all;">内容</table>


こう書きます
tableにはtrやtdなど必須の部品がありますので当然それも書きます
ここでは省略しています


-------------

というわけで table に対しては予め word-break: break-all; を指定しておく
というのがひとつの方法です
div なんかはその都度処理した方が良いと思います

関連記事
最終更新日2017-07-01
Posted by
HTML5CSS3Tips

Comments 0

There are no comments yet.

Leave a reply

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