サムネイルに連動する画像表示をSwiperで作る
Swiperは、多機能なスライダーをサイトに設置することができるJavaScriptライブラリです。 Swiperを利用することで、サムネイルと拡大画像が連動して表示されるようなよく使われる画像表示を簡単に作成することができます。今回は、そのような画像表示をSwiperを使って作成する方法について紹介します。
画像を拡大してポップアップ表示できる”Lightbox2″の使い方
“Lightbox2″は、画像を拡大してモーダルダイアログにポップアップ表示させることができるJavaScriptライブラリです。今回は、この”Lightbox2″の使い方を紹介していきます。また、実際の動作やコードの例を確認していただけるサンプルページも用意していますので、そちらも見てみてください。
紙芝居のようにスクロールできる”StickyStack.js”の使い方
jQueryのプラグイン「StickyStack.js」の使い方を紹介します。スクロールした時にスタッキング要素が固定されて表示されるので、下からスクロールアップしてくる要素が上に重なっていくような視覚効果を実現することができます。
CSSのposition: sticky;を徹底解説！スクロールで要素を固定・追従させる魔法の指定
CSSのposition: sticky;プロパティの基本的な使い方から、ヘッダーやサイドバーをスクロール追従させる具体的な使用例まで、初心者にも分かりやすく解説します。stickyが効かない時の対処法も紹介。
HTMLとCSSだけで作るタブ型のUI
Webページなどでよく見られるタブ型のUIを作る方法について紹介します。 タブ型のUIもいろいろな実装の方法があると思いますが、この記事内ではHTMLとCSSだけを使って設置する場合の方法についてお話ししています。 HTMLとCSSによるタブ型UIの仕組みの紹介から作成の流れ、実装する際の記述例まで紹介しています。
CSSでレスポンシブなtableをつくる
tableのレイアウトをパソコンでの表示とスマートフォンでの表示とで切り替えたい時など、ディスプレイの幅が違う時でもtableのレイアウトをCSSで適切に表示させたい時の方法を紹介します。
HTMLのdetailsタグとsummaryタグで作るアコーディオン型UI
HTMLのdetailsタグとsummaryタグを利用してアコーディオン型のUIを作成する方法について紹介します。detailsタグとsummaryタグは比較的新しい要素なのでこれらのタグについての紹介から、これらの要素を使ってアコーディオンを作る方法、作成したアコーディオンをアレンジする方法まで紹介していきます。
WordPressの投稿一覧表示の順番を更新日順にする方法
WordPressの投稿の表示はデフォルトで公開日が新しい順に表示されるようになっています。今回はWordPressの投稿の表示順を更新日が新しい順に表示されるように変更する法を紹介します。
WordPressで固定ページに投稿一覧を作成する方法：完全ガイドとカスタマイズ術
WordPressで固定ページに投稿一覧をカスタマイズして表示する方法を解説。WP_Queryを使った全投稿表示、ページネーション、表示件数変更、アイキャッチやカテゴリー表示のカスタマイズまで、SEOに配慮した完全ガイド。