Web制作
Web制作Web制作
SwiperSwiperの画像切り替えを「フェード」に変更する方法
Swiperの画像切り替えを、横スライドから「フェード」に変えたいな。 こんにちは。 フリーランスWebコーダーの、たけちです。 今回は、Swiperの画像切り替えを、デフォルトの横スライドから「フェード」に変える方法を解説します。 「SwReadMore...
SwiperSwiperのpaginationが表示されない時にチェックすべきこと
あれ？ Swiperのページネーションが表示されない・・・。 Swiperでスライド画像を作成しているとき、いつも表示されるはずのpagination（ページネーション）が表示されない、なんて困ってませんか？ そこで今回は、SwiperのペReadMore...
CSSCSSを使ってgrid要素の順番を入れ替える方法
gridで並べた要素の順番を、CSSで入れ替えたいな。 こんにちは。 フリーランスWebコーダーの、たけちです。 コーディング案件では、display: gridで並べた要素の「順番」を入れ替えたいときがあると思います。 たとえば、PC時にReadMore...
Swiper【Swiper】デフォルトの矢印を消す（非表示にする）方法
Swiperデフォルトの矢印を消したいな。 Swiperには、スライド画像を切り替えるための「矢印」がデフォルトで付属しています。 しかし、「画像に変更するから、デフォルトの矢印はいらない」というケースがあると思います。 中には「そもそも矢ReadMore...
SwiperSwiperが動かない原因はコレ！5つのチェック項目と解決方法
あれ！？Swiperが全然動かない！ ちゃんとコードを書き写したつもりなのに、なんで動かないの！？ こんにちは。 フリーランスWebコーダーの、たけちです。 Swiperはスライドを作成するとても便利なライブラリですが、「ちゃんとコードを書ReadMore...
Swiper【Swiper】同じページ内に複数のスライドを設置する方法
Swiperを使って、同じページの中に２つや３つなど複数のスライドを設置したい。 こんにちは。 フリーランスWebコーダーの、たけちです。 コーディングの案件や勉強をしていると、デザインの中に複数のスライドが入っているケースがあると思いますReadMore...
Swiper【Swiper】2つのスライドを連動して動かす方法
Swiperを使って、2つのスライドを連動して動かしたい。 こんにちは。 フリーランスWebコーダーの、たけちです。 コーディングのお仕事や勉強をしているとき、「2つのスライドを連動させたいけど、一体どうすればいいんだろう？」と悩んだことはReadMore...
Swiperswiperのレスポンシブ対応｜ブレイクポイントで画像枚数を切替える方法
Swiperの画像枚数をブレイクポイントで切り替える「レスポンシブ対応」って、どうやって実装すればいいんだろう？ こんにちは。フリーランスWebコーダーの、たけちです。 「『スマホ時は１枚』『PC時は３枚』のように、swiperの画像枚数をReadMore...
CSSCSSで画像の上に文字を重ねる方法【中央に配置する方法も解説】
CSSを使って画像の上に文字を重ねたいんだけど、どうすれば上手くできるかわからない。 Webサイトには画像の上に文字を重ねるデザインが数多くありますが、「どうやってCSSで表現しているんだろう？」と疑問に感じる人は少なくないと思います。 実ReadMore...
JavaScriptJavaScriptで子要素を追加する【appendChild】
JavaScriptを使って、親要素の中に子要素を追加したい。 Webサイトやアプリを作成していると、表示要素を動的に増やしたいケースがあると思います。 例えば、下記は簡易的なTodoアプリですが、インプット欄に入力したテキストが次々と下段ReadMore...