HTML:CSSで作成した多階層ドロップダウンメニュー

CSSだけで何階層でも可能なドロップダウンメニューを作成しました。また、transition を使って、アニメーション効果を出しています。 尚、作成に当たり下記のサイトを参考にさせて頂きました。ありがとうございました <(_ _)>

1.CSSだけで作る「多階層」なドロップダウンメニュー
2.シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー
3.アクセシビリティを考えたドロップダウンメニューを実装する
4.Bootstrap3のドロップダウンを多階層にする方法
5.すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ

 

menu.htm

<html>
<head>
<link rel="stylesheet" type="text/css" href="menu.css"/>
</head>
<body>
<div class="menu">
  <ul>
    <li>
      <a href="#">main menu 1</a>
      <ul>
        <li><a href="#">submenu 1-1</a>
          <ul>
            <li><a href="#">submenu 1-1-1</a></li>
            <li><a href="#">submenu 1-1-2</a></li>
            <li><a href="#">submenu 1-1-3</a></li>
          </ul>
        </li>
        <li><a href="#">submenu 1-2</a>
          <ul>
            <li><a href="#">submenu 1-2-1</a></li>
            <li><a href="#">submenu 1-2-2</a></li>
            <li><a href="#">submenu 1-2-3</a></li>
          </ul>
        </li>
        <li><a href="#">submenu 1-3</a>
          <ul>
            <li><a href="#">submenu 1-3-1</a></li>
            <li><a href="#">submenu 1-3-2</a>
              <ul>
                <li><a href="#">submenu 1-3-2-1</a></li>
                <li><a href="#">submenu 1-3-2-2</a></li>
                <li><a href="#">submenu 1-3-2-3</a></li>
              </ul>
            </li>
            <li><a href="#">submenu 1-3-3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">main menu 2</a>
      <ul>
        <li><a href="#">submenu 2-1</a></li>
        <li><a href="#">submenu 2-2</a>
          <ul>
            <li><a href="#">submenu 2-2-1</a></li>
            <li><a href="#">submenu 2-2-2</a></li>
            <li><a href="#">submenu 2-2-3</a></li>
          </ul>
        </li>
        <li><a href="#">submenu 2-3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">main menu 3</a>
      <ul>
        <li><a href="#">submenu 3-1</a></li>
        <li><a href="#">submenu 3-2</a></li>
        <li><a href="#">submenu 3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>
 

 

menu.css

.menu {
  margin: 0 auto;
  width: 600px;  //メインの項目数×liのwidth;
}

.menu ul {
  margin: 0;
  padding: 0;
  z-index: 1000;
  list-style: none;
}

.menu ul li {
  position: relative;
  float: left;
  width: 200px;
  height: 30px;
  line-height: 30px;
  background: black;
}

.menu ul li a {
  display: block;
  color: white;
  font-family: 'MS Gothic';
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.menu ul li:hover > a {
  color: gold;
  background: #303030;
}

.menu ul li ul {
  position: absolute;
}

.menu ul li ul li {
  overflow: hidden;
  height: 0;
  background: #505050;
}

.menu ul li:hover > ul > li {
  overflow: visible;
  height: 30px;
  transition: 0.5s;
}

.menu ul li ul li a {
  background: #505050;
}

.menu ul li ul li ul {
  top: 0;
  left: 100%;
}

.menu ul li ul li ul:before {
  position: absolute;
  top: 10px;
  left: -15px;
  content: "";
  border: 5px solid transparent;
  border-left-color: silver;
}
 

HTML:インラインフレーム

iframe(インラインフレーム)

Character Set を UTF-8 で指定した場合は、HTML ファイルを UTF-8 フォーマットで保存すること。

 

iframe.htm

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
iframe
</title>
<link rel="stylesheet" type="text/css" href="iframe.css">
</head>
<body>
  <iframe src="header.htm" id="header"></iframe>
  <div id="frame">
    <iframe src="left.htm" id="left"></iframe>
    <div id="container">
      <iframe src="content.htm" id="content"></iframe>
    </div>
    <iframe src="right.htm" id="right"></iframe>
  </div>
  <iframe src="footer.htm" id="footer"></iframe>
</body>
</html>
 

 

iframe.css

body {
  margin: 0px;
  padding: 0px;
}

iframe {
  border: none
}

#header {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 50px;
}

