HTML＆CSSお勉強

始まりは、webデザイン担当小川の、この依頼でした。

いや……無理やん？

都合の良いように変更してツッコミが入ったら「最初からそんなんでしたよ？ほら、こっちのillustrator、CS5ですし？CCじゃないですし？データが壊れちゃったんですよ。CCに変えてくれたら大丈夫なんですけどね〜変えてくれたらね〜」と論点のすり替えを行おうかとも思ったのですが。
一応、頑張ってみました。

とは言っても、永遠の初心者コーダーです。
とりあえずダイヤの画像を作って、beforeとafterに入れてみれば何とかなるんじゃないか、と軽い気持ちで試してみたところ……

そりゃこうなりますよね〜。

いっそ画像じゃなくて、疑似要素でダイヤ作っちゃえばいいんじゃないかな。でもそんな知識は……と思った能登でしたが、ふと思い出したのが、いつも利用させていただいている、デザインサンプルでした。
スキルもなければセンスもない私の強い味方です。

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50（NxWorld様　より）

こちらの「マーク #1」を参考に、このようなコードにしてみました。

■HTML

<h1>タイトル</h1>

■CSS

h1 {
  position: relative;
  padding: 0 1em;
  border-bottom: 1px solid #000;
}
h1::before {
  position: absolute;
  bottom: -.2em;
  left: 0;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
h1::after {
  position: absolute;
  bottom: -.2em;
  right: 0;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

成功しました！
レスポンシブでも問題ないです。
確認した限りだと、横320pxまでは両端にダイヤがありました。

タイトルが長くなり、複数行になっても

大丈夫です。
大丈夫じゃないのは、とうとうカラスまで羨み始めた社長だけです。

いつものように、社長のfacebook記事からでした。

暑くて食欲がなくなりがち……だと思ったら、大好きだけど最近足を運べていないレストランがFacebookページを更新したのを見て、お腹が鳴りました。
仕事中のFacebookは色々と危険ですね。

【ハートブレーン】https://heartbrain.net

レスポンシブデザインにおいて、今や大人気のflexですが。
カラムレイアウトなら良いのですが、リストや表を作る時に、綺麗に整えるのは少々難しいようです。

Flexbox 改行の弱点（鼻ちょうちん様　より）

正しくこの記事での指摘通りです。

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

このようなタグで、3列・複数行のリストを作る場合、ついこのようにしてしまいがちです。

ul { display: flex; flex-flow: row wrap; margin: 0 -2% 0 0; }
li { width: 32%; margin: 0 2% 0 0; }

しかし、実はこうなります。

あくまでリストとして考えると、何となく不格好です。
なので、上記の記事の通り、ネガティブマージンを用いてみました。

ul { display: flex; flex-flow: row wrap; margin: 0 -2% 0 0; }
li { width: 32%; margin: 0 2% 0 0; }

ただし、パーセント指定で可変幅に対応させたい、という理由でpxは使わずに。
その結果

こうなってしまいました。
この方法、px指定だと全く問題ないのです。
しかし%の場合、少なく見積もらないと、カラム落ちしてしまうようです。
2%を1%に減らすと、綺麗に表示されました。
少し左に寄ってしまうのですが。

なので、左右にmarginを設定しました。

ul { display: flex; flex-flow: row wrap; }
li { width: 32%; margin: 0 0.5%; }

パーセント指定（と楽な方法）にこだわるのであれば、これが1番無難なのかもしれません。
他の区切りとは左右幅が狭くなってしまうのが気になりますが。

結局のところ、綺麗に見せたければ、上記の記事で出されていた結論「ブレークポイントで justify-content の指定を分ける」が確かに現時点では1番良いのかもしれません。

あちこちで語り尽くされているとは思うのですが、2枚の画像を重ね、上に配置した画像を縦横の中央にセンタリングしたい時があります。
情報が錯綜していて、結構ごちゃごちゃになってしまって、かなり試行錯誤したのですが。
自分なりにまとめてうまくいった方法を紹介します。

このように、2つの画像を縦横中央に揃えたい場合ですが、少なくとも私の場合、片方を背景画像にしようとして失敗しました。
というのも、レスポンシブwebデザインに対応しようとしていたのです。

なので、あまり良い方法ではないかもしれないのですが、positionとz-indexを使いました。

HTML

<div class="box">
<div class="background"><img src="tanbo.jpg" alt="1枚目の画像"></div>
<div class="photo"><img src="heartbrain.jpg" alt="2枚目の画像"></div>
</div>

CSS

.box {
	position:relative;
	top: 50%;
}
	
.box .background { z-index: 0; }
	
.box .photo {
	z-index: 10;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
	
.box .photo img {
	width: 30%;
	max-width: 150px;
	height: auto;
}

私が確認した限り、問題はありませんでした。

上のコードは、下の画像が width: 100% であることが前提です。
横サイズを限定したい場合は、下の画像のサイズも指定すると、その通りに表示されると思います。きっと。

【ハートブレーン】https://heartbrain.net

世間を騒がせ、コーダーの負担を大幅に減らした、CSS3のフレキシブルボックス。
と言いながら、Nがそれに出会ったのはつい最近という、相変わらずの浦島太郎コーダーなのですが。

フレキシブルボックスとは、画面やブラウザのサイズに応じ、要素の位置やサイズを一定に保ちつつ綺麗に整え、自由自在なレイアウトを実現する、というものです。
レスポンシブwebデザインには欠かせません。
自由自在なレイアウトって何？というと、具体的には要素の配置方向・順序、折り返し方法、整列までできちゃう、という画期的というか、これまでfloatに苦しめられた日々が報われた気がします。

画像のように、カラムを画面のサイズに応じて自由自在に変えたい時にはとても便利です。
画像は最近各方面にご無沙汰している、最近の社長です。
既にこのブログで紹介した社長の画像ばかりですが、数年前と少しも（本当に少しも）変わらない社長の姿をお楽しみください。

CSS3なので、当然注意しなければならないのは、各ブラウザの対応状況ですが。

Google Chrome（PC）
バージョン4～20までは「display:-webkit-box」
21～28までは「display:-webkit-flex」
28以降は「display:flex」

Firefox（PC）
バージョン2～21までは「display:-moz-box」
22以降は「display:flex」

InternetExplorer（PC）
バージョン9までは「未対応」
10は「display:-ms-flexbox」
11は「display:flex」

Safari（PC）
バージョン3.1～6.0までは「display:-webkit-box」
6.1以降は「display:-webkit-flex」

標準ブラウザ（Android）
バージョン2.1～4.3までは「display:-webkit-box」
4.4では「display:flex」

Google Chrome（Android）
バージョン35？「display:flex」

Safari（iOS）
バージョン3.2～6.1までは「display:-webkit-box」
7.0では「display:-webkit-flex」

CSS3の「フレキシブルレイアウト」使い方まとめ（フラップイズム様　より）

最新版は全て display:flexで統一されている……と思いきや、Apple……！
しかし -o- だの -ms だの書かなくて済むようになったのはありがたいです。
CSSの行数的に。

SafariとかFirefoxは最新版へのアップデートの敷居が低いので、ほぼ最新版だと思ってよさそうですし。
IEは11以外はYahooすらまともに見れない状況で、11へのアップデートを余儀なくされていますし。

CSSの記述ですが、Google先生にお伺いを立てると、display:flex と display:flexbox が出てくるのですが。
display:flex が正解で、display:flexbox は2015年までの仕様らしいです。

【ハートブレーン】https://heartbrain.net

写真をかっこよく並べたい。

特にギャラリーを自作した場合など、そう思いますよね。
いや、私はギャラリー作れないのですが。
サイト内の画像がPinterestのようなレイアウトにできたら……！

jQueryプラグインなどで対応可能のようですが、ここは敢えてcssのみでできたらうれしいな、などと他力本願な私の願いを叶えてくれる記事を発見しました。

[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック（コリス様　より）

プラグインからヒントを得て実装するなど、私には到底できません。

しかし

どうしてこうなった……。

いや、恐らく5の画像（縦長の画像）が、1・2の画像の合計よりも少し長くて高さが余ったから、自動計算などにすると必然的に3行目が出来上がるのだろうと予想はつきますが。
何故なら

#photos img {
  width: 100% !important;
  height: auto !important;
}

この記述を削除すれば、2行にはなるからです。
ただし、1→3→（下へ）→2→4、という順番にはなるのですが。
これでいいか、と一瞬だけ私の中に巣食うナマケモノが囁いたのですが、レスポンシブwebデザインの場合、画像の比率がおかしくなります。

もうtableタグにするしかないのかなぁ、と諦めかけたのですが、何とか解決法を見つけました。
恐らく完璧な方法とは言い難い、その場しのぎではあるのだと思いますが。
付け焼き刃はいつものことなのです。

HTML

<div id="photo">
<div>
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
</div>
<div><img src="5.jpg"></div>
</div>

CSS

#photo {
	display: table;
	width: 100%;
	margin: 0 0 30px;
	}
#photo div {
	display: table-cell;
	width: 35%;
	padding: 0 0 0 5%;
	}
#photo div:first-child {
	width: 65%;
	padding: 0;
	}
