ブログ

社員が発信するブログ。

「Swiper.js」で自動で切り替わるカバーフロースライダーをつくる

「Swiper.js」で自動で切り替わるカバーフロースライダーをつくる

先日JavaScriptのライブラリ「Swiper」を使ってスライダーの実装を行いました。 初めて「Swiper」を使ったのですが、これが使っていておもしろかったので、今回は「Swiper」で自動で切り替わるカバーフロースライダーをつくる方法をご紹介したいと思います。 「Swiper」とは Swiperとは、jQueryを使わずにスライダーが作れるJavaScriptのライブラリです。 レスポンシブの設定など多くのパラメータが用意されています。 公式のデモも豊富で、いろいろなカスタマイズをすることができるようです。...

CSS「display: grid;」で画像をグリッドレイアウトで表示する方法

CSS「display: grid;」で画像をグリッドレイアウトで表示する方法

CSS「display: grid;」で画像をグリッドレイアウトで表示する方法をご紹介します。 グリッドレイアウトで表示される画像の完成イメージ 5枚の画像をグリッドレイアウトで表示するページです。 ウィンドウ幅によって何列で表示するかを切り替えます。 サンプルコード 画像を隙間なく配置するために余白をリセットしています。 「grid-template-columns: repeat(x, 1fr);」で列を指定しています。 「grid-column-start」や「grid-row-start」が画像のサイズです。...

WordPressテーマ「Divi」で画像をグリッドレイアウトで表示する方法

WordPressテーマ「Divi」で画像をグリッドレイアウトで表示する方法

WordPressテーマ「Divi」で画像をグリッドレイアウトで表示する方法をご紹介します。 実際に作成するグリッドレイアウトのイメージ 画面を覆うように画像を表示し、各画像の右下にテキストを配置します。 スマートフォンでも同様に表示します。 Diviの設定内容 次のようなレイヤーを構成し、各「列」の背景に画像を設定します。 グリッドレイアウト作成の流れ Divi Builderを起動して、「最初から構築」を選択します。 2列構成の行を挿入します。 左の列にテキストモジュールを挿入します。...

WordPressテーマ「Divi」でサイドバーを固定しスクロール追従させる方法

WordPressテーマ「Divi」でサイドバーを固定しスクロール追従させる方法

WordPressテーマ「Divi」でサイドバーを固定しスクロール追従させる方法をご紹介します。 また、こちらではCSS「position: sticky;」を使い固定サイドバーを作る方法をご紹介しています。 https://www.kaname-gh.co.jp/web_design/css_sticky_sidebar/ スクロール追従する固定サイドバーの完成イメージ 画面をスクロールしても位置が固定されているサイドバーを持つ、2カラムレイアウトのページです。 Diviの設定内容...

人気の投稿

最新の投稿

カテゴリー

タグ

アーカイブ