Blog– category –

メニューのliにclickイベントを設定して、クリックされたらactiveクラスが追加されるようにしていきます。 イベントの設定 ページ遷移のキャンセル イベントの設定 ・前...

activeクラスを追加する前に、元からついていたactiveクラスは外すことで、移動するようにします。 activeクラスの付け替え activeクラスの付け替え ・前回まででクリッ...

内容を切り替えるための処理として、まず全てのcontentからactiveクラスを削除します。 コンテンツからクラスを削除 コンテンツからクラスを削除 ・前回まででメニュー...

JavaScriptでWEBサイトでよく見る横に画像などをスライドさせるカルーセルの作り方 完成版の確認 開発環境の確認 ファイルの作成 完成版の確認 ・今回からはJavaScript...

カルーセルで画像を表示するための領域を作り、スタイリングをしていきます。 雛形コード 表示領域の作成 style.cssの作成 雛形コード ・前回まででHTMLのファイルの作...

リストのタグを使ってカルーセルで使う画像を配置していきます。 画像の配置 リストのスタイリング 画像の配置 ・前回までで領域を作っていきました。 画像を表示する領...

画像がカルーセルの領域に収まるように修正していきます。 画像の大きさ調整 親要素の高さ指定 画像の大きさ調整 ・前回までで画像を配置し簡単なスタイリングめでして...

object-fitプロパティを使って画像の縦横比が保たれるようにしていきます。 画像の縦横比 フレックスボックスの指定 画像を縮まないようにする 画像の縦横比 ・前回まで...

画像をスライドさせるためのボタンを配置していきます。 ボタンの配置 ボタン位置の設定 ボタンの配置 ・前回までで画像の配置が終わったと思います。 画像の調整 objec...

ボタンの見た目を整えたのち、画像の領域に対してボタンを上下中央揃えにしていきます。 ボタンのスタイリング ボタン位置の修正 ボタンのスタイリング ・前回はボタン...