css

ブロックをW3.CSSのCardで表現比較

Drupal8: W3.CSSのカスタマイズ:モジュール（Display Suite）を利用してcssルールの追加

問題点：Drupal8のW3.CSSの管理設定可能な部分は少ない

  • W3.CSSモジュール:Drupal 8 W3CSS Theme 8.x-1.16
  • W3.CSSの管理画面：ホーム » 管理 » テーマ » テーマの設定
  • 管理できる項目はコンテンツの色、メディアリンクなどぐらいです
    • W3.CSSの豊富なコンポーネント（例：Card、Selectionなど）の直接な設定はできない
  • W3.CSSの各種コンポーネントを理由するため、Sbu-

SVG+CSS+JSで時間表示/動画パイタイマーの作成方法２：タイマー点滅効果の追加

  • やりたいこと：タイマー（時間）を点滅できるように表示したいです
  • JSの関数（setInterval(で、)）内タイマーを点滅させるcssプロパティ(animation)を追加します
  • 問題点：JSで同じcssプロパティ（animation）を追加したときにうまく動作しません
  • 解決１：CSSプロパティ（animation）の値（infinite）を追加
  • 解決２：二つ同じanimationのcss設定（@keyframes）を交代で設定します

SVG+CSS+JSで時間表示/動画パイタイマーの作成方法

  • やりたいこと：残留時間が表示しながら円を描く動画効果のタイマーを作成します
  • SVG+CSS+JSでタイマーの動画効果を作成します
  • 感想：SVGを利用したほうがCSS+JSのみの方式より簡単で、シンプルです

アンカータグの文字列を一行に短縮、末尾を三点リーダーにするcss設定

  • やりたいこと：複数行のアンカータグの文字列を一行に短縮、末尾を三点リーダーにする。
  • アンカータグのdisplayプロパティはinlineを継承しているため、末尾に三点リーダーがうまく表示できませんでした。
  • アンカータグのdisplayプロパティを「block」、「inline-block」に指定すればよい。

DruaplのモジュールをアップデートしたらBootstrapのボタンのバックグランドカラーが消えた

  • DrupalのモジュールをアップデートしたらBootstrapのボタン背景カラーが消えました。
  • 原因はwhhg.cssの背景設定（background:none）より（優位性）、ほかのボタンｃｓｓプロパティ（background関連）の設定が無効化されました。
  • 解決：whhg.cssの背景設定（background:none）を消してから、ボタンが正常に表示されるようになりました

cssのoverflow設定ミスでウェブページのスクロールバーが消えた（初級ミス）

  • いろいろなcssのプロパティ設定後にページのスクロールバーが消えました。
  • 問題：cssのプロパティoverflow:hiddenとして設定したせいでした。
  • 通常overflowの値はhiddenとvisibleをよく使うため、scroll値を忘れてしまいましたため、この初級ミスを犯してしまいました。

ページスクロール時に各種アニメーション効果のライブラリscrollmeの試し

ページスクロールに応じて各ブロックのアニメーション効果のjsライブラリ：scrollme

Safariのみ、およびIE/Chrome/Firefox/Operaのみのcss適応方法

  • 問題点：Safariだけのcssレイアウト崩れ現象。
  • 解決：Safariのみにcss修正を行う。

複数のソーシャルボタンの並びずれがあるので、cssで簡単に配置調整

  • やりたいこと：複数のソーシャルリンクボタンを一行に配置する。
  • 問題点：ボタンが同じライン上に揃っていない。
  • 解決：ボタンをラップする親ボックスの配置を調整する。

DrupalのBootstrapテーマにあるハイライトエリアにjumbotronとwellクラスより表示バランスが崩れため、一時的にこのクラスをjavascriptページをロード時に削除

  • Drupalのブロックシステムにある「ハイライトされ」エリアにTwitterなどのフォローボタンを配置したいですが、テーマ（Bootstrap）のjumbotron、wellクラスよりハイライトエリアの表示バランスが崩れます。
  • javascriptでページロード時に特定なクラス（jumbotron, well）を削除します。
css を購読