TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSでフローティングメニューを作成する方法【初心者向け】
オーダーメイドコース
icon
icon
CSS

CSSでフローティングメニューを作成する方法【初心者向け】

初心者向けにCSSでフローティングメニューを作成する方法について解説しています。フローティングメニューとは画面の一番下に固定で表示されるメニューのことです。floatプロパティを使って浮かせてからpositionプロパティを使って固定します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSでフローティングメニューを作成する方法について解説します。フローティングメニューは画面の一番下に固定で表示されるメニューのことです。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

CSSでフローティングメニューを作成する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

フローティングメニューとは

スマホ画面をスクロールさせても、いつも一番上に表示されているナビゲーションやボタンのことをフローティングメニューと言います。

 

フローティングメニューの書き方

要素をタグで囲み、ボックスはfloat属性を指定し、他のボックスから影響を受けない、フローティングボックスにさせます。

他の要素とfloat の指定が他の要素と干渉しないよう clearfixを設定します。

 

[PR] Webデザインで副業する方法とは

実際に書いてみよう

 

HTML

<table border="2" cellpadding="0" cellspacing="5" id="tmenu"> 
  <tr><td><a href="001.html" class="amenu">MENU001</a></td></tr>
  <tr><td><a href="002.html" class="amenu">MENU002</a></td></tr>
  <tr><td><a href="003.html" class="amenu">MENU003</a></td></tr>
  <tr><td><a href="004.html" class="amenu">MENU004</a></td></tr>
  <tr><td><a href="005.html" class="amenu">MENU005</a></td></tr>
</table>

 

CSS

#tmenu {
  float: left;
  width: 200px;
  position: fixed;
  margin: 10px;
}
#main {
  padding-left: 240px;
}
.amenu {
  background-color: #CCFFCC;
  color: #006600;
  font-weight: bold;
  display: block;
  padding: 5px;
  text-align: center;
  text-decoration: none;
}
.amenu:hover {
  background-color: #FFCCFF;
  color: #FF0000;
}

監修してくれたメンター

大堀 翔一郎（おおほりしょういちろう）

IT商社にてコーポレートサイト、ブランドサイトのディレクター兼デザイナー兼コーダー。

大学卒業後、WEB制作会社にでデザイナーとして入社し大手企業のサイト制作やブランドサイトの制作に携わってきました。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

CSSの擬似クラスhasの使い方を現役エンジニアが解説【初心者向け】

将来的に対応予定のCSSの擬似クラスhasの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSのスタイルが適用される順序と@importの関係を現役エンジニアが解説【初心者向け】

CSSのスタイルが適用される順序と@importの関係について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
CSS

デバイスに合わせたい！CSSのメディアタイプの使い方【初心者向け】

今回はCSSのメディアタイプについて説明をしていきます。デバイスに合わせてレイアウトを変えるために必要な知識なので、Webサイト制作に役立つでしょう。 そ...
CSS

CSSのhoverを使ってアニメーションを設定する方法【初心者向け】

今回はCSSのhoverを使ったマウスオーバー時にアニメーションを設定する方法を説明します。 アニメーションを使えばWebサイトの表現に幅が出るので、書き...
CSS

submitをCSSでおしゃれに設定する方法を現役エンジニアが解説【初心者向け】

submitをCSSでおしゃれに設定する方法について解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記...
CSS

先頭にマーカーを表示させよう！CSSのlist-styleの使い方【初心者向け】

今回の記事では、CSSでマーカー（リストの先頭の記号や数字）を設定するlist-styleについて解説します。 HTMLのリストを利用する際に、先頭に●や...
CSS

あわせてよく読まれている記事

JavaScriptでドロップダウンメニューを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでドロップダウンメニューを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次フローティングメニューとはフローティングメニューの書き方実際に書いてみよう監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ドロップダウンメニューを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ドロップダウンメニューとは 通常のメニューをクリックしたり、メニューにマウスをのせた時に再度メニューが下にドロップして、より細かいメニューが出てくるものです。 ドロップダウンとは、ドロップ（落とす）してダウン（下げ）させる、つまりメニューが上から落ちてくるイメージで表現されたものです。 ドロップダウンを別の言い方で「プルダウン」（プル＝引く）ともいいます。 上記の画像にマウスを合わせると「TechAcademyマガジン」サイトの上部にある項目からドロップダウンメニューが表示される様子がわかります。 ※ドロップダウンメニューを、メニュー以外で部品として使えるようにしたものが「ドロップダウンリスト」（またはプルダウンリスト）です。ドロップダウンリストは要素の右端にある「▼」などのボタンから、値を選択するリストを表示させます。また、値を編集できるドロップダウンリストをコンボボックスといいます。 ※HTML標準である部品としてのドロップダウンメニュー（セレクトボックス）については、解説記事「HTMLでドロップダウンメニューを表示する方法【初心者向け】」をご覧ください。 See the Pen js_ddmenu(non_css) by mentor-inoue-y (@mentor-inoue-y) on CodePen.   メニューの項目を作る（HTML） メニューを作成するには、まず骨組みとなる項目をHTMLで作ります。 ulタグを使ったリストに各項目をliタグで作成します。 ※ulタグとは、項目を並べたリストを作るためのHTML要素です。CSSによるスタイルを設定していなければ各項目の先頭にリストマーク「・」が付きます。 ※liタグとは、ulタグの中に入れるそれぞれの項目です。 See the Pen js_ddmenu_jQuery by mentor-inoue-y (@mentor-inoue-y) on CodePen. サンプルコード 以下のHTMLコードは、「はじめての方へ」からはじまる3つの項目を持つメニューを作る例です。 ソースコード <ul class="nav"> <li><a href="#">はじめての方へ</a> <ul> <li><a href="#">おすすめ</a></li> <li><a href="#">料金プラン</a></li>
JavaScript

CSSでアコーディオンメニューを作成する方法【初心者向け】

CSSでアコーディオンメニューを作成する方法について解説します。 アコーディオンメニューとは、楽器のアコーディオンのように伸縮する蛇腹が、メニューの内容を表示する処理を意味します。 アコーディオンメニューを利用することで、たくさんの情報の中から欲しい情報だけを見せることができる結果、ページ表示をスッキリすることができます。 実務でもアコーディオンメニューを利用することで、会社のホームページや、メディアコンテンツの各種メニューを必要なだけ表示することができ、非常に便利です。 目次 アコーディオンメニューとは アコーディオンメニューのメリット アコーディオンメニューのデメリット アコーディオンメニューの書き方 実際に書いてみよう   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSでアコーディオンメニューを作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   アコーディオンメニューとは クリックすると、隠れているメニューがアコーディオンのようにビヨンと伸びて表示されるメニューを見たことがありますか？ このようなものです。 実は、このようなメニューはjQueryを使わずに作ることができます。 See the Pen acordion by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. [PR] Webデザインで副業する方法とはアコーディオンメニューのメリット 必要な情報だけ掲載できる もしアコーディオンメニューを利用しない場合、次のように常時表示されます。 今回はアコーディオン1とアコーディオン2のみですが、アコーディオン10まであった場合、ページに必要以上の情報が表示されることになります。   これに対してアコーディオンを利用すると、アコーディオン2だけ表示したい場合、必要な情報だけを表示可能です。   たくさんの情報を掲載できる もしアコーディオンメニューを利用せずアコーディオン10まで表示しようとすると、メニューだけで膨大な表示になり現実的ではありません。 アコーディオンメニューを利用することで、アコーディオン10まで情報があったとしても、すべての情報をHTMLに実装しても、表示が少ないため問題ありません。   ページをスッキリ見せることができる アコーディオンメニューを利用することで、結果的にページをスッキリさせることができます。   アコーディオンメニューのデメリット アコーディオンメニューを利用するということは、対象のメニューを探すためにクリックしなければなりません。 クリック操作に慣れていないユーザーをターゲットにする場合は、アコーディオンメニューを利用しないことを検討すると良いかもしれません。   アコーディオンメニューの書き方 inputのcheckboxを用いて行います。 チェックボックスをクリックされたときに、アコーディオンの内容を表示するようCSSを書いていきます。 checkboxを普通のブロック要素のように書き換える チェックされた時、要素を表示するように書く ぬるっと動くように、transitionの値を書く この3点を押さえておけば大丈夫です。 ここでは、要素がチェックされたあと、それ以降の該当するすべてのクラスが高さを持つことで、アコーディオンのような動きを実現します。   実際に書いてみよう HTMLコード <div class="menu"> <label for="menu_bar01">アコーディオン１</label> <input type="checkbox" id="menu_bar01" /> <ul id="links01"> <li><a href="">Link01</a></li> <li><a href="">Link02</a></li> <li><a href="">Link03</a></li>
CSS

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次フローティングメニューとはフローティングメニューの書き方実際に書いてみよう監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。 そんな時に必要になってくるのがCSSです。 HTMLでCSSを読み込むためには、2つの方法があります。 今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次フローティングメニューとはフローティングメニューの書き方実際に書いてみよう監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLにCSSを適用（読み込み）させる方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSの読み込み方（適用方法） HTMLでCSSを読み込むためには、次の2つの方法があります。 外部CSSファイルをHTMLから読み込む方法 HTMLファイル内に直接CSSを記述する方法   1.外部CSSファイルを読み込む方法 外部CSSファイルを読み込む方法は、Webデザインの現場で一般的に使用されている方法です。 事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。 <link rel="stylesheet" href="sample.css"> HTMLファイルに上記のコードを1行追加することで、sample.cssという名称のファイルに記述されたCSS定義をHTMLに適用することができます。   また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイルの<head>タグ内に記述します。 以下のようにHTMLファイルに記述しましょう。 HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p>ここにHTMLの文章などが入ります</p> </body> </html> ここで、CSSファイル読み込み処理のhrefの値は、HTMLファイルとCSSファイルの配置場所によって変化するので気を付けましょう。 上記サンプルの場合は、HTMLファイルとCSSファイルは同じディレクトリに配置する必要があります。   また、HTMLファイルと同じディレクトリにcssというフォルダがあり、その中にsample.cssというファイルが配置されている場合、CSSファイル読み込み処理は以下のように記述します。 <link rel="stylesheet" href="css/sample.css">   2.HTMLファイル内に直接CSSを記述する方法 HTMLファイル内に直接CSSを記述する方法は、一般的にはほとんど使う機会の無い方法ですが、このような適用のさせ方もあります。 まず、以下のようにCSS定義を<style>タグの中に記述します。 <style type="text/css"> p { color : red; } </style>   用意した<style>タグは、HTMLファイルの<head>内に以下のように記述します。 HTML <html> <head> <meta charset="UTF-8"> <style type="text/css">p { color
HTML

jQueryでスムーススクロールを実装する方法【初心者向け】現役エンジニアが解説

JavaScriptのライブラリであるjQueryでスムーススクロールを実装する方法を紹介します。 ボタンを押したら特定の場所にスクロールさせるといった機能を簡単に実装できるので、ぜひ参考にしてみてください。 目次 スムーススクロールとは スムーススクロールの書き方 実際に書いてみよう   スムーススクロールとは スムーススクロールとは、ページ内をスクロールする挙動を指します。 Webページでよく、「Topに戻る」などのボタンを見ることが多いと思います。 それが、スムーススクロールという機能を使っているものです。 Webを閲覧している人を上手にWebページ内に誘導できるので、設置しておいた方が良いでしょう。   大石ゆかり 田島メンター！Topに戻るボタンだったり、ページ内の目次をクリックすると、ゆっくりとスクロールするサイトがあったのですが、jQueryを使用しているのでしょうか？ 田島悠介 animateメソッドを工夫して使用しているんだ。 大石ゆかり でも、位置とかどうやって取得しているんでしょうか？ 田島悠介 位置を取得する書き方っていうのがあるので大丈夫だよ。さっそくスムーススクロールを実現してみよう！   [PR] Webデザインで副業する方法とはスムーススクロールの書き方 スムーススクロールの書き方について紹介していきます。 JavaScriptのコード $(function(){ $('a[href^="#"]').click(function(){ let speed = 500; let href= $(this).attr("href"); let target = $(href == "#" || href == "" ? 'html' : href); let position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); });   解説 1行目の、$(function(){では、jQueryの無名関数を宣言しています。 ※無名関数についてはこちらの記事を参考にしていただくと良いですよ。 JavaScriptの無名関数について現役エンジニアが解説【初心者向け】
JavaScript

JavaScriptでオリジナルの右クリックメニューを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオリジナルの右クリックメニューを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 オリジナルの右クリックメニューを作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTML、CSSの準備 まずは、右クリックメニューの形を作成しましょう。通常、右クリックメニューは、一覧で出てくるかと思います。ですので、HTMLの要素としては、簡単に <body onContextmenu="return false;"> <div id="contextmenu"> <ul> <li>Menu A</li> <li>Menu B</li> <li>Menu C</li> </ul> </div> </body> そしてCSSは <style> #contextmenu{ display:none; position:fixed; left:0px; top:0px;
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSでフローティングメニューを作成する方法【初心者向け】