HTML5が制定されてもう数年たち、世間では5が主流となってきていますが、皆さんは5になってからブロックレベル/インライン要素が廃止されたことに気づいているでしょうか?

※ブロックレベル/インライン要素のルールはざっくり言うと、「インライン要素の中にブロックレベル要素を入れてはいけない」というものです。

その代わりにコンテンツ・モデルという概念が作成されました。

ちなみに自分はブロックレベル/インライン要素が廃止されたのは知っていましたが、このコンテンツ・モデルという単語は知りませんでした(内容はなぜか把握していたけど)

これは「あるコンテンツの中にはこのコンテンツしか配置できない」「あるコンテンツの中にはこのコンテンツは配置してはいけない」というルールです。

この「コンテンツ」とは、ざっくりカテゴリーとしてタグが分類されています。

カテゴリー一覧

コンテンツ名 意味 タグの一部
メタデータコンテンツ 主にhead内に記述するサイトの情報を示すタグ meta, link, script, title
セクショニングコンテンツ 文章の塊を示すタグ section, article, aside, nav
ヘッディングコンテンツ 見出しのタグ h1,  h2
フレージングコンテンツ 段落などに含まれるタグ(従来のインライン要素がほぼ含まれる) a, span, button, small
エンベッディッドコンテンツ 主に外部コンテンツを指すタグ img, audio, video, canvas
インタラクティブコンテンツ 主にアクションを発生させられるタグ a, input, button

※ちなみにフローコンテンツというものもありますが、これにはほとんどのタグが含まれます。

見た感じHTMLの基本概念である「文章構造」にタグを振り分けたって感じですね。

実際の書き方は?

そして以下がNGパターンとOKパターンです。

NG
<span>
  <div>
      <p>吾輩は猫である</p>
  </div>
</span>


まぁ普通に気持ち悪いですね。昔のブロックレベル/インライン要素の概念でもspanの中にdivが合ってだめですし、コンテンツモデルとしても文章の一部(span)の中に塊(div)や段落(p)があって構造がおかしいです。

OK
<div>
  <p>吾輩は<span>猫</span>である</p>
</div>

まず塊(div)は外へ、中には段落(p)を配置し、一部の文字を囲む(span)。

コンテンツモデルとしての文章構造もしっくりきますし、昔のブロックレベル/インライン要素としてもおかしくはないですね。

結論

厳密にはブロックレベル/インライン要素の時代と考え方は違いますが、基本的には「文章としておかしい構造を書かない」ということを徹底すればいいと思います。

てかこれ、ブロックレベル/インライン要素時代でも普通意識して書いてると思うので、ちゃんともとから文章構造を意識して作っていれば特にコンテンツモデルができたからって修正する箇所は少ないんじゃないかな……

余談

ちなみにこのブログはそんなこと知らない時期に改修したままなので、html構造はやばいです。

いきなりh4とかで始まってたりするからね。

今nuxt.jsでフルリニューアル作業をしているので、今月中には切り替わると思います(記事のURL構成変わるからリニューアル前には記事増やしたくなかったけど仕方ない)

どうもこんにちは、うちのサイトではサムネイル表示の画像リンクにHighSlideを使用してポップアップ表示させています。

こんな奴ですね。

workspace_csp_20130114.png

ただこれの使用方法がちょっと面倒でして、サムネイルのaタグにいくらか記述が必要です。

なので今回はその記述を自動化する方法を紹介します。

とある事情により、日本語英語混在の文で半角スペースを排除する正規表現を探していたんですけど、普通に\sだとすべての半角スペースに一致してしまうため、英文の半角スペースまで一致してしまうんですよね

今回やりたいのはあくまで日本語を含めた文での英文以外の半角スペースを排除することなので上記だとダメダナ(・×・)

というわけでいか試行錯誤の結果

答えだけ知りたけれはCASE4見ればいいよ

最近絵の記事が全くない御堂です。

てめぇ本当に絵描か?

それはさておき、Chromeの未認証サイトを非推奨にする動きが本格的になりまりましたね。

当サイトにも連絡が来てました。

