-
-
Memo:2016/6/9 改行の扱いが変わり、正常に表示できなくなったコンテンツが発生
アーカイブを確認すると、正常に動作していないページが多数発生していました。
何が原因なのか、調べていますが、改行の扱いが厳密に適用されるようになり、svg や inline要素の改行によって 表示が正常に行われていないようです。
改行を取り除くと、正常な表示に戻りました。
-
HTML5 カスタムデータ属性 data attribute
hello world
-
ブラウザサポートが貧しい detail 要素を最低限度使えるようにする CSS
lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ...
-
CSSでonclickイベントを実装する
HTML
CSS
.onclick-menu { position: relative; display: inline-block; } .onclick-menu:before { content: "click me!"; } .onclick-menu:focus .onclic ...
-
timer
HTML
CSS
.timer { background: -webkit-linear-gradient(left, skyBlue 50%, #eee 50%); /* Foreground color, Background colour */ border-radius: 100%; height: 100px; /* Height and width */ position: rel ...
-
画像をCSSだけで、ポップアップする
Example
画像を簡単なCSSでレスポンシブ,キーボードアクセシビリティ対応のポップアップ表示する
WordPress界隈では、画像のポップアップは javascriptを使ったプラグインを利用するのが普通だと思います
画像は、クリックしたりしても:focusや:activeは、使えないためです。CSSだけで実装するLightBoxは、:target 等を使っている例が多いのではないかと思います。
この例は、:target は使わず、よりシンプルに、キーボー ...
-
リンク アクティブスタイル
Active Effect default
Active Effect red
Active Effect green
Note:モバイル端末での、動作がうまくいっていないかもしれません。
レスポンシブレイアウトでのリンクのプレゼンテーションについて
WordPressのNew theme tags have arrivedのアナウンス(2016/5/25)で、テーマを選ぶ時のキーワードにな ...
-
画像のグリッドレイアウト
object-fit プロパティを使った簡単なグリッドレイアウト
ブラウザのチェックを行っていただく必要がありますが、このようなグリッドレイアウトを、ギャラリープラグイン等を追加しなくても 少しのCSSで実現できるスタイルについてメモを残します。
下のhtmlソースを見ていただくとわかるように、単にWordPressの投稿画面から、画像を数枚追加しただけです。
Note:Can I Useでは、IEは、未サポートになっているみたいですが、若干画像がゆがみますが、 ...