#photo div ul {
	line-height: 0;
	-webkit-column-count: 2;
	-webkit-column-gap: 10px;
	-moz-column-count: 2;
	-moz-column-gap: 10px;
	column-count: 2;
	column-gap: 10px;
	width: 100%;
	}
#photo div ul li {
	padding: 0 0 10px;
	}
#photo img {
	width: 100%;
	height: auto;
	}

参考にさせていただいた記事では、画像を隙間なく並べるということで、column-gapが0になっていますが、今回私は少しだけ間隔を空けたかったので、2にしました。
尚、問題発生時は、column-gapを0にしても、画像1〜3は3行のままでした。

もう少しスマートで効果的な方法も探します。

【ハートブレーン】https://heartbrain.net

HTMLの基本といえば、基本なのですが……。
つい忘れがちなんですよね。
DOCTYPE宣言って。

Lightbox系のプラグインの表示位置がおかしい、という内容の嘆き兼無能告白を、何度かこのブログでしていると思うのですが。
またこのような現象が起きました。

jQueryのバージョンが1.11.0だったので、これが悪いのか？と思って2.3.0にしても変わらず。
bodyの閉じタグ直前に置いていたscriptタグが悪いのか？と思って位置を上にしても変わらず。
今度こそお手上げか？と思ったのですが、明らかと言える原因がありました。
明らかというか、盲点というか、灯台下暗しなのですが。

DOCTYPE宣言を忘れていたのです……！

DOCTYPEとは、各ブラウザに「このファイルはHTML4だよ」「このファイルの規格はXHTMLだよ」と最初に伝えるものです。
ファイルの最上部で宣言します。
これがなくても、cssなどは各ブラウザ毎の解釈によって大体の場合は正しく表示されるのですが、プラグインだとそうも行かないこともあるようです。
つい省略してしまいがちですが、やはり大きな意味があるのですね。

ちなみに、HTML4の場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTMLの場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5の場合

<!DOCTYPE html>

HTML5はこれまでの賑やかさがウソのような、シンプルなDOCTYPE宣言です。

ヘッダーは訳の分からない記述も多くて、つい何も考えずにコピー＆ペーストで済ませてしまいそうなのですが、1つ1つ意味を読み解くと、新しい発見があって楽しいです。

【ハートブレーン】https://heartbrain.net

レスポンシブデザインの場合、特に気を遣うのが横幅です。
昔も今もやはり2カラムレイアウトが多い印象ですが、設定を間違えたりすると、タブレットで閲覧したらカラム落ちでレイアウトが崩れて……というのは、よくある話です。
少なくとも、私の中では。

画面サイズに応じて右も左もサイズを変えていく場合だったら構わないのですが、問題は片方だけサイズを変えたくない場合です。

例えばこのようなサイトを作るとします。

設定はこのようにします。

私は最初、CSSはこのような設定にしていました。

#wrapper {
  overflow: hidden;
  width: 100%;
}

#sidebar {
  float: left;
  width: 200px;
}

#content {
  float: left;
  width: 100%;
  margin-left: -200px;
}

#entry {
  margin-left: 220px;
}

見た目は整いました。
しかし、大きな問題が発生したのです。

左カラムのメニューにカーソルを当てても反応しない……！

Google Chromeのdeveloper toolで検証してみたら、おぼろげにだけ掴めました。
問題のメニューの箇所でクリックしてみても、何故か表示されるのは #content の部分。
扱いが右カラムの中にある形になっていたのです。

正しくは、こちらでした。

#wrapper {
  float: right;
  width: 100%;
  margin-left: -200px;
}

#sidebar {
  float: left;
  width: 200px;
}

#content {
  position: relative;
  margin-left: 220px;
}

今度はメニューも反応し、各コンテンツに行けるようになりました。

ちなみに、ネガティブマージンはFirefoxでは未対応だというのは有名な話です。
代案（position で left の位置を指定する方法）を敢えて設定せずに試してみたのですが、現在（Firefox 35.0.1）は対応しているようです。

【ハートブレーン】https://heartbrain.net

サイトを作る時に、まずどうしようかと思うのが、ヘッダーやサイドバー、フッターなどの全ページ共通項目です。
CMSなどでは最初から共通なのですが、HTMLだとそうはいきません。
昔はフレームという手が使えましたが、今やSEOにおけるマイナス要因だとまで言われているのが現状。
知識が足りない（控えめな表現）Nの知るところでは、まだまだ打つ手は少ないように思います。

更新するのが面倒！サイトの共通部分を簡単に作る様々な方法（WEB Drawer様　より）

こちらによると

・Dreamweaverのテンプレート機能を使う
・JavaScriptを使う
・PHPを使う
・SSIを使う
・Node.jsやRubyのツールを使う

という5つの選択肢があるようです。

今回私がしたかったのは、ロリポップで既存サイト（Dreamweaver制作）のリニューアルです。
当然最有力候補となるのが、引き続きDreamweaverを使うことです。
もちろん最初は私もその線で進めていきました。

しかし、思わぬ落とし穴がありました。

今回はHTML5を用いてみたのですが、HTML5での推奨コードはUTF-8です。
なので

<meta charset="UTF-8">

とヘッダー部分に入力しました。
Dreamweaverでの文字コード設定もUTF-8に変更済みです。

なのに、何故か勝手に、Shift_jisに変換されます。

テキストエディタで開くと、日本語で入力した部分が、全て文字化けしています。
新たにファイルを作り直してみても、結果は同じです。
もし使い続けるとしたら、一旦Dreamweaverで保存した後、テキストエディタで全てのファイルの文字コードを修正して、上書き保存する必要があります。

面倒だし怖すぎるので、他の手を使うことにしました。

どうやらタグの書き方が全て変更になるらしいのと、難しすぎて私が理解できないという、やむを得ない事情により、ツールはなし。

Javascriptも、SEO対策をしていく上で、検索エンジンがjsファイルまで読み込んでくれるかどうかが分からないので、今回はなし。

じゃあやっぱりPHPかな……と

共通部分のインクルード（初心者でもできるホームページ制作＆SEO様　より）

こちらを参考にして、ヘッダー部分をhead.html、サイドバー部分をside.htmlにまとめます。
head.html、side.html、どちらにもhtmlタグやbodyタグなどは必要ありません。
抜き出したい部分のみをコピーして貼り付ければOKです。

そして挿入したい場所に

<?php include('head.html'); ?>

と入力します。
あとはindexファイルと同じ階層の.htaccessに

AddType application/x-httpd-php .htm .html

と入力して、終わり

と思ったら、動作しませんでした。
あれ？と思ったのですが

拡張子.htmlでphpを動かす。ロリポップサーバー最新情報（Aveit.様　より）

こちらによると、ロリポップでの.htaccessの書き方は、少し違うようです。

AddHandler php5.3-script .htm .html

これで解決しました。（独自ドメインの場合）
PHPのバージョンを入力する必要があるようです。

でも、ロリポップってPHPのバージョンを順次アップしていってくれていた気が……。
その度に.htaccess書き換えるのは面倒かも。

そう思い、SSIにしてみました。
挿入したい場所に

<!--#include virtual="/head.html" -->

.htaccessに

Options +Includes
AddHandler server-parsed htm
AddHandler server-parsed html
AddHandler server-parsed shtml