#frame {
  position: absolute;
  top: 50px;
  bottom: 50px;
  width: 100%;
}

#left {
  position: absolute;
  left: 0px;
  width: 150px;
  height: 100%;
}

#container {
  position: absolute;
  left: 150px;
  right: 150px;
  height: 100%;
}

#content {
  width: 100%;
  height: 100%;
}

#right {
  position: absolute;
  right: 0px;
  width: 150px;
  height: 100%;
}

#footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 50px;
}
 

 

header.htm

<html lang="ja">
<head>
<meta charset="utf-8">
<title>
header
</title>
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<h1>
header
</h1>
</body>
</html>
 

 

header.css

body {
  text-align: center;
  background: #888fff;
  overflow: hidden;
}
 

 

left.htm

<html lang="ja">
<head>
<meta charset="utf-8">
<title>
left
</title>
<link rel="stylesheet" type="text/css" href="left.css">
</head>
<body>
<h1>
left
</h1>
<div id="sidemenu">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</div>
</body>
</html>
 

 

left.css

body {
  text-align: center;
  background: #555fff;
  overflow: hidden;
}

#sidemenu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#sidemenu li a {
  display: block;
  margin: 0px;
  padding: 0px;
  width: 130px;
  height: 25px;
  color: #000000;
  font-family: 'MS Gothic';
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
  background: gold;
  border: 1px solid black;
}

#sidemenu li a:hover {
  background: silver;
}
 

 

content.htm

<html lang="ja">
<head>
<meta charset="utf-8">
<title>
content
</title>
<link rel="stylesheet" type="text/css" href="content.css">
</head>
<body>
<h1>
content
</h1>
<p>
本文<br>
本文<br>
本文<br>
本文<br>
本文<br>
</p>
</body>
</html>
 

 

content.css

body {
  //text-align: center;
  //background: #888fff;
}
 

 

right.htm

<html lang="ja">
<head>
<meta charset="utf-8">
<title>
right
</title>
<link rel="stylesheet" type="text/css" href="right.css">
</head>
<body>
<h1>
right
</h1>
</body>
</html>
 

 

right.css

body {
  text-align: center;
  background: #555fff;
  overflow: hidden;
}
 

 

footer.htm

<html lang="ja">
<head>
<meta charset="utf-8">
<title>
footer
</title>
<link rel="stylesheet" type="text/css" href="footer.css">
</head>
<body>
<h1>
footer
</h1>
</body>
</html>
 

 

footer.css

body {
  text-align: center;
  background: #888fff;
  overflow: hidden;
}
 

 


参考サイト

 

HTML:ヘッダーとサイドバーを固定するためのCSS

ヘッダーとサイドバーを固定するためのCSSを紹介します。

 

sample.htm

<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css"/>
</head>
<body>
<div id="header">
header
</div>
<div id="sidebar">
sidebar
<p>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
</p>
</div>
<div id="content">
content
<p>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
</p>
</div>
</body>
</html>
 

 

sample.css

body {
  margin: 0px;
  padding: 0px;
  color: black;
  font-family: 'Consolas','Verdana','Times New Roman','MS Gothic','Meiryo';
  font-size: 11pt;
  line-height: 150%;
  text-align: center;
  background-color: #888fff;
}

#header {
  position: fixed;
  width: 100%;
  height: 70px;
  margin: -111px 0px 0px;
  padding: 20px 0px;
  border: 1px solid royalblue;
  border-radius: 10px;
  background-color: blue;
  z-index: 1000;
}

#sidebar {
  position: fixed;
  width: 100px;
  margin: 0px;
  padding: 20px 50px;
  border: 1px solid royalblue;
  border-radius: 10px;
}

