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="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">メニュー４</a></li>
<li><a href="#">メニュー５</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

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

 

sample.htm

<html>
<head>
<style>
body {
  margin: 0px;
  padding: 100px 0px 0px 200px;
}
#header {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  text-align: center;
  background-color: #888fff;
}
#sidebar {
  left: 0px;
  padding-top: 10px;
  width: 200px;
  height: 100%;
  text-align: center;
  background-color: #fff888;
}
#content {
  overflow: auto;
  padding-top: 10px;
  padding-left: 20px;
  background-color: silver;
}
@media screen {
  #header {
    position: fixed;
  }
  #sidebar {
    position: fixed;
  }
}
</style>
</head>
<body>
<div id="header">
  <h1>header</h1>
</div>
<div id="sidebar">
  <h1>sidebar</h1>
</div>
<div id="content">
  <h1>content</h1>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
  <p>Hello!</p>
</div>
</body>
</html>

参考サイト

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/）を入力し、二つ目のテキストフィールドに検索したいキーワードを入力します。

参考サイト

 

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

Swift では、クラス（class）は参照型（reference type）、構造体（struct）は値型（value type）です。

robot.swift


class Robot {
  static let version = "Robot1.0"
  var (x, y):(Double, Double)
  var location:(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 =",x)
    print("y =",y)
    print("(x, y) = (\(x), \(y))")
  }
}

print(Robot.version)

let robot0 = Robot()
robot0.location = (0, 0)
print(robot0.location)
robot0.move(dx:1, dy:1)
robot0.show()

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

 

〈コンパイルと実行〉


$ swiftc -O robot.swift -o robot
$ ./robot

 

参考サイト

 

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

Javaのクラスは参照型（reference type）です。

注）Javaのローカル変数は、明示的に初期化しなければなりません。
注）Javaのメンバー変数は、明示的に初期化しなくても暗黙的にデフォルト値（default value）で初期化されます。

 

robot.java

class Robot {
  private double x, y;

  Robot() {
    set(0, 0);
  }

  Robot(double x, double y) {
    set(x, y);
  }

  void set(double x, double y) {
    this.x = x;
    this.y = y;
  }

  double getX() {
    return x;
  }

  double getY() {
    return y;
  }

  void move(double dx, double dy) {
    x += dx;
    y += dy;
  }

  void print() {
    System.out.println("x = " + x);
    System.out.println("y = " + y);
  }
}

 

main.java

class Main {
  public static void main(String... args) {
    Robot robot1 = new Robot();
    robot1.move(1, 1);
    robot1.print();
    System.out.println("x = " + robot1.getX());
    System.out.println("y = " + robot1.getY());

    Robot[] robot2 = new Robot[]{new Robot(), new Robot()};
    for (Robot robot : robot2) {
      robot.move(1, 1);
      robot.print();
    }

    int n = 10;
    Robot[] robot3 = new Robot[n];
    for (int i = 0; i < robot3.length; i++) {
      robot3[i] = new Robot(0, 0);
      robot3[i].move(i, i);
      robot3[i].print();
    }
  }
}

 

コンパイル

javac0.bat（ファイル名をjavac.batにすると暴走します）

set JAVA_HOME=D:\sdk\jdk
set path=%path%;%JAVA_HOME%\bin
javac *.java

 

実行

java0.bat（ファイル名をjava.batにすると暴走します）

set JAVA_HOME=D:\sdk\jdk
set path=%path%;%JAVA_HOME%\bin
java Main
pause

継承

 

inheritance.java

class Position {
  double x, y;

  Position() {
    set(0, 0);
  }

  Position(double x, double y) {
    set(x, y);
  }

  void set(double x, double y) {
    this.x = x;
    this.y = y;
  }
}

class Robot extends Position {
  Robot() {
    super();
  }

  Robot(double x, double y) {
    super(x, y);
  }
}

class Main {
  public static void main(String... args) {
    Robot robot0 = new Robot();
    System.out.println("x = " + robot0.x);
    System.out.println("y = " + robot0.y);

    Robot robot1 = new Robot(1, 1);
    System.out.println("x = " + robot1.x);
    System.out.println("y = " + robot1.y);
  }
}

packageの作成とimport

 

packageの作成

D:\pkg\pkg1\pkg2\pkg3\Hello.java

package pkg1.pkg2.pkg3;

public class Hello {
  public Hello() {
    System.out.println("Hello!");
  }
}

 

packageのコンパイル

D:\pkg\javac0.bat（ファイル名をjavac.batにすると暴走します）

set JAVA_HOME=D:\sdk\jdk
set path=%path%;%JAVA_HOME%\bin
javac D:/pkg/pkg1/pkg2/pkg3/*.java

 

JARライブラリの作成

D:\pkg\jar0.bat（ファイル名をjar.batにすると暴走します）

set JAVA_HOME=D:\sdk\jdk
set path=%path%;%JAVA_HOME%\bin
jar cfv lib.jar pkg1

注）jar cfv lib.jar D:/pkg/pkg1 とするとうまくいきません！


Mainクラスの作成（packageのインポート）

D:\src\main.java

import pkg1.pkg2.pkg3.Hello;

class Main {
  public static void main(String... args) {
    new Hello();
    //new pkg1.pkg2.pkg3.Hello();
  }
}

 

Mainクラスのコンパイル

D:\src\javac0.bat（ファイル名をjavac.batにすると暴走します）

set JAVA_HOME=D:\sdk\jdk
set path=%path%;%JAVA_HOME%\bin
javac -cp D:/pkg *.java

 

Mainクラスの実行

D:\src\java0.bat（ファイル名をjava.batにすると暴走します）

set JAVA_HOME=D:\sdk\jdk
set path=%path%;%JAVA_HOME%\bin
java -cp .;D:/pkg Main
pause

 

Mainクラスのコンパイル（JARライブラリを使った場合）

D:\src\javac0j.bat（ファイル名をjavac.batにすると暴走します）

set JAVA_HOME=D:\sdk\jdk
set path=%path%;%JAVA_HOME%\bin
javac -cp D:/pkg/lib.jar *.java

 

Mainクラスの実行（JARライブラリを使った場合）

D:\src\java0j.bat（ファイル名をjava.batにすると暴走します）

set JAVA_HOME=D:\sdk\jdk
set path=%path%;%JAVA_HOME%\bin
java -cp .;D:/pkg/lib.jar Main
pause
Accessibility
　access modifier　 　same class　 　same package　 　subclasses in other package　 　from anywhere　
public ○ ○ ○ ○
protected ○ ○ ○ ×
no modifier ○ ○ × ×
private ○ × × ×

参考サイト