CSS

CSSで画像と文字を左右交互に配置する方法【display:flex】

画像と文字を左右交互に配置するレイアウトってどうやってコーディングすればいいんだろう? コーディング案件では、下のようにPC時は画像とテキストが左右交互に配置され、スマホ時は縦並びになるデザインがよくあると思います。 この記事では、CSSをReadMore...
JavaScript

【JavaScript】アコーディオンメニューの作り方【クリックで開閉】

生のJavaScript(Vanilla JS)でアコーディオンメニューが作りたい。 この記事では、jQueryを一切使わず、生のJavaScript(Vanilla JS)でアコーディオンメニューを作る方法について解説します。 なお、今回ReadMore...
HTML

【レスポンシブ対応】スマホとPCで画像を切り替える方法

PCとスマホで画像を切り替えるレスポンシブってどうやるんだっけ? コーディングの現場では、下のように画面幅によって画像を切り替えたいときがあると思います。 この場合、以前はHTMLに2つの画像をコーディングし、片方をCSSで「displayReadMore...
CSS

【CSS】フォントサイズをレスポンシブ化する4つの方法

フォントサイズを画面幅に応じていい感じにレスポンシブ対応したい。 この記事では、CSSを使ってフォントサイズをレスポンシブ対応する方法を解説します。 フォントサイズをCSSでレスポンシブ対応する方法 CSSを使ってフォントサイズをレスポンシReadMore...
WordPress

【WordPress】get_template_partの使い方

get_template_partの使い方が知りたいな。 WordPressのget_template_partは、作成したパーツを好きな場所で使用できる、とても便利な関数です。 さらに、バージョン5.5.0から引数に「$args」が加わりReadMore...
Swiper

【Swiper】ページネーションのクリックを有効にする方法

Swiperのページネーションをクリックしてもスライド画像が動かない・・・。クリックを有効にする方法が知りたい。 Swiperは、デフォルトだとページネーションのクリック機能は「OFF」になっているため、ドットをクリックしてもスライドは動きReadMore...
Swiper

Swiperのページネーションを外に出す方法

Swiperのページネーションを外に出したい。 実務でよくあるのが、下のようにページネーションがスライド画像の外側に設置されたデザインです。 See the Pen swiper_pagination_outside by たけち (@kwReadMore...
Swiper

Swiperのページネーションをカスタマイズする方法

Swiperのページネーションをカスタマイズする方法を知りたいな。 この記事では、Swiperのページネーションをカスタマイズする方法について解説します。 なお、Swiperの導入方法や基本的な使い方を知りたい方は、下の記事を参考にしてくだReadMore...
Sourcetree

【Sourcetree】コミットを取り消しする方法

SourceTreeで間違った内容をコミットしちゃった…。どうやって取り消しするんだろう? 変な操作してファイルの中身が消えちゃったりしないか不安だな。 SourceTreeを使ってバージョン管理をしていると、たまに「コミットを取り消したいReadMore...
Swiper

Swiperの使い方|ダウンロード方法からスライダー実装まで解説

Swiperの使い方ってどうやるんだっけ?ダウンロード方法やスライダーの実装方法を知りたい。 この記事では、Swiperの基本的な使い方を解説します。 なお、本記事は2023年12月現在で最新の「バージョン11」をベースに解説しています。大ReadMore...