#content {
  position: relative;
  width: auto;
  margin: 111px 0px 0px 201px;
  padding: 20px 50px;
  border: 1px solid royalblue;
  border-radius: 10px;
  text-align: left;
}
 

参考サイト

HTML:inurlを使ったサイト内検索

Googleのinurl(URLに含まれる文字列)を使ったサイト内検索方法です。

 

search.htm

<html>
<body>
<form action="http://www.google.com/search" target="_blank">
<input type="hidden" name="hl" value="ja">
<input type="text" name="hq" value="inurl" size="50">
<input type="text" name="q" value="keyword" size="50">
<input type="submit" value="search">
</form>
</body>
</html>
 

 

〈使い方〉
一つ目のテキストフィールドにinurl(例えば、xxxxx.hatenablog.com/)を入力し、二つ目のテキストフィールドに検索したいキーワードを入力します。


参考サイト

 

手続き型プログラミングとオブジェクト指向プログラミングの違い

手続き型プログラミングでは、関数が関数外部の変数に依存しないのに対し、オブジェクト指向プログラミングでは、関数(メンバー関数、メソッド)が関数外部の変数(メンバー変数、フィールド)に依存します。
言い換えると、手続き型プログラミングでは、関数の出力が入力だけで決まるのに対し、オブジェクト指向プログラミングでは、関数の出力が入力だけではなく状態(メンバー変数、フィールド)にも依存します。(図1及び図2参照)

   入力:読み込みのみ可。(read)
   状態:読み込み・書き込み可。(modify)
   出力:書き込みのみ可。(write)

注)オブジェクトは、変数(状態)とその変数を操作する関数(動作)の集まりです。



図1.手続き型プログラミングにおける関数

┌────┐   ┌────┐   ┌────┐
│ 入力 │──→│ 関数 │──→│ 出力 │
└────┘   └────┘   └────┘
 



図2.オブジェクト指向プログラミングにおける関数

         ┌────┐         
         │ 状態 │         
         └────┘         
           ↓↑           
┌────┐   ┌────┐   ┌────┐
│ 入力 │──→│ 関数 │──→│ 出力 │
└────┘   └────┘   └────┘
 



例えば、次の例のようにオブジェクト指向プログラミングでは、呼び出すごとに異なる結果を出力する関数を作ることもできます。これは、関数が状態にも依存しているからです。

 

example.java

class A {
  int i;
  int count() {
    return ++i;
  }
}

class Main {
  public static void main(String... args) {
    A a = new A();
    System.out.println(a.count());
    System.out.println(a.count());
    System.out.println(a.count());
    System.out.println(a.count());
    System.out.println(a.count());
  }
}
 



注)C言語において、グローバル変数や参照渡しされるローカル変数、関数内部のstatic変数は、いずれも状態を表します。

注)手続き型プログラミングとオブジェクト指向プログラミングは、どちらが優れているという訳ではありません。それぞれ状況に応じて使い分ける必要があります。


参考サイト

 

Swiftによるオブジェクト指向プログラミング

Swiftによるオブジェクト指向プログラミングです。

 

robot.swift

class Robot {
  //var (x, y) = (0.0, 0.0)

  var (x, y):(Double, Double)

  var position:(Double, Double) {
    set(parameter) {
      (self.x, self.y) = (parameter.0, parameter.1)
    }

    get {
      return (x, y)
    }
  }

  init(x:Double = 0, y:Double = 0) {
    (self.x, self.y) = (x, y)
  }

  func move(dx:Double, dy:Double) {
    x += dx
    y += dy
  }

  func show() {
    print(x, y)
    print("x = \(x)")
    print("y = \(y)")
    print("(x, y) = \(x, y)")
  }
}

var robot0 = Robot()
robot0.position = (0, 0)
print(robot0.position)
robot0.move(dx:1, dy:1)
robot0.show()

var robot1 = Robot(x:0, y:0)
robot1.move(dx:1, dy:1)
robot1.show()
 

参考サイト