こうへい

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

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

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

細かい部分のスタイルを調整とホバー擬似クラスをつけていきます。 細かいスタイリング 擬似クラス 細かいスタイリング ・前回activeクラスをつけてそちらのスタイルを整えてきました。 ・今回はさらに見 ...

activeクラスがついているメニューにスタイルをつけていきます。 メニューのスタイリング コンテンツのスタイリング displayプロパティの操作 メニューのスタイリング ・前回までで全体のスタイリ ...

CSSで、画面全体とメニューのスタイルを調整していきます。 全体のスタイリング コンテイナーのスタイリング メニューのスタイリング 全体のスタイリング ・前回まででHTMLでのマークアップを終えました ...

HTMLでマークアップをしていきます。 全体のマークアップ メニューのマークアップ 中身のコンテンツのマークアップ 全体のマークアップ ・前回まででCSSのファイルとJavaScriptのファイルを読 ...

CSSファイルとJavaScriptをファイルを読み込んで行きます CSSファイル JavaScriptファイル CSSファイル ・前回まででタブメニューを作るための全体像の把握とHTMLファイルを作 ...

JavaScriptを使ってタブメニューを作っていきます。 全体像の確認 ファイルの作成 全体像の確認 ・まずタブメニューについてですがタブメニューとはタブ形状のメニューをホバーしたりクリックすること ...

ひとつの項目を開くと他の項目が閉じられるように実装していきます。 dt要素の調査 クラスの削除 dt要素の調査 ・前回まででアニメーションを付けてより快適なUIを作ってきました。 ・今回はそのアコーデ ...