質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

HTML5・CSS3を使用した縦メニュー実装に関する相談

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 1,297

 前提・実現したいこと

YouTubeに動画を貼り付けていますが、このようなメニューをHTMLとCSSで実装したいと考えています。しかし、どのようにソースコードを書けばよいのかが全体的にわかりません。

メニュー再現動画リンク

*追記*
HTMLとCSSのソースコードを参考にしたサイトのリンクを掲載しました
色々なメニューとしての参考
色々なメニューとしての参考2
ソースコードについての解説がったので参考として見ているサイト

スキルとしては、HTML, CSSテンプレートで変更したい点を自分好みに変更する程度ならできます。(感覚としては塗り絵はできるけど元となるイラストは描けないよ。みたいな感じです)

 発生している問題・エラーメッセージ

なし

 試したこと

他の方々が作られたメニューのソースコード(HTML・CSS)を参考にし、ドロップダウンなどは見つけることができましたが、動画のように「メニュー内で目次が移り変わる」というものを見つけることはできませんでした。

 補足情報(FW/ツールのバージョンなど)

HTML5
CSS3
を使用していて、ソフトウェアはSublime Text3を使っています。

こちらの質問内容は複数回編集を加えているので最初の状態から変更されている箇所があります。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • liveasnotes

    2018/08/15 14:44

    動画のメニューいいですね!どこからともなくふわっと出てくるのが良い感じです! (p.s.境界付近の挙動といえば,:hover時に回転するボタンを作ったとき,最終的に擬似要素だったか,親要素だったかを:hoverの対象にして実装したのですが,スマホ対応も含めてワンソースでやったので,かなりヤバいコードが出来上がりましたねえ.今だったらもうちょっと簡潔に書けるかなあ

    キャンセル

  • yukihisa

    2018/08/15 15:08

    おぉ、動画確認してみましたがきれいに仕上がってますね、素晴らしい。さっき自己解決にしていた質問について。メニュー項目が多くなりすぎたときは思い切ってサイト自体を分けてみるっていうのも一つの手だったりします。SEO的にもターゲットを絞り込むことができていいですよー (蛇足 僕は境界線付近の挙動対策についてはボタンにhover付けて子要素をぶん回す感じで作ってますが、他にもいい方法があればぜひ知りたいですね!

    キャンセル

  • hope_mucci

    2018/08/16 07:41

    おおっ、すごい!カッコよく仕上がっていますね。お疲れさまでした。イメージ通りのものが実現できたようで良かった。

    キャンセル

回答 2

checkベストアンサー

+4

 とりあえず基礎のおさらい

今回の実装について,まず以下の段階に分けて考えてみましょう.

  1. ボタンを押すと何かが動くものを作る
  2. ハンバーガーを表示する
  3. ハンバーガーを押すと何かが動くようにする

この3つが自力でできれば,入れ子的な実装は,そう難しくはないです
①の「ボタンを押すと何かが動く」の実装方法は,HTML,CSSでやる方法だけで,ざっくり3種類あります(もしかしたら,私が知らないだけで,もっとあるかも)

それぞれ,以下の「擬似クラス」が肝になります.
名前が怖いと思うかもしれませんが,気にしないでください.
CSSでボタンを実装するには,彼らの助けが必要なのです^^

  • :hover
  • :target
  • :checked

一応,1つずつ説明します



 :hover擬似クラス

もうご存知かと思うので説明を省略

トリガーに使うときの注意点:
常にマウスカーソルが対象に乗っている必要がある

 :target擬似クラス

こんなHTMLに

<a href="#sec_2">これはページ内リンク</a>
:
・
<section id="sec_2">
  <h2>小タイトル</h2>
  <p>lorem ipsam...</p>
</section>


こんなCSSを書くと,

#sec_2:target{
  background: green;
}


ページ内リンクを押した際,idがsec_2の部分にスクロールされます
リンク先がtargetされ,背景色を緑にします
記事のトップに戻るボタンは,href="#"使ってたりします
hrefに入れる文字は,要素のidでないとだめです

トリガーに使うときの注意点:
URLの末尾に#~~と書かれてしまうので,ただのボタンには向かない.ページ遷移の代替として,モーダルウィンドウを表示させたいときや,ダイナミックにページがスライドするときに使うのが自然

 :checked擬似クラス

本来はフォーム要素で使うものですが,この際,細かいことには目をつむりましょう
こんなHTMLと

<input type="checkbox" id="btn">
<label for="btn">touch me</label>


こんなCSSを書くと

input:checked +[for="btn"]{
  background: red;
}

こうなります(雑)
checkedのgif
ちなみに,

「+」は隣の要素を指定するやつ,
「>」は直下の要素の指定,
「~」は下に続く,同じ階層の要素を指定するやつ,
「[foo="bar"]」は属性で指定できるやつです

トリガーに使うときの注意点:
注意点,というかかなり利点,内包関係を気にせず使えるので,hoverやtargetで手が届かないところをダイレクトにいじれる
「もう,ぜんぶこいつでいいんじゃないかな」



内容が濃すぎて,説明が雑になってきたので,Web上のリファレンスに頼ろう!

...と思ったけど,なかなか分かりやすいリファレンスが見つからないし,デモ作った方が早そうなので,とりあえず,ここでいったん休憩して,明日以降に,続きを書きます.

 ZZZ...

( ˘ω˘)スヤァ

 追記(20180811)

https://thimbleprojects.org/liveasnotes/531595/
hovermenugif
ところどころ妥協してますが,:hoverでやるバージョンはこんな感じになりました

解説に使おうと思っていたデモコードが,左から初級・中級・上級のタブに分かれています.
説明もしっかり書きたいところですが,ここに書くには余白が狭すぎる()ので,いったん省略し,コードを読んでいただいた上で,分からないところがあれば,逐一答えていくようにしようかと思います.

上記リンク先ページの右上にある「リミックス」ボタンを押すとコードの閲覧・編集ができます
また,このリンク先のページは今後も更新します(まだ:target:checkedのデモが未完成なので...)
ちなみに,セマンティックなHTMLでやろうとすると,:hoverだけでやる方法がおそらく最も詰みやすいので,もし心が折れた場合は,素直に:checkedとか使いましょう^^
(ADVANCEDでいきなりセマンティックにやろうとしたのは痛恨のミス

 追記(20180812)

fullgif
とりあえず,目的のメニューのデモは一通りできたので,お知らせします
ちなみに,ページ内のタブ切替は:checkedによる作例の1つです.
divでやる人が多いと思うのですが,構造がつかみやすくなるので,dl,dt,ddで組みました
詳しい説明等は,今度Qiitaで記事を書いたときに,覚えていたら,URLを張りに来ようと思います

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/15 13:43

    :hover擬似クラスを使うと,
    マウスカーソルが乗った,もしくはタッチデバイス上でタップした際に,
    要素のCSSを上書きすることができます

    例えば,

    /*変化前*/
    a:link,
    a:visited{
    color: red;
    }
    /*変化後*/
    a: hover{
    color: green;
    }
    という指定があるとき

    リンクの上にマウスカーソルの乗せると
    文字色が赤から緑に変化します
    この変化の仕方は,transitionプロパティで詳しく指定できます

    ---

    > 何も理解できなかった

    私もそうでした

    なので,既に作ったことがあると思われる「ボタン」のCSSを改造するところから始めるのが良いかと思われます
    ボタンの上にマウスを乗せた際に,何か変化を起こす,という方法については,何となく理解していると思います
    変化のトリガーを:activeにしてみたり,要素の位置やサイズを変えてみたり...とにかく細分化してください

    基本的なコードを下に載せておくので,練習に活用していただければ幸いです

    ```html

    <div class="wrap">
    <div class="btn">THIS IS BUTTON</div>
    <div class="r_g">red-green(and pos_move)</div>
    <div class="pos">pos_move(and transition)</div>
    <div>

    ```

    ```css

    .wrap{
    width: 500px;
    outline: 1px solid;
    }

    .btn{
    position: relative;
    padding: 2em;
    background: tomato;
    }
    .btn::before{
    content: "BFR(move 50px)";
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    }

    .btn:hover{
    background: skyblue;
    }
    .btn:hover::before{
    left: 50px;
    }
    .btn:hover::after{
    content: " [ this is AFTER]";
    }

    .r_g{
    color: red;
    }
    .btn:hover +div{
    color: green;
    }

    .btn:hover ~div{
    transform: translate(50%);
    }

    .pos{
    transition: 1s;
    }

    ```

    https://liveweave.com/などで試してみてください^^

    キャンセル

  • 2018/08/15 13:58

    Liveweave...こんなサイトがあるとは思ってもいませんでした😳
    HTMLテンプレートで簡単なメニューを探して、それを改造していくことにしてみます!

    キャンセル

  • 2018/08/15 14:37

    他の方から頂いたコメントによって行いたいと考えていたことが実現できたので、こちらのコメントも合わせて参考にしながらカスタマイズをしていきます!
    :hoverなどは現段階ではホント簡易的なものしかわかりませんが、必要なものはある程度提示していただけたため、それらも合わせて「猿でも分かるHover」のように検索して学んでいこうと思います👍✨

    キャンセル

+4

hover擬似クラスを使った実現方法は、既に他の回答者さんが回答しているようなので、checked擬似クラスを用いた方法を回答します。checked擬似クラスを使うと、質問者さんが実現したいような動作は、以下のように行えると思います。現在、動作確認ができる状況ではないため、動作確認をしていませんが、あまり難しいことはしていないと思うので、もし正しく動作しない箇所があったとしても、ソースコードを読んでみると、何をしようとしているのかが分かると思います。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            color: #cdcdcd;
            background: #232323;
        }

        a, label[for='check2'] {
            text-decoration: none;
            color: #232323;
        }

        #menuToggle {
            width: 300px;
            height: 100vh;
        }

        input[type='checkbox'] {
            display: none;
        }

        label[for='check1'] {
            position: fixed;
            z-index: 1;
            top: 10px;
            left: 10px;
            width: 33px;
            mix-blend-mode: difference;
        }

        label[for='check1'] > span {
            display: block;
            width: 100%;
            height: 4px;
            margin-bottom: 5px;
            background: #cdcdcd;
        }

        #menu, #submenu {
            position: absolute;
            top: 0;
            width: 300px;
            height: 100vh;
            padding-top: 50px;
            transition: .5s;
        }

        #menu {
            left: -100%;
            overflow: hidden;
            background: #cdcdcd;
        }

        #submenu {
            right: -100%;
            background: #f2f2f2;
        }

        #check1:checked ~ #menu {
            left: 0;
        }

        #check2:checked ~ #submenu {
            right: 0;
        }
    </style>
</head>
<body>
<nav>
    <div id="menuToggle">

        <input type="checkbox" id="check1">
        <label for="check1">
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
        </label>

        <ul id="menu">
            <li>
                <input type="checkbox" id="check2">
                <label for="check2">メニュー1</label>
                <ul id="submenu">
                    <li><a href="#">メニュー2</a></li>
                    <li><a href="#">メニュー3</a></li>
                    <li><label for="check2">メニュー1に戻る</label></li>
                </ul>
            </li>
        </ul>

    </div>
</nav>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/12 00:41

    HTMLのみで動かせるのですか!?😳
    早速本日中に試してみたいと思います!

    キャンセル

  • 2018/08/12 19:21

    まあ、おそらく動くと思います(まだ動作確認はできていませんが)。
    `checked擬似クラス`と`隣接セレクタ`, `間接セレクタ`を使ったCSS制御は便利なので、覚えておくと良いと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる