【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する | バシャログ。
先週インフルエンザに感染して、ダウンしてました ishida です。 今年のインフルエンザは感染力がかなり強いようで、 次女→自分→長女→嫁（いまココ）と感染してしまいインフル一家となってしまいました。。。 助けてぇ〜。 急な高熱・のどの痛み・関節痛などの症状がでたら、すぐ病院に行きましょうね。 さて今回は、先日コーディング中に遭遇したChromeブラウザのみにおきた現象を回避するための Tips を紹介します。 最近のHTMLコーディングでは、ボタンなどのマウスオーバーエフェクトを CSS で対応することが多いです。よく使うのは、以下のようなものです。 ソースコード HTML <p class="button"><a href="#"><img src="hogehoge.png" alt="ボタン" width="300" height="80"></a></p> .button {
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
アイコンの実装方法
ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとおり、「そのアイコンの意味を伝えるテキストが付随するかどうか」を考える必要があります。 テキストが付随しないアイコン 家のアイコンだけでホームページへのリンクを表す場合など、ラベルとしてのテキストが存在しないアイコンは、自分自身でその意味を伝える必要があります。こういったアイコンの実装方法は限られていて、ほぼ 1 つしかありません。alt 属性に代替テキストとしてラベルを指定した img 要素をマー
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
Flashオブジェクトのz-index問題 - COBALT
現象 youtubeを以下のようにロードできる。 <iframe title="YouTube video player" width="450" height="368" src="http://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe> こうした場合、読込んだFlashがz-indexを無視して一番上に表示される。 z-inex の有効化 Flash要素にz-indexを有効化させるには一般的に次のように指定する。 <object> <param name="wmode" value="transparent"> <embed src="…" wmode="transparent" /> </object> iframe へのアクセス youtubeの動画にz-indexを指定するため、まず
Get Started with the Google Fonts API | Google for Developers
Get Started with the Google Fonts API Stay organized with collections Save and categorize content based on your preferences. This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. A quick example Here's an example. Copy
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まだ中央寄せで消耗してるの？ - @yoshiko_pg