と入力しましたが、読み込んでくれません。
あれ？と思い、ロリポップのwebサイトで仕様を確認してみたら、「よくある質問集」に

shtml……。

結局唯一実行できたPHPにしました。

テンプレートエンジンの導入方法を勉強する、という課題ができました。
毎日学習できる素晴らしい環境に感謝します。（そして無知に対する批判の目をかわします）

【ハートブレーン】https://heartbrain.net

便利だけどいろいろと設定が難しいレスポンシブデザインですが、個人的に一番厄介だと思うのは、背景設定です。
普通のテキストに背景画像を設定しているだけならまだしも、ボタンとして設定している場合が特に難しいというか、間違いやすいというか。

<p>
<a href="リンクするURL">
ハートブレーンCAFEで<br />
社長お手製コーヒーを飲もう
</a>
</p>

p a {
display: block;
width: 100%;
background: url(画像url) no-repeat left top;
background-size: contain;
}

では

ハートブレーンCAFEで
社長お手製コーヒーを飲もう

こんな表示になってしまいます。

background画像をレスポンシブに対応させる方法（たすデザイン様より）を参考、というか完全にコピーさせていただきました。
成立させるには、まず縦横の比率を計算します。

高さ÷横幅×100=padding-topの%(パーセント)

そして、cssを下記の通り設定します。

p a {
display: block;
width: 100%;
height: 0;
padding-bottom: 計算して出した％;
background: url(画像のURL) no-repeat 0 0;
background-size: contain;
}

heightを0に、padding-topもしくはbottomに％を設定します。
上部に文字を載せる場合は、padding-topだと枠外に隠れてしまうので、padding-bottomにしてください。

ちなみに文字の内容は

社長「寒い。コーヒー淹れてこよう」（完全に独り言）
私「あ、ごちそうさまです」

空気を読む気が全くない社員Nの、日頃の行いの表れです。

ごちそうさまでした。

【ハートブレーン】https://heartbrain.net

スマートフォンでのネット利用率が益々上昇しているようです。
PCは電源入れて起動するまでの待ち時間は長いし、ブラウザとか言われてもどれがどれか分からないし……という声も聞きます。
その点スマートフォンは手軽に閲覧できるし、面倒なメンテナンスも必要ないし、ユーザーとインターネットとの距離がぐっと近付きます。
個人的には、スマートフォンだと電池減るの早いし、ページ読み込み速度は遅いし、そもそも自宅からだと電波届きにくくて繋がらないし、PCを優先してしまうのですが。
4G？何それ。うちに来るのあと何年後かなー。

今やwebサイトはPCでもスマートフォンでも無理なく見られるのが絶対条件になりつつありますが、制作側にしてみれば、結構手間がかかります。
ページを2つ作ってhtaccessで切り替えるとか、デバイスのサイズに合わせたレスポンシブデザインにするとか。
どちらにもメリット・デメリットはあります。

レスポンシブデザインを採用した場合、ネックとなるのが「PC用」「スマートフォン用」の表示切り替えボタン。
どのサイトでも見かけますよね。
スマートフォンで閲覧していても、やはり情報量が減ったりするので、PC用表示させたい人も多いでしょう。
そういう時に、参考にしたのがこちら。

レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた（A40様）

作業が楽で、解説も分かりやすく、私でもすぐに設置できました。
一番難しかったのが、jquery.cookie.jsをダウンロードする時にちょっと迷子になりかけた、というところでしょうか？
調べていく中で、この方法を採用している人はやはり多かったです。
多くのコーダーにとって救いの手ではあるのですが、1つだけ難点がありました。

PCからの閲覧だと、表示切り替えしません。

PCから閲覧する場合は、そもそも必要ない機能ではあります。
しかし、切り替え機能は働かないのに、ボタンだけ表示されるのも格好が付きません。
そう思って、スマートフォン用のデバイスサイズだけボタンを表示させる設定にしてみました。

するとここでも問題発生。

スマートフォンでPC用表示にした後、ボタンが消えてしまうのでスマートフォン用表示に戻れなくなりました。

「手を加えてスマートフォンで見た時だけ表示させるようにしました」と追記みたいに書いてらっしゃる方もいましたが、私はその加えるべき手に対する知識がありません。
調べに調べて、いつものように他力本願で辿り着いた道が、こちらです。

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    document.write('<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /><link rel="stylesheet" type="text/css" href="css/smartphone.css">');
}else {
        document.write('<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />');
    }
</script>

style.cssは、PC版とスマートフォン版の共通cssです。

この記述ですが、必ずヘッダーにしましょう。
ヘッダーの行数を増やすことをためらい、既存のjsファイルに書き加えてみたら、見事にページが真っ白になりました。

こうしてみると、少なくともcssは、PC用とスマートフォン用、別々に用意した方が良いのかもしれません。
cssファイル数が増えるか、cssファイルの行数が増えるか、どちらがSEO対策として不利なのでしょう。
その辺りは別途考察してみますが、制作・管理側としては、ファイル数が増えた方がまだ作業しやすそうです。

【ハートブレーン】https://heartbrain.net

最近、目から鱗が落ちる出来事が多い気がするのですが、恐らくNの知識及び情報収集能力が非常に残念なだけだと思います。
それはどうでもいいとして

WordPressで404エラーページを作るときに参考にしたいブログ7選（Naifix様）

今まで、自分なり（自分＝デザイン専門外どころか学生時代の美術の成績ですら振るわなかった元美術部員）に作ってみた404ページ。
それがいかに不親切か、いかにユーザー離れを引き起こすか、反省させられました。

記事に書かれていた条件が

・ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく魅力的な言葉を使用します。
・404 ページを、サイトのその他の部分と同じデザイン（ナビゲーションを含む）にします。
・最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加します。
・無効なリンクを報告する方法をユーザーに提供するのも 1 つの方法です。

一方、ハートブレーンのwebサイトの404ページはこれです。

4番はアウト、1番と3番も微妙。
満たしていると言えるのは2番のみです。
親しみやすさが特徴だと自負する会社にとって、一大事かもしれません。

更に読み進めていくと、「顔出しOKな方はアピールするのも面白い」と書いてあります。
正にハートブレーンのためにあるようなアドバイスです……！
顔出しOKというより、完全に無許可でバンバン出しまくりしかも自分は載せないという事実もあったりするのですが、そこは敢えて目を瞑りましょう。

とりあえず、このような路線で行ってみようと思っています。
何かご意見などございましたら受け付けますので、アドバイスなどいただけるとうれしいです。本人以外。

【ハートブレーン】https://heartbrain.net

line-height に単位はいらない？どっちでも良いんじゃない？

そう思っていた時期もありました。
しかし今日、実際にそれが覆されました。

line-heightの値を1.8emにしたら、上の図みたいになったのですが
emを消して1.8と数字のみにしたら

これまで、単位なし＝emだと思い込んでいたのですが、どうやら違うようです。
詳細は8年くらい前に指摘されていたブログがありました。浦島太郎と名乗ることすら浦島太郎に失礼だと思えてきました。

line-height の値には単位なしが良いとされる理由（lucky bag様）

私の頭でも理解できるように、ものすごく簡潔にまとめると
親要素に line-height をemや%の単位付きで指定した場合、子要素にも同じ値が継承される
ということらしいです。

<div class="box">
親要素に行間の指定をかけた場合、子要素に継承されるらしいけど、line-height（というか全てのCSS）の中にinheritっていう親要素を継承させるように指定する値があったはずなんだけど、その設定はどうなったんだろう。
<p class="top">文字が小さいとこうなります。1.5という控えめな設定にしたから、emが付くと良い具合に空きそうな気もするけど、これで2emとかやっちゃったらきっと大変。pxは使わない方が良いってのはどこのブログも共通らしいけど、1行を縦中央にセンタリングしたい時に普通に使ってる。考え直すべきなのかな。</p>
<p class="bottom">文字が大きいとこうなります。行間詰まってると確かに読みにくい。元々line-heightは1.7くらいが好みだったんだけど、最近1.8好みになった。我ながら人に影響されやすい。</p>
</div>

こんなHTMLタグがあったとします。
下のように、emを付けると

div.box { font-size: 16px; line-height: 1.5em; }
div.box p.top { font-size: 12px; }
div.box p.bottom { font-size: 20px; }