なのでいい機会ですし近々SSLを導入しようと思います。

ただレンタルサーバーの方がHTTP/2に未対応なのでそこの恩恵はまだ無いです(対応予定のアナウンスはあるのでそのうちなると思いますが)

とりあえずはChromeにて『保護されていません』となる対策に収まりますね。

ついでにPHPも7に切り替える予定なのでそちらの面では多少サイトの表示が速くなるかもしれません。

まぁ、この記事を書いてる時点ではまだ作業してないので近々するよという報告だけです。

 

Ps.最近ブログ書かなすぎて文章構成おかしい。……おかしいのは前からか

今までの記事を統合しました。以後はこちらに追記していきます。

MENU

floatの親要素の高さが消失する対処

<div class="hoge">
	<div class="left">左にfloatさせるよー</div>
</div>
.hoge {
	overflow:auto;
}

.left {
	float: left;
}

floatの親要素にoverflow: auto(or hidden);でもふっかける。

ブロック要素での縦に中央表示

要素を縦に中央表示させたくて下記のようにさせると思いますが、実はこれdivやpなどのブロック要素には機能しませんのでその対処。

hoge { vertical-align: middle; }
vertical-align: middleを強制的に機能させる

sample

sample

hoge {
	height: 100px;
	vertical-align: middle;
	display: table-cell;
}

display: table-cellを追加するとvertical-align: middleが機能します。

ただこれには下記のようなデメリットも存在します。

  • すでにdisplay属性を使用してしまっているのでtable-cell以外の値を使用することができない
  • margin属性が機能しないため余白を開けることができない(paddingは内側に余白を設けるため代替にはならない)

まぁどちらも更に一つ階層増やせば対応出来ますが、ソースに無駄が……

 height要素と同じ値のline-heightを設ける

sample

 hoge {
	height: 100px;
	line-height: 100px;
}

heightとline-heightに同じ値をふっかけてやると縦に中央表示されます。

ただしこちらにもデメリットが存在します。

  • 必然的に1行でなければならない

まぁ2行にしたら2つにline-heightがかかってしまいますからね……

※sampleでは元々のCSSファイルの関係上少し別のコードになっています。

heightを指定せずに上下に余白を設ける

sample

sample

hoge {
	padding: 36px 0;
}

上下のpaddingで高さを調整する……というやり方なのですが、marginも機能するし複数行も機能する。中身が動的でない限り最適な気がしなくもないのですがなにせ調整がめんどくさい……

上記のサンプルを見ても分かる通り、中身のフォントサイズやboaderがあるときのその数値を考慮してpaddingの値を入れないといけないので非常にめんどくさいです。

中央寄せで字間を調整している際の注意点

letter-spacingで字間を調整する際に中央寄せや右寄せをしている場合は注意が必要です。

実際にやってみればわかると思いますがletter-spacingのみを指定していると正常には表示されません。

その場合は同様の値をtext-indentに入れてやれば解決します。

ダメな例:左にずれている

ABC

<div style="width: 150px; border: 1px solid #000;">
    <p style="letter-spacing: 1em; text-align: center;">ABC</p>
</div>

良い例:ぴったり真ん中に

ABC

<div style="width: 150px; border: 1px solid #000;">
    <p style="letter-spacing: 1em; text-indent: 1em; text-align: center;">ABC</p>
</div>

要はletter-spacingで字の"後"に余白を入れているので最後の字の後にも余白が入っているため、中央表示させようとするとその余白も幅として認識されるため位置がずれるです。なので文字列の最初にも同じだけの余白を入れて文字列の前後の余白を同じにし位置がずれないようにしているのです。

ページ内リンクでヘッダーに隠れる対処

ヘッダーなどが固定化されている場合、ページ内リンクでリンク先に飛ぶと上部がヘッダーで隠れます。

対処法としてはリンク先のID(css_hoge)に下記のCSSを適用させることで位置をずらすことができます。

[id^="css_"] {
	padding: ヘッダーの縦幅px 0 0;
	margin: -ヘッダーの縦幅px 0 0;
}

archive


×

ログイン