メインコンテンツに移動
問題点:Drupal8のW3.CSSの管理設定可能な部分は少ない
- W3.CSSモジュール:Drupal 8 W3CSS Theme 8.x-1.16
- W3.CSSの管理画面:ホーム » 管理 » テーマ » テーマの設定
- 管理できる項目はコンテンツの色、メディアリンクなどぐらいです
- W3.CSSの豊富なコンポーネント(例:Card、Selectionなど)の直接な設定はできない
- W3.CSSの各種コンポーネントを理由するため、Sbu-
- やりたいこと:タイマー(時間)を点滅できるように表示したいです
- JSの関数(setInterval(で、))内タイマーを点滅させるcssプロパティ(animation)を追加します
- 問題点:JSで同じcssプロパティ(animation)を追加したときにうまく動作しません
- 解決1:CSSプロパティ(animation)の値(infinite)を追加
- 解決2:二つ同じanimationのcss設定(@keyframes)を交代で設定します
- やりたいこと:残留時間が表示しながら円を描く動画効果のタイマーを作成します
- SVG+CSS+JSでタイマーの動画効果を作成します
- 感想:SVGを利用したほうがCSS+JSのみの方式より簡単で、シンプルです
- やりたいこと:複数行のアンカータグの文字列を一行に短縮、末尾を三点リーダーにする。
- アンカータグのdisplayプロパティはinlineを継承しているため、末尾に三点リーダーがうまく表示できませんでした。
- アンカータグのdisplayプロパティを「block」、「inline-block」に指定すればよい。
- DrupalのモジュールをアップデートしたらBootstrapのボタン背景カラーが消えました。
- 原因はwhhg.cssの背景設定(background:none)より(優位性)、ほかのボタンcssプロパティ(background関連)の設定が無効化されました。
- 解決:whhg.cssの背景設定(background:none)を消してから、ボタンが正常に表示されるようになりました
- いろいろなcssのプロパティ設定後にページのスクロールバーが消えました。
- 問題:cssのプロパティoverflow:hiddenとして設定したせいでした。
- 通常overflowの値はhiddenとvisibleをよく使うため、scroll値を忘れてしまいましたため、この初級ミスを犯してしまいました。
ページスクロールに応じて各ブロックのアニメーション効果のjsライブラリ:scrollme
- 問題点:Safariだけのcssレイアウト崩れ現象。
- 解決:Safariのみにcss修正を行う。
- やりたいこと:複数のソーシャルリンクボタンを一行に配置する。
- 問題点:ボタンが同じライン上に揃っていない。
- 解決:ボタンをラップする親ボックスの配置を調整する。
- Drupalのブロックシステムにある「ハイライトされ」エリアにTwitterなどのフォローボタンを配置したいですが、テーマ(Bootstrap)のjumbotron、wellクラスよりハイライトエリアの表示バランスが崩れます。
- javascriptでページロード時に特定なクラス(jumbotron, well)を削除します。