em を付けると、子要素の font-size が 12px でも 20px でも、行間は24pxのままなので
24−12＝12 12÷2＝6 なので、12pxだと上下6pxずつ空きます。
24−20＝4 4÷2＝2 なので、20pxだと上下2pxずつしか空きません。

emを外してみます。

div.box { font-size: 16px; line-height: 1.5; }
div.box p.top { font-size: 12px; }
div.box p.bottom { font-size: 20px; }

数値のみだと、子要素の font-size に応じて 1.5 で計算されます。
12pxだと、12×1.5＝18 18−12＝6 6÷2＝3 なので、12pxだと上下3pxずつ空きます。
20pxだと、24×1.5＝36 36−24＝14 14÷2＝7 なので、20pxだと上下7pxずつ空きます。

文字の大きさに行間が左右されるより、ある一定の行間を保った方が無難、という考え方のようです。

ただ、このような意見もあるのが面白いですね。

line-height に単位ありの指定は駄目？（WWW WATCH様）

ある要素内で一部だけ他より大きな文字サイズを指定されたテキストが存在する場合でも、レイアウト的にそのテキストに引っ張られて行間が開いてしまうのは困るという場合もあります。その場合は意図的に単位付きの値を指定することでそれを回避するといったことも考えられます。

ごもっともです。
強調文字を多用するページの場合、むしろそんな仕様がなければ困ります。

何にしても、無駄でしかない設定はきっと1つもないので、用途に応じて使い分けていきたいものです。

私の場合、用途に応じるだけの知識をまず身に付けるべきですね。

【ハートブレーン】https://heartbrain.net

実は display:table-cell がインライン要素にしか効かないと、貧弱な情報網によりつい先日知りました。
だから div や p などの要素で囲む場合は、一番外側の要素に display:table が必要なのですね。

複数行の文章を、縦中央方向にセンタリングしたい時は

<div class="box">
<ul>
<li>苦難は</li>
<li>幸福への</li>
<li>羅針盤</li>
</ul>
</div>

このようなhtmlの場合

div.box { display: table; }
div.box ul { display: table-cell; vertical-align: middle; }

cssは上記でできるのですが
例によってIEでは効きません。

しかもIE9でも効きません。
cssの「どのブラウザからこのスタイルシートが使える」という指標は、完全ではないようです。

そういう場合、IEハックの出番です。

div.box { display: table; }
    * html div.box { position: relative; }  
    *+html div.box { position: relative; }

div.box ul { display: table-cell; vertical-align: middle; }
    * html div.box ul { position: absolute; top: 50%; }  
    *+html div.box ul { position: absolute; top: 50%; }  

    * html div.box ul li { position: relative; top: -50%; }  
    *+html div.box ul li { position: relative; top: -50%; }  

こちらを参考……というか丸パクリさせていただきました。

tableを使わずdivで縦位置を指定（Scuderia Web様）

ネガティブマージンがIEでは効かないことから、position のマイナス値も一瞬戸惑いましたが、問題はないようです。
ホッとしたのですが、考えてみれば、問題あるはずがないかもしれませんね。 マイナス効かなかったら position の意味があんまりないかも。

【ハートブレーン】https://heartbrain.net

ブログに新しいカテゴリ「お勉強」を追加しました。

同僚が入社して以来、教わることが毎日山ほど出てくるのに対し
私から教えられるのは過去のデータの在処と社長の好きな女性のタイプくらいだという事実を憂慮し
せめて勉強しているパフォーマンスに励もうとした末の決断です。

今日のお勉強内容。

ヘッダーに親メニューを横並びに配置し、更に各メニューにマウスカーソルを当てると下に子メニューが出現。
プルダウンメニューを表示させる方法は山ほどありますが、今回の問題はそこじゃありません。
上の例だと、親メニューが何なのか、パッと見てもわからないのです。

ul.menu li a {
	display: block;
	color: #fff;
	text-align: center;
	background-color: #1cbfbf;
}

ul.menu li a:hover {
	background-color: #077e7e;
}

理由は、a:hoverで背景色が変わるように指定しているから。
該当する親メニューにマウスカーソルが当たっていても、消えてしまうのです。

このCSSを、下記のものに修正。

ul.menu li a {
	color: #fff;
	text-align: center;
	background-color: #1cbfbf;
}

ul#main-menu > li:hover a {
	background-color: #077e7e;
}

ul#main-menu li:hover > ul {
	display: block;
}

a:hover → li:hover a
そして li:hover に display:block を設定。

恐らくほとんどのコーダーさんが当たり前のように実行してらっしゃることかと思います。
今まで思いも寄らなかったのが恥ずかしいのですが、人生とは日々勉強するもので、その順番は人それぞれなのだと自分に言い訳をしておきます。

【ハートブレーン】https://heartbrain.net

CSS には vw, vh, vmin, vmax という単位がある（Developers1.0より）

何ぃ！！！？？？

って、そもそも viewport ってなぁに？
という、最早コーダーなのかどうかも疑わしいレベルのNです。
早速 viewport を viewpoint って間違えてるし。

viewport というのは、スマホやタブレットでサイトを表示する領域だそうです。

vw、vh、vmin、vmaxのvとは、viewportのvだそうです。
viewport width：ビューポートの幅に対する割合
viewport height：ビューポートの高さに対する割合
viewport minimum：ビューポートの幅と高さのうち、値が小さい方に対する割合
viewport max：ビューポートの幅と高さのうち、値が大きい方に対する割合

早い話、これまでのcssで使われていた % です。
決定的な違いは、%が親要素に紐付けられるのに対し、vwなどはビューポートの幅が基準という点。
親要素のboxによって変えたい場合は%、画面全体を基準としたい場合はvwなどですね。

画面全体＝100vwだそうです。

#box {
width: 5vw;
background-color: #00b1bb;
}

#box {
width: 20vw;
background-color: #ea9395;
}

ただ、Androidがv4.4からしか対応していないらしいです。
なので、まだまだ使う機会も需要も少なそうです。

by Android4.0.3ユーザー

【ハートブレーン】https://heartbrain.net

こんな画像を

こんな風に動かしたい。
しかもcssのみで。

というのも、動作を必要とするwebサイトのサーバーがjimdoだったので
できるだけjQueryを避けたかったのです。面倒だから。

無理かな？と思ったのですが、無事解決しました。同僚が。

htmlの中身

<div class="box"><a href="example.html">テスト</a></div>

cssの中身

#box a {
    display: block;
    width: 400px;
    height: 20px;
    padding: 300px 0 0;
    box-sizing: content-box;
    background: url(bg-test.png) no-repeat left top;
    }

#box a:hover {
    -webkit-animation: spin .3s linear infinite;
    -moz-animation: spin .3s linear infinite;
    -ms-animation: spin .3s linear infinite;
    -o-animation: spin .3s linear infinite;
    animation: spin .3s linear infinite;
    }

@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: rotate(10deg);}
    50% {-webkit-transform: rotate(0deg);}
    75% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(0deg);}
    }

@-moz-keyframes spin {
    0% {-moz-transform: rotate(0deg);}
    25% {-moz-transform: rotate(10deg);}
    50% {-moz-transform: rotate(0deg);}
    75% {-moz-transform: rotate(-10deg);}
    100% {-moz-transform: rotate(0deg);}
    }

@-ms-keyframes spin {
    0% {-ms-transform: rotate(0deg);}
    25% {-ms-transform: rotate(10deg);}
    50% {-ms-transform: rotate(0deg);}
    75% {-ms-transform: rotate(-10deg);}
    100% {-ms-transform: rotate(0deg);}
    }

@-o-keyframes spin {
    0% {-o-transform: rotate(0deg);}
    25% {-o-transform: rotate(10deg);}
    50% {-o-transform: rotate(0deg);}
    75% {-o-transform: rotate(-10deg);}
    100% {-o-transform: rotate(0deg);}
    }

@keyframes spin {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(10deg);}
    50% {transform: rotate(0deg);}
    75% {transform: rotate(-10deg);}
    100% {transform: rotate(0deg);}
    }

これで動きます。普通に作れば。

サンプルページ

しかし、jimdoでは横にぶれてはくれず、回転します。
何故かといえば、spinの部分。
てっきりコードの一部かと思ったら、適当に名前をつけて良いそうです。
なので、spinを全て適当な単語に置き換えたら、無事動きました。

