2017-01-01から1年間の記事一覧

全ブラウザ/レスポンシブデザイン対応、HTMLの入れ子を増やさずにCSSで背景画像を半透明にする方法

CSS

用途 divとかのボックスに半透明の背景画像を付けたい。 ただし中の要素まで半透明にされると困る。 レスポンシブ対応で、ボックスの縦横比が変わっても背景画像はボックス全体をカバーするように。 課題 背景画像を設定し、普通にopacityをかけると中の要素…

カスタムフィールドに入力した電話番号を表示と発信リンクに使う

やりたいこと カスタムフィールドで電話番号を入力してもらうのだが、ハイフンなしとかありとか、入力する人が面倒にならないようにしたい。 その電話番号はそのページで出力するのだが、スマホなど、タップしたら発信するように<a href="tel:〜〜">も付けたい。発信する方はハ</a>…

WordPress4.7.2への更新完了メールが届いていたにもかかわらず、実際は更新されていなかったので管理者はちゃんと管理画面で確認を。

今回のWordPress4.7.2のアップデートがかなり緊急かつ重要であることが明らかになっています。 現在私が管理しているサイトについて、「WordPress 4.7.2 へ自動更新しました。」と、いつものメールが届いていたので安心していたのですが、管理画面を見ると「…

アクセシビリティと頭文字語の処理

a11y界隈では珍しくトゲのある議論を見かけたのでちょっと追いかけたら面白い課題に出くわしたという話です。 最初に見たのがこちら とくに電子書籍の誤読問題に関するdisりトーク 電子書籍の読み上げで「IT」が「イット」と読み上げられてしまうのを避ける…

flexがあるからfloatやclearfixはいらない? んなわきゃ無い

CSS

floatやclearプロパティ周りの話題が出るたびに、「flex使えばオッケーじゃん」というような声が散見されるので、「それは違う!」と強く訴えたい、というお話です。 そもそもflexはfloatの代替品ではない floatプロパティは、それを設定した要素を文字通り"…

flexboxやcalcを使いつつ、IE8までサポートしたCSSフレームワークを作りました。

以前komitsuboshi-cssというCSSフレームワークを作ったのですが、 コーディングで楽したい一心で機能付けすぎた 使ってみると付けた機能が地味に使いにくかった 結局グリッドシステムの方を中心に使っていた WordPress対応にしたのはいいが、ランディングペ…