暗い場所で、ページを開くと、白いブログの背景色が目に刺さるなんてことがあります。グーグルマップなんかは、トンネルに入ると黒背景で表示されますね。
背景色の切り替えは、javascriptでやるケースが多いのかもしれませんが、ちょっと工夫するとCSSでも簡単にできます。
|
1 2 3 4 |
input#dark:checked~.switch-presentation{ --bg:#333; --fg:#fff; } |
この部分で色を変更していますが、
もう一つのポイントは、label要素の位置は、for="id"を使っているので、チェックボックスと同じ場所に ...
悩み多き エディターの斜体ボタンとCSS
エディタには、大抵 Iというボタンがあります。でも、例えば、メイリオというよく使われるフォントがありますが、このフォントは、日本語の斜体がありません。
新しく記事を書きました。
まじかに迫りつつある Gutenberg ですが、アップデートすると、以前のバージョンで作成した記事に、適切にスタイルが適用されず、レイアウト崩れを起こすことがあります。
スタイルシートのスタイルの調整に入る前に、試しておいたほうがいいこともありますのでそのあたりをメモに残します。
建前として、gutenber ...
グーテンベルグの開発者たちは、どんなテーマを使って「新しい編集体験の先にある、将来的に基本になるサイトのゴールを示すのでしょうか？
Gutenberg editor loaded with the Twenty Seventeen theme
現在のところ、グーテンベルグのためのテーマが公式に発表されていないので、デフォルトテーマで試されているようです。
グーテンベルグのコア実装が近づくにつれ、グーテンベルグブロックの作成等、技術的な関心が深まってい ...
TwentySeventeenテーマでは、SVGアイコンが使われています。それ以前は、Iconfontが使われていました。fontawesome等でも、SVGアイコンが使われだしています。
世の中のどれぐらいのWEBサイトが、SVGでアイコンを実装しているのかは判りませんが、気にはなります。
TwentySeventeenでは、SVGアイコンを、スティッキー投稿のタイトル前に表示したり、カテゴリリンクの先頭にアイコンを表示するなどしていますが、それは主に装飾的なものとして存 ...
SVGスプライトは、一つのSVGファイル内に、色などの設定を複数記述して必要なものを呼び出すテクニックですが、
具体的な使い方については、あまり紹介されていません。
一例をメモに残します。
親要素に幅が指定された 子要素img を全幅画像表示する alignfull, alignwide CSS
グーテンベルグは、次期エディタの機能として、alignwide, alignfullといったクラスによる画像等のフルサイズ表示機能を追加しています。
続きを読む 投稿 ID 9570
Starter CSS
CSS 要素一覧と、WordPressのbody_class() post_class()が出力する要素一覧
HTML文書の両端揃えと、均等割り付け CSS
両端揃え、均等割り付けのための3つの方法
この記事は、Raindrops1.510で、追加予定のパーセント幅クラス、従来から画像の左右寄せに使われていた alignleft alignright aligncenter alignnoneといったコア関連クラスとの組み合わせで、フロートを使ったグリッドレイアウトのテストです。