角度は transform: rotate の部分で調整します。
速度は .3s の部分。速くしたい時は数値を高くしてください。

1から10まで方法を探し出した本人の目の前で、他人のふんどしで勝負をしてみました。

【ハートブレーン】https://heartbrain.net

SEO対策の中で、title タグが重要視されているのは周知の通りだと思います。
そのタイトルタグですが、どうやって付けていますか？

キーワードと〜社名を入れて〜綺麗に20文字以内に収まればいいな、などと
甘いことを考えていたNのような人。

タイトルタグにも、ある程度規則というものはあるのです。

例えば、こんなオープンネットカフェがあったとします。

ここのwebサイトで、タイトルタグを設定する場合。

<title>HEART CAFE</title>

店名・社名は基本です。
「webサイトあります。【店名】で検索してください！」と謳われているチラシなどをよく見かけませんか？
それで検索したのに、タイトルタグにキーワードばかり詰め込んで、肝心の店名・社名がなかったら、興味のあるユーザーはそこに辿り着けません。
当然Googleからの評価も下がります。

しかし、店名だけではもちろん弱いです。
店（または会社）の特徴を表したキーワードを一緒に入れておくと、ユーザーからの認知度も上がります。
そして実は、タイトルの前方にキーワードを挿入すると、より効果が上がるようです。

<title>大自然の下でネットを楽しむオープンネットカフェ-HEART CAFE</title>

これで伝わりやすくなりました。

……しかし、重大な問題が残っています。
実は、Googleの検索結果に出てくる一覧ですが

ご覧の通り、表示されるタイトルタグの文字数には制限があります。
割とコロコロ変わる印象なのですが、とりあえず20〜24文字が無難だと思います。
この例だと、28.5文字あります。

<title>大自然でオープンネットカフェ-HEART CAFE</title>

削りました。
これで19.5文字です。

ヘッダー部分なので、全ページ共通の場合も多いかとは思うのですが
もし設定できるなら、タイトルタグ（description も keyword もですが）はページ毎に変えてください。
評価はもちろんなのですが、そのコンテンツの中身を正確に伝えるタイトルでないと、ユーザーが迷子になったりしますから。

キーワードを不自然に強調したり、過剰に宣伝するのもアウトです。

<title>最速ネット環境！居心地はまるで天国！-HEART CAFE</title>

大げさすぎるわ抽象的だわで、嘘臭さ倍増です。
SEO対策以前に、たとえ検索結果が上位でも、ユーザーから見向きもされないことでしょう。
「ネットカフェ、快適なネットカフェ」みたいにキーワードを繰り返すのもダメです。

基本はJAROのCMですね。
嘘、大げさ、紛らわしい。
これらに当てはまる宣伝文句はネットでも嫌われる、ということです。

【まとめ】
・店名は必須
・キーワードも必須、できれば前方に挿入する
・文字数は20〜24文字が無難
・ページ毎に変え、そのページに沿ったタイトルタグの内容にする
・キーワードを繰り返さない
・過剰な宣伝文句はアウト

HEART CAFEの正式オープンを楽しみにしております。
というかそれより先に冷蔵庫！修理しましょう！

【ハートブレーン】https://heartbrain.net

hタグの定義がここ数年でも割と流動的なのもあるかもしれませんが、最近までずっと勘違いしていたことがあります。

h1タグって、社名が必須というわけでもないのですね……。

絶対入れなきゃいけないって思ってたので、設定場所にいつも頭を悩まされてました。
と言うのも、h1は現在の基準では1ページに1個限定。
しかもどのhタグよりも上に書かなきゃダメなのです。
もちろん、ページ上部に社名とキーワードをふんだんに入れて、隠しテキストにしたら一発でアウト。
デザインによってはかなり厳しい条件です。

じゃあ正確な基準って何よ？というと、こちらに詳しく紹介されていました。

SEO対策に有効な＜h1＞タグとページ内の本文量（文字数ボリューム）は？（BELKA様）

字数制限は30文字前後、画像のaltタグではなくテキストで。
そしてここからが重要なのですが、他のページと重複しない、そのページに沿った内容。 恐らく一番適した場所は、ページタイトルなのでしょう。

ちなみに、h2以降は1ページに何回使用しても良いらしいですが
大体の使用回数目安もあるようです。

h2：3〜4回
h3：5〜6回
h4以降は特になし。（ただしSEO対策としてそこまで強くない）

HTML5は、h1タグも複数回使えるようになるらしいです。
ところでHTML5の正式発表はいつですか？

しかしh1要素が複数回使えるようになったら、ますますイタチごっこが加速しそうな予感もします……。
主にスパム系サイトなどで多用されそうです。
それとも、h1要素に代わる絶対的な何かが新しく追加されるのでしょうか？

【ハートブレーン】https://heartbrain.net

HTML_Editor_Syntax / iStylr

時代と共に廃れてきた……とよく聞きますが
実はそうでもないんじゃないかと思えるくらい、今でもよく見かけるFlash。
そのFlash動画を、ヘッダーメニューの下に配置するサイトも多いのではないでしょうか。

しかし、ヘッダーメニューにプルダウンメニューを設定した場合
IEではこうなります。

ものすごーーーく焦ったのですが
実は、embed タグに wmode=”transparent” を挿入すればOKです。
しかし、ブラウザによって見え方が違ってくる場合もあるらしいので、ご注意ください。

ところで、今、アサイーというフルーツが巷で流行っているそうですね。
美肌効果とかダイエット効果とかで。
ビール酵母・おから・リンゴ……人類はどれだけ過ちを犯せば気が済むのでしょうか。
嘆かわしい限りです。

最近ハマってるんですが、アサイーっておいしいですよね！
今まではドリンク一辺倒だったんですが、今回はグミに手を出してみました！
ほとんどの栄養素を備えている奇跡のフルーツですよ！？
さすがですね！

いや、ほら、踊らされる特性は日本人固有のものですから。

しかしアサイーは、本当に効果抜群のようです。
何も考えずにひたすらグミを貪り食べた結果

昨日の深夜から、腹痛と便意に襲われっ放しです。

宣伝文句でもなく、普通に注意書きにこのような内容が書かれているのが、信用できるポイントなのかもしれませんね。

【ハートブレーン】https://heartbrain.net

例えば、ヘッダーメニューで 、メニューが今後増えるかもしれない時は 二段よりも横に広げたい場合が多いのではないでしょうか。

こんな感じで、横幅を可変にできたら見栄えが良いですよね。

そういう場合ですが、親要素を更に外側に入れると
設定できるようになるようです。

<div class="box">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</div>

div.box { text-align: center; }
div.box ul { display: inline-block; }

これで親要素の影響を受けて、中央に配置されるようです。

マージンとかパディングの左右を auto にしても意味がないのだと
1つ賢くなったNでした。

【ハートブレーン】https://heartbrain.net/

Googleマップでストリートビューを見ようとして
いつもの人がいないのに気がつきました。

見覚えのある顔をしばらく探した結果

お召しかえをなさってました。

これ、各国ごとにユニフォーム違うんだろうなぁ。
お疲れ様です。

画像と1行のテキストを並べる際に、テキストを画像の縦中央にセンタリングする方法。
今までは、親要素に

div.box {
height: 画像の高さ;
display:inline;
vertical-align:middle;
}

だと思っていたのですが、結果

なんか強そうな草刈り機

こうなりました。

実はこれ、画像（imgタグ）に vertical-align:middle を設定するそうです。

なんか強そうな草刈り機

簡単なようなのですが、盲点でした。

【ハートブレーン】https://heartbrain.net

CSSには、たくさんのルールが隠れています。
hタグの中にブロック要素入れちゃいけないとか、bodyの中にタグで囲まない文字を直接入れちゃいけないとか。
日頃から真面目にHTML言語と向き合ってる私以外のコーダーさんたちにとっては恐らく基本中の基本だとは思いますが、少なくともパソコンスクールでは教わりません。（言い訳）

そんないいかげんすぎるNが新たに学んだ法則の覚え書きです。

・display:table-cell と float は共存できない

例えばこのようなタグを使う場合。

