メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • css

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で時間表示/動画パイタイマーの作成方法2:タイマー点滅効果の追加

  • やりたいこと:タイマー(時間)を点滅できるように表示したいです
  • JSの関数(setInterval(で、))内タイマーを点滅させるcssプロパティ(animation)を追加します
  • 問題点:JSで同じcssプロパティ(animation)を追加したときにうまく動作しません
  • 解決1:CSSプロパティ(animation)の値(infinite)を追加
  • 解決2:二つ同じ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)より(優位性)、ほかのボタンcssプロパティ(background関連)の設定が無効化されました。
  • 解決:whhg.cssの背景設定(background:none)を消してから、ボタンが正常に表示されるようになりました

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

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

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

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

  • scrollmeのホーム:http://scrollme.nckprsn.com/

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

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

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

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

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

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

ページ送り

  • 1 ページ
  • 次ページ ››
css を購読

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads