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

古松

メインナビゲーション

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

パンくず

  • ホーム
  • css

css

Bootstrapのグリッドシステムにない480pxのブレイクポイント追加

現在、Bootstrap(v4)のグリッドシステムに、画面サイズが576pxのブレイクポイントが一番小さいです。実際のスマホサイズとシェアの調査(2017年度)によると約80%のスマホが横幅414px以下となっているため、410px~480pxぐらいのブレイクポイントが必要となります。Bootstrapのブレイクポイント設定を参考しながら、480px(仮に)のブレイクポイント(col-xxs-x)をcssファイルに追加します。

DrupalのモジュールViews Bootsrapのブレイクポイントの設定

  • 問題点:Views Bootstrapのブレイクポイント設定が乏しい、設定されたブレイクポイントは画面1200基準(col-lg-xx)のものとなりました。
  • BootstrapのグリッドシステムがPC、タブレット、スマホのサイズに応じてカラム数を変更するのは本来の機能を活かすことができないです。
  • ここで、javascript(jQuery)でページがロード時に、ブレイクポインを動的に追加します。例:col-sm-x, col-xsなどの属性をクラスの追加します。

DrupalでBootstrapテーマ導入後にモジュールViewsのBetter Exposed Filtersのレイアウト崩れ

  • Bootstrap導入後にモジュール(Better Exporsed Filters)のレイアウトが崩れました。
  • 原因:Better Exposed Filtersの検索フォームの要素、プロパティがBootstrapテーマに書き直されました。
  • Bootstrapの「form-control」クラスがブロックの高さ(height)が定義しています。
  • 「form-control」クラスがブロックの高さ(height)を消せば、通常の検索フォームに戻りました。

cssとjQueryで画面サイズ変更(PC、スマホなど全デバイスの画面対応)時にposition:absolute要素の上下ポジションを保持

やりたいこと:画面サイズが変更(PC、スマホなど全デバイスの画面対応)時にposition:absolute要素の上下ポジションを保持したい

  • サイトの個人紹介ページに個人写真が背景イメージの上に載せする手法がよく利用されます
    • 方法としては、cssで人の顔写真のプロパティ:position:absolute; top:200px などえ設定すればよいです
  • ブラウザの幅が固定している場合は、ポジション(top)の固定値指定はできます

マウスオーナー/クリック時にのイメージズームアウト/ズームイン効果の作成

マウスオーバー:イメージのズームイン+マウスクリック:イメージのズームアウト

  • マウスオーバー、クリック時のイメージのズームアウト、インの効果を作成したいです

実現:css+jQueryで作成します

cssでページャーのアニメ―ジョン効果

  • cssのみでページャーのアニメ効果を作成します
  • ページャーのアンカータグと疑似クラス(after)を利用して矢印と文字を表示します
    • position:absoluteで矢印の配置場所を変更できるようにします
    • transform: translate(-30px, -42px)で矢印の配置場所をアンカーの文字(最終)に合わせます
    • transition: transform 0.3s ease-in-outでアニメ効果を高めます

コンテンツ表示とスクロール時のアニメ効果

やりたいこと:ページがロード/スクロール時に、コンテンツがブラウザに次から次への流れ込むようなアニメ効果

  • ホームページがロード、またはスクロール時にコンテンツが一定な間隔で次から次へ流れ込むアニメ効果が比較的にコンテンツを強調しやすいです。
  • 簡単なサンプルを作成して、以下のような効果となります:

タイトルのCSSスキャン動画効果

  • ページがロード後に、タイトルが一度スキャンのような動画効果を実現したいです。
  • CSSのAnimation効果だけを利用したいです
  • javascript、jQueryなどを使用しないこと
  • タイトルのレイヤーを上に設定します
  • タイトル要素(DIV)の疑似クラス(before)を利用して、スキャンのレイヤーを作成します

phpMyAdminのSQLクエリの文字サイズ変更

  • やりたいこと:PHPmyadminのSQLクエリ入力テキストエリアの入力フォントサイズを大きくしたい
  • codemirror.css.phpファイルで「.CodeMirror pre」のフォントサイズ変更

ページ送り

  • 前ページ ‹‹
  • 2 ページ
css を購読

検索フォーム

カテゴリ別

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

google ads