複数行の文字列を縦方向にセンタリングする時の
display:table-cell と vertical-align:middle はかなりメジャーな方法です。
実は私、以前は table-cell に抵抗があったのですが、最近は開き直って多用しています。
ですが、この内容だと……

何がダメなのか、と考えてみて
便利だけど独特の法則が多い float を削ってみました。

ただしこの方法、2カラムだと無理なんですよね。
囲みタグを増やすしか解決法が思い付かないのですが……。

・_zoom をかけた外枠に width 指定すると無効になる

このように、複数のカラムでクラス名指定とかしたくない場合。

overflow: hidden と _zoom: 1 は、IE6対策時の「とりあえずこれ入れとけ」という位置付けです。
そして、float 指定したカラムの左右どちらかに margin 指定してカラム間を空けて
親要素にも同じ方向の同じ数値でネガティブマージンを指定します。
しかし、そのままだと……。

なんでだろう？と思いながら
とりあえず親要素の width の数値を削除しました。

しかし、親要素に width 指定したまま全く同じタグを使っても問題なかった例をいくつか見かけたのですが
何が違うんだろう。

HTML5正式発表が控えているので、またルールとかガラッと変わりそうですが
それまでには、この浦島太郎並の情報収集能力を改善しておきたいです。

【ハートブレーン】https://heartbrain.net

度々苦しめられてきた割に、度々忘れる事実なのですが……

親要素と子要素の間では、上下マージンの重ね合わせが行われる。

例えば、こういう構成でページを作る場合
ついこんなコーディングをしてしまうのですが

<p>ここに前書きがあって</p>
<ul>
<li>ピンク背景＋写真で構成された画像ファイルをボックス内のback-groundで指定するとします。</li>
</ul>

ul {
	background: url(画像.jpg) no-repeat;
	width: 横幅;
	height: 縦幅;
	margin-top: 10px;
}
ul li {
	margin-top: 170px;
}

実際に仕上がるイメージは、こうです。

上に空白が欲しいのはテキストだけなのに
何故かボックス全体の上に空白ができてしまいます。

この場合、ulの上に10px、liの上に170px指定しているので
重ね合わせ処理が行われ、上マージンはより多い数値である170pxになるのです。
回避方法としては

・親要素に float を指定する
・親要素に position:avblolute を指定する
・親要素に border もしくは padding を設定する

私の場合は、ul li から div に変更し
padding-top を設定していたのですが
float とか padding の方が早そうですね。

＜参考サイト様＞
【CSS】親要素と子要素の上下マージン

【ハートブレーン】https://heartbrain.net

こんな案件を出してこられました。

この、左と右で背景色が違い、しかもグラデーションがかかっているパターン。
ありがちな例ですが、出てこられると戸惑います。
linear-gradient などを使って普通にグラデーションかけた日には

こうなります。

背景色はブロック要素に対して設定されているので、要素が終わればなくなるのは当然ですね。
ですが、2カラムのページでこれはかっこ悪いです。
しかし解決策といえば……

左サイドと右サイドを囲む親要素にグラデーション背景

コンテンツ側の内容が少なければ、絶対こうなります。

親要素に縦幅に余裕のありそうな背景画像を設定（960×5000px とか）

サーバー容量の敵です。

親要素に縦幅に少しだけ余裕を持たせて、background-repeatで縦方向に繰り返させる

ページによってはサイドバーが見苦しいことになります。

現在の私の知識では打つ手がないので
苦し紛れにこんなことをしてみました。

footerにグラデーション部分だけの背景を設定しました。
フッターを横いっぱいに広げたい場合は使えない手ではありますが。
少々不自然に縦長のフッターなので、デザインでごまかすしかありません。

スマートな解決法をご存知の方、是非ともご指南お願いします。

【ハートブレーン】https://heartbrain.net

XPのサポート終了で、堂々と「IE8は対象外です！（キリッ）」と放棄でき、CSS設定も楽に……
そう思ったら大間違いです。
さすが天下のマイクロソフト、層が厚いです。伏兵がいました。
IE9という伏兵が……。

CSSに比較的寛容なのですが、色々と癖があるIE9。
今回は、メールフォームの設定をするという仮定で
私が愕然とさせられたCSS設定をご紹介します。

たとえばこんなメールフォームを作るとします。
項目名は「お名前」「ご住所」「お電話番号」「質問内容」「詳細内容」
それらをこちらで変換しました。

タグは下記の通りです。

.box { text-align:left; }
h1, p, dl { width:940px; margin: 10px auto; }

結果

box に width と margin を設定して、h1 と p と dl要素に text-align:left で解決しました。

.box { width:920px; padding:10px; }

結果

外枠から左右の空白を引いて width の値にした結果です。
box-sizing で解決しました。
box-sizing: content-box で padding（もしくはborder）を引いた値
box-sizing: border-box で padding（もしくはborder）を含めた値

dt { width:300px; float:left; }
dd { width:620px; float:right; }

結果

こちらのサイト様を参考にしました。

dl、dt、dd と CSS で表組み（テーブル）を作る（EIJI様）

dt に clear:left を追加
dd の width と float を削除し、代わりに margin-left で dt の width値を追加
盲点でした。

HTML5の発表が近づいているらしいので、それに合わせてIEと他ブラウザの溝も埋まる……といいな。

【ハートブレーン】https://heartbrain.net

本当はcss3全部並べて、今後の対策に使おうとしていました。
ですが

CSS3 リファレンス（HTMLクイックリファレンス様）

ムリ。

という訳で、普段使う機会が多いプロパティで
ほとんどが画像で済ませていたものとIEには泣いてもらったものを
挙げていきます。

・border-radius
内容：四角形を角丸にする
対策：CSS3 PIE

・border-image
内容：ボーダーに画像を使う
文字だけでは説明つかない部分もあると思いますので、こういうことです。

対策：CSS3 PIE

・opacity
内容：画像を透過する
対策：cssでfilterを指定する。
filter: alpha(opacity=○○); /* IE6・7 */
-ms-filter: “alpha(opacity=○○)”;/* IE8 */

・linear-gradient
内容：線形グラデーション
対策：CSS3 PIE

・columns
内容：一つの段落をカラム分けする
対策：cssで設定できるようです
-ms-columns: ○○px auto;

・writing-mode
内容：文章を縦書きにする
対策：IEが先行していたプロパティだそうです

・test-shadow
内容：テキストに影をつける
対策：以前の記事で紹介しています

・box-shadow
内容：ボックスに影をつける
対策：CSS3 PIE

【ハートブレーン】https://heartbrain.net

申し遅れましたが、2014年4月8日をもちまして
ハートブレーンwebサイトのURLが、heartbrain.net になりました。
ブックマークして下さっている方は（いるのか……？）変更をお願いします。

今や、DTP上がりの私たちが早々に諦め、イラストレーターで画像を作ってきた
ドロップシャドウ、ボックスシャドウ、袋文字などなど
ほとんどCSS3で表現可能な時代になっています。

しかし、一部のブラウザではまだまだ未対応で
その一部のブラウザは、地方では特にシェア率が圧倒的だったりするので
CSS3〜？ぇ〜、というように、使おうとする努力すらほとんどしないおバカコーダーが現存するのも事実です。少なくともここに1人。

そんな困ったNですが、この度、必要に迫られて袋文字をCSSで見せる努力をする事態になりました。
普通に考えてtext-shadowなのですが、なんとIE9まで未対応だそうです。
IE8なら「XP？今すぐ買い替えて下さい」と知った風な顔で逃げることもできるのですが
IE9はvista標準装備。そんな言い訳は通用しません。

とりあえず、

CSSのみで袋文字を実現する – CSS3で遊んでみる3（CSS-EBLOG様）

IE9でもtext-shadow、再公開（asamuzaK.jp様）2014.7.9 お名前を正しい表記に訂正しました。大変失礼いたしました、ご指摘ありがとうございます。

こちらを参考にし、text-shadow.jsを読み込んで書いたみたコードがこちらです。

顧客が説明した要件

実装された運用

どうしてこうなった。

なんかせっかく設定したfont-sizeが何故か統一され、しかも下にずれてます。
ちなみにGoogle ChromeでもFirefoxでもSafariでも普通に表示されます。
これ、macのみで作業してたら、気づくの遅れてたかもしれません。危険です。

