ULリストやDL定義リストで内部SEO対策

ULリストはよく使用しますが、DL定義リストも内部SEO対策の一環として有効らしいので、改めて正しい使い方をチェック。

検索エンジンはdl要素に書かれているキーワードに関して充実したページだと判断する傾向にあります。
SEO対策 初心者 <dl>タグ・<dt>タグの最適化

ランキング上位にある、とある企業サイトのソースを見てみると<li>の中に、<dl>を多用してて「えっこれ文法上正しいの!?」と驚きましたが、調べてみると全然、問題ないんですねこれ。

続きを読む ULリストやDL定義リストで内部SEO対策

box-sizingでデザインが楽になる:CSS3

コーディングデザインの本を見ていると、CSSに必ずといっていいほど登場するのが「box-sizing: border-box」。

解説を読んでもいまいちピンと来ない。
box-sizingプロパティには「border-box」と「content-box」などがあってその違いも今いちわからない…。

で、実際に作ってみて納得。こりゃ便利なプロパティです。
グリッドレイアウト、とくにレスポンシブサイトなんて必須かもしれません。
⇒box-sizingプロパティのサンプル

今までは、CSSでボックスを作って余白や枠線を入れたりすると、幅or高さで指定した値より大きくなってデザインが崩れたりと、イラつくことも多々ありましたが。。。box-sizing: border-boxを指定するとスッキリ解消します!

全ての要素に適応させる場合は、ユニバーサルセレクタ (*)でOK

*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

-webkit-とか先頭に付けているものはベンダープレフィックスと言うらしい。

拡張機能であることを明示するための識別子
ベンダープレフィックス-CSSの基本

だそうです。
これをつけないとFirefoxでは反映されませんでした。念のため各ブラウザのものを指定しておいたほうがよさげ。

■各ブラウザのベンダープレフィックス
-moz- (Firefox)
-webkit- (Google Chrome、Safari)
-o- (Opera)
-ms- (Internet Explorer)

※IE7やIE6は対応しません。
というか対応させる方法あるんでしょうか・・・(^^;)?
もうXPは終了なので個人的にはほぼスルーします。

フォントサイズ(px・em・%・pt)を単位別に数値変換

サイト制作する際は、body全体のフォントサイズを指定するのがお決まり。

基本のフォントサイズが「12px」になるよう%で指定するなら「75.0%」が一般的です。

/*CSS記述*/
body {
 font-size: 75.0%;
}

で、よくあるのがデザインからコーディングしているとき。
基準px→%(em)単位で変換する際に、フォントの大きさが分からなくて、あれ?ってなることが多々・・・笑

そんなとき役立つ、便利な海外サイトを見つけたのでメモ。

http://pxtoem.com/

フォントサイズの早見表だけでなく、単位別に数値の変換もしてくれる!

左画面で基準にしたいフォントサイズを選択すると、右画面にそのフォントサイズを軸としてem、%サイズが変換されて表示されます。

▼12px、0.75em、75.0%、9pt基準
body_12px

▼13px、0.813em、81.3%、10pt基準
body_13px

▼14px、0.875em、87.5%、11pt基準
body_14px

dl定義リストをtableっぽく表組みにしてみる

表組みタグといば<table>。
でも<table>はタグがいっぱいになるので、個人的にあまり好きじゃない。

そこで、<DL>定義リストを、CSSで表組みぽくできるみたいなので作ってみた。

<DL>の表組みサンプル

ポイントは…

  • <DT>の幅にあわせ<DD>をmargin-leftで寄せること必須。
  • 高さを指定しない場合は、<DT>にfloat: left;を指定し横並びさせるのが簡易。
  • 高さを指定する場合は、<DD>にmargin-top(ネガティブマージン)指定し<DT>の横に並べる。
  • <DD>のmarginは、余白やボーダーの分も計算。

簡易な表組みに最適。

2列、3列程度の簡易な表組みなら、<DL>定義リストにするのがいいかもしれない。HTML内もスッキリするしSEO的にもいいんでは。

列が多いもの、複雑な表組みならやっぱりtable?

  • 欠点1
    縦(行)はガンガン増やせるが、横(列)を増やそうと思うと面倒…<DD>に対し、いちいち横マージンを指定する必要がある。
  • 欠点2
    <DT>に背景色を入れると<DD>内の行数が増えたとき、<DT>の背景色は自動では広がらない…。やり方があるのだろうか?