どうでもいい話ですが、テキストの言葉は
年始に社長が「日めくりするぞ！」と持ち込み、社員全員が予想した通り数ヶ月後には放置される運命になった
今日の一言カレンダーからです。

どうしたらいいのかわからず、上段の袋文字を諦めてみようとして書いたコード

諦めてみた結果

なんでよぉぉぉぉぉ！！！！！

ハンドサインジェネレーター、面白いですね。
ハマったんですが、生憎公開できるほどのネタを生成する能力がNにはありません。
今度のミーティングでネタを募集してみようと思います。
無視さえされなければ。

もしかして、h3とpの二股をかけようとしたのが、IE様の逆鱗に触れたんだろうか、と予想し
少しだけ汚くなるのですが、コードを書き直しました。

なるほどね……。

hタグとpタグとIEの因果関係は、以前にも思うところがあったので
時間を見つけて調べてみます。

【ハートブレーン】https://heartbrain.net

何だか偉そうなタイトルですが、まずN自身が名付けは大の苦手です。
ブログタイトルとか結局放置のままですし。
記事のタイトル一つにしたって、センスという文字にはとことん無縁に生きてきたことだけが伝わってくる素晴らしさです。

そんな私ですから、もちろんCSSのクラス名はメチャクチャでした。
ですが、偶然というかMilamDesign様のおかげというか、見直す機会に恵まれたので
ここは一つ、備忘録として記録しておきます。

ブログ始まって以来の「お前が言うな」記事です。

Google検索で3ページ以内にヒットするような大手サイトorブログ様が主に使用しているらしいクラス名をまとめてみました。
これ、よく見たら、wordpressの既存テーマなどでもよく見られる名前だったりします。

主にこちらを参考にさせていただきました。→ID Class の名前の例（Vosegus Sakura様）
他力本願全開です。ありがとうございます。

尚、クラス名や画像名などで、2つ以上の属性を持つものを
main image
などと名付けたい場合。

mainimage と単純に繋げたり
main_image とアンダーバー（下ハイフン）で繋げると
検索エンジンが、一つの単語として読み取ってしまうそうです。

不都合がある場合などは
main-image とハイフンで繋ぐか
mainImage と2つ目の単語の1文字目だけ大文字にする（キャメルケース）かで対応すると良いようです。

【ハートブレーン】https://heartbrain.net/

webサイト閲覧に適したフォントは「ゴシック体」だと言われています。
言われてみれば……まあ、確かに。
変にメリハリがないので、モニタを通した見ることを考えると、目への負担は少ないかもしれません。

しかし、やはりタイトルなどの部分にはインパクトを与えたいもの。
なので

font-family:"ＭＳ Ｐ明朝","ＭＳ 明朝",serif;

とcssに記述して安心していたのですが
つい最近、このようなご指摘を受けました。

「指定フォントが入ってないPCで見ると、ゴシックになるのですが」

本当にこんな感じの衝撃が……。

windowsには標準でＭＳフォントが入っているものだと思ってました。
serifで全てのPCをカバーできるものだと思ってました。

自分の認識不足を痛感し、心を入れ替えて指定し直しました。

font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;

確認をお願いしたところ、大丈夫だったようです。

確かに必須ですよね、ヒラギノ系とかHG系とか。そしてヒラギノ系は後ろにHiraginoとローマ字で書くのも大切です。
macめんどくさい。

ちなみに、ＭＳ系フォントの指定方法ですが
ＭＳは全角で書かなきゃいけないそうです。
途中から全角変換が面倒になって半角で記述していました。ごめんなさい。

【ハートブレーン】https://heartbrain.net/

コーディングをしていると、時々このようなデザインが来ます。

この、背景デザインとしては素晴らしいけど
（画像例からは素晴らしさが1ミリも伝わりませんが）
コーダー泣かせの、この切り所がみつからない、背景画像。

コーダーやってて●年
ようやく落とし所を見つけました。

0から目指すWebマスター様より
http://www.allinthemind.biz/markup/css/background-size.html

background: url(画像ファイルURL) no-repeat center top;
-moz-background-size: 100% auto;
background-size: 100% auto;

このコードは、背景画像の縦横比を維持し、高さの設定はしない場合です。
なお、下にリピートさせたい場合は
no-repeat を repeat-y に変更して下さい。

また、指定要素のサイズに合わせて背景画像が常にフィットしている場合は

-moz-background-size:cover;
background-size:cover;

背景画像を全部表示させたい場合は

-moz-background-size:contain;
background-size:contain;

縦横比を維持せずにサイズを統一させたい場合は

-moz-background-size:100% 100%;
background-size:100% 100%;

背景画像の縦横比を維持し、幅の設定はしない場合は

-moz-background-size:auto 100%;
background-size:auto 100%;

多分このCSS設定は、IE8以前のブラウザには効かないと思います。
そこはもう……泣くしかない。

しかしPCは決して安い買い物ではないので
XP搭載のまま乗り切りたい気持ちもまた充分理解できるのです。主婦として。

他に何か解決法があったら、またご紹介します。

【ハートブレーン】https://heartbrain.net/

ふと思い立ったのをいいことに、特殊文字をweb上で使いたい場合のコードを書き記しておきます。
どう見てもN個人の備忘録です。

①

⑨

©

©

®

®

½

½

¼

¼

¾

¾

¹

¹

²

²

³

³

㎡

㎢

㎠

⇑

⇑

⇒

⇒

⇓

⇓

⇐

⇐

⇔

⇔

↔

↔

♠

♠

♣

♣

♥

♥

♦

♦

最近使用する機会が増えた気がしたので。
「ブラウザによっては表示されない場合もある」と書かれているので、一体どちら様ので？と思い調べてみたら
なんかネスケさんのお名前しか聞こえてきません。

いや、油断大敵です。
marginを何故か2倍取りたがるIE6さんとか
レイアウトを重ねたがるIE7さんとか
文字サイズを勝手に変えたがるIE8さんとか
地雷はそこかしこにある気がするし。
何よりNが何かをする時には、落とし穴が複数待ち構えている前例しかないので
使う時はチェックにチェックを重ねます。

情けない話、気づいたのがここ最近なのですが

タグの書き方って、結構細かいんですよね。
大きく分けると「ブロックレベル要素」と「インライン要素」というものがあって
ブロックレベル要素の中にインライン要素は入れられるけど、インライン要素の中にはブロックレベル要素は入れてはいけない……
そんな基本さえ無視して作ってたら、何故か閲覧するブラウザによっては

こんな痛いことになっちゃったりして。

そもそもブロックレベル要素とインライン要素の区別って？？？

ブロックレベル要素・・・・・・＜代表例＞p、div、h1〜6、ul、ol、li、dl、dt、dd、table、hr など

ただし、pは段落なので、ブロックレベル要素を中に入れるのは×です。dtやh1〜6も同様。
ddタグや、意外にliタグには子要素OKらしいです。

インライン要素・・・・・・＜代表例＞span、storong、a、lavel、iframe、img、br など

iframeやobjectは、子要素がブロックレベル要素でもOK。

「よくわからん」と適当にタグを使ったりしていると
お客様からの信用も、Googleからの信用も失う恐れがある、ということですね。

自信のない場合は

Another HTML-lint gateway

ここで一度チェックすると安全だと思います。

ちなみに、brタグも1ブロックの間に2つ以上連続で使っちゃいけない、なんて縛りまで存在します。
長文を区切りの良いところで改行したければ、css駆使してリストタグを使いなさい、ってことらしいですね。

めんどくさい！と誰彼構わず八つ当たりしたいところですが
そういえばSPAMサイトとかって空白演出にbrタグを使いまくっていた気がするので
怒りをぶつける先はそっちが妥当かもしれません。

怖いから絶対しませんが。

【ハートブレーン】https://heartbrain.net/

cssでの文字サイズ指定、迷ったことはありませんか？
私はあります。ほんの今。

……と、対策するのが遅すぎのNは置いといて。

実はこんな問題にまたしても直面したのですが。

文字サイズの単位は
px、pt、em、％など様々です。
私は自分が計算しやすいpxを使っていたのですが

これ……web初期の手法なんですね。