まぁ、<DL>は定義型のリストを作成するタグであって、表組み用のタグではないですからね…(笑。もっと自由に表組みさせたいときは、やっぱり<table>しかないみたい。

レスポンシブウェブは可変グリッドレイアウトが必須

マルチデバイスに対応するレスポンシブウェブデザインには、グリッド可変というCSSでのレイアウト方法が必要不可欠になる。フルードグリッドレイアウトとも呼ばれるらしい。

今までブロック要素(カラム幅)は、CSSのwith:数値PXで固定していたんだけど、これをwith:数値%にしてスクリーン幅に応じ、カラム幅を変化させるわけですね。

ブロック(カラム幅)のPX指定を%指定に変える計算式

(変換したい値)÷(変換したい値の親要素の幅)×100

最初に、左側に配置した#main(620px)の横幅を%に変換してみましょう。#mainの親要素は#contents(960px)ですので、前の計算式に当てはめると、

620px÷960px×100=64.583333333%

となります。

ASCII.jp:フルードグリッドとレスポンシブWebデザインの完成 (1/3)|ゼロから始めるレスポンシブWebデザイン入門

ipadのとき、スマホのとき…カラム、ボックス群は全部計算していかなければなりません。

Dreamweaver CS6には、可変グリッドレイアウト機能が搭載されているらしいけど、金欠だから買えないし(´;ω;`)手作業で頑張るべし!

あとネックになるのが凝ったデザインをするとき。とくに画像…グリッド可変しても大丈夫なように緻密な設計が必要になります。

3カラムのシンプルテンプレート

いろいろ使いまわしのきく、簡単にレイアウトされたテンプレートを作っておきたいと思い、超シンプルな3カラムのテンプレを作ってみた。

ただ、一般的な3カラムのHTMLコーディング順って、大体以下のようになるよねぇ。

  1. ヘッダー
  2. サイドA
  3. メインコンテンツ
  4. サイドB
  5. フッター

ページごとの内部SEOをより強化したいから、ヘッダーの直下にメインコンテンツを配置してみたいのだ。こんな感じ↓

  1. ヘッダー
  2. メインコンテンツ
  3. サイドA
  4. サイドB
  5. フッター

と思って調べたらCSSで結構簡単にできた。

レイアウトイメージ
3column

サンプルはこちら

firefox、Chromeは大丈夫だけど、IE8以下はメインコンテンツがサイドBの位置になってる@@はぁ…IEはやっかいだな。

あとは<main>の中に<nav>(カテゴリナビ)を入れることがいいのかはイマイチわからならい。

<div id="content">
<main><article>~</article></main>
<nav>~</nav>
</div>

のように、<nav>は<main>外でもいいと思う。
でもメインコンテンツに関連するカテゴリなら<main>内に入れていいはずだし、関連記事も<aside>で入れていいはず。

<nav>って…

ちょっとぼやき。
カテゴリーをはじめパンクズや会社概要とか、フッターのサイト案内のリンクとかも全部ナビゲーションだよね。なんか<nav>多すぎ。<aside>で囲えばいいのかとも思うけど・・・それも違う気がする。

<menu>っていう要素もあるけど、これは、操作メニューを作成するタグ。例えば「新規作成」「編集」とか…しかも2013.8頃のHTML5 勧告候補で削除対象となっている。
※<menu>はHTML5から削除されるが、HTML 5.1で<menuitem>として機能は引き継がれるらしい。

ん~せめて、メインカテゴリ専用のHTML5タグが追加されて欲しいなぁ…<category>とかで。

直感的にHTML5を構築、しかも無料なGoogle Web Desinger

ちょっと、なにコレ。
Adobeがもういらないんじゃ…と、以下の動画を見れば誰もが感じるはず。

Google Web Designer は、HTML5 で構築された高度なウェブ アプリケーションで、視覚的なコーディング インターフェースを使用して、HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザイン、作成できます。デザイン ビューで描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化できます。コンテンツの作成が完了したら、人間が解読可能な HTML5、CSS3、JavaScript を出力できます。
Google Web Desinger

うん、使って見たい!

って思ったんだけどPCがまだXP…。
Google Web Designerはwin7以上にしか対応していません(笑。Win7のOSソフト買ってあるのに忙しくて見ないフリしてた。もうほんとアップグレードしないといけませんね。

で、Google Web Designerをググってみたら、どうやらまだβ版でサイト全体の構築…とまではいかないようです。アニメーション広告やFlashサイトのような感覚かな?

直感的にサイトデザインできちゃって、コードを吐き出してくれるものだと思ってた。残念。でもGoogleはどんどん進化するから、将来的にはそうなるかも?今のうちにちょこちょこ触って慣れておこう!

Google Web DesignerでベースのHTMLやCSS、JavaScriptを作って…Wordpress用にタグを置き換えて…テーマファイル作れたら最高だわ★

画像下にテキストを周り込ませないCSS

画像にCSSでfloatで指定した場合、文字が画像の下まで回りこんでいきます。。。marginやpadding指定でやり過ごしてましたが、ブラウザによるレイアウト崩れが気になっていました。

通常の場合↓

海「海の少年」  著 者:小川未明

今年の夏休みに、正雄さんは、母さんや姉さんに連れられて、江の島の別荘へ避暑にまいりました。正雄さんは海が珍しいので、毎日朝から晩まで、海辺へ出ては、美しい貝がらや、小石などを拾い集めて、それをたもとに入れて、重くなったのをかかえて家へ帰ると、姉や妹に見せて、だんだんたくさんにたまるのを見て、東京へのおみやげにしようと喜んでいました。←この部分が気なる

続きを読む 画像下にテキストを周り込ませないCSS