pxだと、ブラウザ機能で文字サイズを変更しようとしても、無視してしまうブラウザ（青いeの文字のあれ）があるようです。
ではemは…と思うと、今度はddだのliだのという入れ子タグのフォントサイズを指定しても、勝手に複利計算されてしまうそうです。
％も同様の上、Nのような数字苦手な人には指定の仕方で混乱しそうな予感しかしません。

そんな中、rem というものを発見。
CSS3なのですが、入れ子タグもフォントサイズを指定できるみたいです。
デメリットは……やはりCSS3なので、対応してくれないブラウザ（青いeの文字のあれ）が存在するということ……。

正解がどこにもないよ！

しかし、限りなく正解に近い逃げ道がありました。

html {font-size: 62.5%;}
.x-small {
	font-size: 0.9rem; /*9px*/
	font-size: 0.9em;
}
.small {
	font-size: 1.2rem; /*12px*/
	font-size: 1.2em;
}
.medium {
	font-size: 1.4rem; /*14px*/
	font-size: 1.4em;
}
.large{
	font-size: 1.6rem; /*16px*/
	font-size: 1.6em;
}
.x-large {
	font-size: 2.2rem; /*22px*/
	font-size: 2.2em;
}

IE8以前の入れ子タグ問題は解決していないものの
より多くのブラウザで表現できるという点では、ひとまず安心。
IE6〜8対策としては、入れ子タグ1つ1つに font-size:1em を指定する、ということで。

【ハートブレーン】https://heartbrain.net/

普段、会社で（実は自宅でも）使っているメインブラウザは、現在Google Chromeです。
Firefoxとの間で何度も浮気を繰り返してはいたのですが……軽さには勝てない！
恐らく機能重視ならFirefoxなんだろうな〜とは思うんですけどね。
ブログを 観察 チェックするのが好きな私は、igoogleを愛用しているので（なんでやめちゃうんだ！）、便宜的な意味でもGoogle Chrome。

それはいいとして。
タイトル部分に背景画像を設定し、タイトル文字を縦中央位置に表示させたい場合

こんな感じの。
悲しいことに、スタイルシート（CSS）には縦方向のセンタリングはできないので、多少小細工が必要となります。
私はいつも

height:（画像の高さ）px;
line-height:（画像の高さ）px;

文字が1行の時のみ使える手です。

これで解決していたのです。
いや、解決した気になっていたのです。

ですがそんなある日（っていうか今日）、Firefox（とSafari）愛用の社長に「タイトル部分おかしいよ」と言われ
確認してみたところ

なぁ〜にぃ〜！？

上のCSSは、Firefox、Safari、Operaにはあんまり効かないらしいですね。
この場合

display: table-cell;
vertical-align: middle;

これで解決しました。
いや、こっちを試したこともあるのですが、その時はうまくいかなかったので、「ガセかよ…」と思って通り抜けてしまったのですよ。
ごめんねtable-cell。

ちなみに、どこかで言われていた
display:table-cell を使うには、親要素で display:table を指定しなければいけない
という問題は、今のところ浮上していません。多分なくても使えます。

【ハートブレーン】https://heartbrain.net/

現在制作（というかお手伝い）中の企業サイト様。
メールフォームを設置しようとしたのですが、何やら特殊なプログラムらしく、最初は普通のcssでうまくいかず…。

仕方がないので、今でも便利性でいえばダントツかもしれない table タグ様のお力を借りようとして

結果がこれです。

不自然に上寄り。

一つ断っておきますが、もちろん vertical-align は指定しました。
というか、このタグを使いたくて table にした部分が大きかったのです。
そして更にもちろん、vertical-align:center とかやってませんよ。middle です。

この場合、input タグ自体にcss指定がいるのだと知ったのは数分後。
新たなる無知の世界をまたしても披露するNでしたが
とりあえず修正、修正……

input {display: inline; vertical-align: middle;}

ウソだと言ってよ input……。

文字だけ真ん中に来てどうするというのか。
そもそも input ってば td タグ内にあるというのに、どうして vertical-align を無視しようとするのか。
解決法がきっと何かあるはず……そう思って調べてみたものの、そんな特殊であろう例は見当たらず。

table タグを消して float での分割に戻して

{height: 40px; line-height: 40px;}

揃った……。

あまり難しいこと考えても無駄だった、良い例です。
そう思うことにします。
今日の朝礼でも言ってたんです、昔の人の教えを大切にしなさい、と。
そう……

急がば回れ

【ハートブレーン】https://heartbrain.net/

実は、つい最近まで適切な使い方を知らなかったhタグ。
h1〜h6 の見出しタグです。
これ、一歩間違うと Google八分 というある意味村八分よりえげつない仕打ちに遭うらしいので、気を付けなきゃまずいんですけどね……。

しかし、調べてみたりしても、わかりにくいことわかりにくいこと。
仕方ないので、個人的にかなり私情を絡めて、わかりやすく図解にしてみました。

何と使用回数制限まであるらしい、このhタグ。

• h1　　1ページにつき1回（HTML5では複数回使用できるが、SEOにおける重要性も低くなる）
• h2　　1ページにつき2~3回……という説が一般的だが、一方で何回使ってもOKという話もある。
• h3　　1ページにつき4〜5回……という説が一般的だが（以下上記同様につき略）
• h4　　特に制限なし。
• h5・h6　　特に制限なし。そもそも使用頻度は少ないかと思われる。

諸説ありすぎて、情報が錯綜しているなぁ。
という訳で、もう自分の都合の良いように解釈することにしました。
右往左往していても出来上がらないですし。

ただ、情報収集は余念なくやりたいものです。

【ハートブレーン】https://heartbrain.net/

こちらの記事を読んで、ちょっとだけ戦慄が走りました。

IEでリンクをクリックした時に出る点線を消すjQuery／株式会社LIG様

何が怖いって
リンクをクリックした時に出る点線にも注文が出る可能性。
のどかな田園地帯にある事務所ですが、IT事情ものどかなのかもしれません。
いや〜、本当に今ある現実に感謝しなければ。

などと言っている場合ではもちろんなく。

少ない知識をフル回転させながら記事を読み進めてみようと覚悟しながらマウスをスクロールしようとする指が止まりそうになるのを叱咤して視線を集中させたいのに気が逸れてしまう自分の意志の弱さと戦いつつ見てみると、あら簡単。

$(document).ready(function(){$("a").bind("focus",function(){if(this.blur)this.blur();});});

このjavascriptを保存して、head内に読み込ませるだけ。
……と、こちらで無責任に言うのは簡単だけど、これを作った人の血と労苦と汗と涙はきっと相当流れているのですよね。
お客様のご要望に少しでもたくさん応える努力も、こういったスクリプトを組む知識を得る努力も、もっともっと必要なのだと反省した次第です。

（元々は jquery.linkscubber.js が配布されていたそうですが、現在は終了しています）

かと思ったら
「マウスを使わずにTabキーで閲覧するユーザーのためにはよろしくない」との声も。
言われてみれば……ノートPC使ってる場合とか、そのパターンは多いかも。

物事にはいろいろな側面があるのですね。
以前知人が言っていた「世の中には知らないことにしておいた方が良い知識はあるけど、知らない方が良い知識は存在しない」を胸に、一つの側面だけを見るのではなく、様々な条件や事象に合わせて、知識を活用していきたいと思ったのでした。

知識少ないけど。

【ハートブレーン】https://heartbrain.net/

地味に悩まされてきた現象。

最新IEとかFirefoxとかGoogle Chromeとか

IE8

これ、本当にIE8のみなんです。
かのコーダー泣かせなIE6ですら、こうはなりません。

何故だ……と思ったら、どうやらフォントサイズの認識に問題があるようです。
CSSで、font-size:10px とか 11px とか微妙な数字を指定しても、全部 12px とかキリのいい数字に変換されるらしいんですよ。
確かにフォントサイズを直したら全部1行になりました。
ルール的には優秀なのかもしれませんが、これは……。

っていうか、これまで直した所全部、微妙なサイズ使ってたことになる私って……。

世間ではIE9だか10だかですが、8の占めるシェア率はまだまだ高い現在。
なめてかかると痛い目見る、わかりやすい例でした。

そんな間抜けなコーダーNが手がけているホームページはこちら。

【ハートブレーン／WEB制作】https://heartbrain.net/webdesign