カテゴリー
Java

Java(Step2-2)

変数を使おう②

キーボードからの入力

変数を使うことの最大のメリットは、自由に値を入れたり出したりできることです。

外部コンソール設定

前回までは、デバックコンソールに実行結果は出力していましたが、これでは、キーボードからの入力を受け付けることができません。そのため、「launch.json」ファイルでコンソールの設定を変える必要があります。以下のように記述を変更または追記し、再設定しましょう。

"console": "externalTerminal"

すると、デバックを実行すると外部のコンソールに出力されます。

キーボードからの入力

キーボードからの2つの整数値を読み込んで、それらに加算、減算、乗算、除算を行った結果を表示しましょう。コードは以下に記します。

//ArthInt.java
//2つの整数値を読み込んで加減乗除した値を表示
import java.util.Scanner;

public class ArithInt {
    public static void main(String[] args){
        Scanner stdIn = new Scanner(System.in);
        System.out.println("xとyを加減乗除します");

        System.out.print("xの値:"); //xの値を入力
        int x = stdIn.nextInt(); //xに整数値を読み込む
        System.out.print("yの値:"); //yの値を入力
        int y = stdIn.nextInt(); //yに整数値を読み込む

        System.out.println("x + y = " + (x + y));
        System.out.println("x - y = " + (x - y));
        System.out.println("x * y = " + (x * y));
        System.out.println("x % y = " + (x % y));
        stdIn.close();
    }
}
ArthInt.java実行結果

キーボードからの読み込みにはいくつかの手順があるので、順を追って説明していきます。現時点では、こういう記述をするんだということを覚えておくだけで大丈夫です。

  1. プログラムの先頭に「import java.util.Scanner;」をプログラムの先頭(クラス宣言前に)置きましょう。
  2. mainメソッドの先頭に「Scanner stdIn = new Scanner(System.in);」を記述します。System.inは、キーボードと結びつく標準入力ストリーム(standard input stream)になります。
  3. キーボードからの読み込みを行う部分として「stdIn.nextInt();」を記述しましょう。このプログラムではint型整数値を読み込むように設定しています。

演算子とオペランド

今回のプログラムでも使っている演算を行う + や – などの記号を演算子(operator) と呼びます。演算の対象となる式をオペランド(operand)と呼びます。

たとえば、xとyを求める式x + yにおいて、演算子は + であり、オペランドは、x、yの2つになります。このように2つのオペランドを持つ演算子を2項演算子(binary operator)と呼ばれます。それ以外にも、オペランドが1つの単項演算子(unary operator)、3つの3項演算子(ternary operator)があります。

x + y
x – y
加減演算子(additive operator)
x * y
x / y
x % y
乗除演算子(multiplicative operator)
+x
-y
単項符号演算子(unary plus operator and unary minus operator)

単項保符号演算子を使ったプログラムの例は以下のようになります。

//Minus.java
//整数値を読み込んで符号を反転した値を表示
import java.util.Scanner;

public class Minus {
    public static void main(String[] args){
        Scanner stdIn = new Scanner(System.in);

        System.out.print("整数値:");
        int a = stdIn.nextInt(); //aに整数値を読み込む
        int b = -a; //aの符号を反転した値でbを初期化
        System.out.println(a + "の符号を反転した値は" + b + "です。");
        stdIn.close();
    }
}
Minus.java実行結果

基本型

ここまでのプログラムでは、int型の変数を使ってきました。Javaでは、多くの型があり、自分で型を作ることもできます。Javaで標準でサポートしている型を基本型(primitive type)と呼びます。以下に例を記しておきます。

整数型

整数を表し、代表的なのは以下の4つです。型によって表現できる数値の範囲が異なります。

  • byte…1バイト整数 -128 ~ 127
  • short…短い整数 -32,768 ~ 32,767
  • int…整数 -2,147,483,648 ~ 2,147,483,647
  • long…長い整数 -9,223,372,036,854,775,808 ~ 9,223,372,036,854,775,807
浮動小数点型

実数を表し、2つの型があります。

  • float…単精度浮動小数点数 ±3.40282347E+38 ~ ±1.40239846E-45
  • double…倍精度浮動小数点数 ±1.79769313486231507E+378 ~ ±4.9406564841246544E-324

実数の内部は浮動小数点数(floating point number)という形式で表現されます。また、3.14とか13.5といっ定数値は、浮動小数点リテラル(floating point literal)と呼びます。

この他に文字型(char)と論理型(boolean)がありますが、後のページで説明します。

実数値の読み込み

2つの実数値を加減乗除するプログラムを作りましょう。今回は実数を扱うdouble型を使って見ましょう。

//ArthDouble.java
//2つの実数値を読み込んで加減乗除した値を表示
import java.util.Scanner;

public class ArithDouble {
    public static void main(String[] args){
        Scanner stdIn = new Scanner(System.in);
        System.out.println("xとyを加減乗除します");

        System.out.print("xの値:"); //xの値を入力
        double x = stdIn.nextDouble(); //xに実数値を読み込む
        System.out.print("yの値:"); //yの値を入力
        double y = stdIn.nextDouble(); //yに実数値を読み込む

        System.out.println("x + y = " + (x + y));
        System.out.println("x - y = " + (x - y));
        System.out.println("x * y = " + (x * y));
        System.out.println("x % y = " + (x % y));
        stdIn.close();
    }
}
ArthDouble.java実行結果

注意点としては、double型の実数値を読み込むには、nextInt()ではなく、nextDouble()を使わなければいけないです。

fainal変数

次に、円の半径をキーボードから読み込んで、その円の円周の長さと面積を求めて表示するプログラムを作りましょう。

//Circle1.java
//円周の長さと円の面積を求める
import java.util.Scanner;

public class Circle1 {
    
    public static void main(String[] args){
        Scanner stdIn = new Scanner(System.in);

        System.out.print("半径:");
        double r = stdIn.nextDouble();

        System.out.println("円周の長さは" + 2 * 3.14 * r + "です。");
        System.out.println("面積は" + 3.14 * r * r + "です。");
        stdIn.close();
    }    
}
Circle1.java実行結果

円周率は3.14ではなく、無限に続く数値です。プログラム中に複数3.14を使っている箇所が場合によっては選択的な置換が要求されることもあります。そこで、効力を発揮するのが、値を書き換えることのできないfinal変数になります。次のプログラムはそれを使って書き換えたものになります。

//Circle2.java
//円周の長さと円の面積を求める
import java.util.Scanner;

public class Circle2 {
    public static void main(String[] args){
        final double PI = 3.1416;
        Scanner stdIn = new Scanner(System.in);

        System.out.print("半径:");
        double r = stdIn.nextDouble();

        System.out.println("円周の長さは" + 2 * PI * r + "です。");
        System.out.println("面積は" + PI * r * r + "です。");
        stdIn.close();
    }
}
Circle2.java実行結果

final変数を使うメリットは、以下の通りです。

  • 値の管理を一か所に集約できる

円周率の値3.1416は、final変数PIの初期化子となっています。もし、他の値に変える場合は、この一か所だけで済みます。

  • プログラムが読みやすくなる

プログラムの中では、数値ではなく変数名PIで円周率を参照できるので、プログラムが読みやすくなります。

また、final変数の名前は大文字とすることが推奨されています。普通の変数と見分けやすくするためです。加えて、初期化するのが原則です。

乱数の生成

キーボードから値を読みこむのではなく、コンピュータに値を作ってもらうことができます。以下のプログラムは、0~9までの数値から1つランダムに生成して表示しています。

//LuckyNo.java
//0~9のラッキーナンバーを乱数で作成
import java.util.Random;

public class LuckyNo {
    public static void main(String[] args){
        Random rand = new Random();

        int lucky = rand.nextInt(10); //0~9の乱数
        System.out.println("今日のラッキーNo." + lucky);

    }
}
LuckyNo.java実行結果

コンピュータがランダムに生成する値のことを乱数と言います。いくつかの手順があるので、順を追って説明していきます。

  1. プログラムの先頭に「import java.util.Random;」をプログラムの先頭(クラス宣言前に)置きましょう。
  2. mainメソッドの先頭に「Random rand = new Random();」を記述します。
  3. 「rand.nextInt(n);」を記述し、値の範囲を決めましょう。()内に入力した数値は、0以上n未満の数値になります。したがった、今回はnを10として値の範囲を0以上9以下で実現しています。

文字列の読み込み

ここまでは、数値を扱ってきましたが、文字列を扱うプログラムを作ってみましょう。名前を入力させて、それに対する挨拶を表示するようにしましょう。

//HelloNext.java
//名前を読み込んで挨拶する1
import java.util.Scanner;

public class HelloNext {
    public static void main(String[] args){
        Scanner stdIn = new Scanner(System.in);

        System.out.print("お名前は:");
        String s = stdIn.next(); //文字列を読み込む
        System.out.println("Hello" + s + "さん");
        stdIn.close();
    }    
}
HelloNext.java実行結果

組み込んだ文字列を格納する変数sの型は、String型になります。これは文字列を表すための型です。ただし、このプログラムでは、空白文字やタブ文字が文字列の区切りとみなされます。そのため、1行分の文字列入力を可能にするには、以下のようにnextLine()を使わなければいけません。

//HelloNextLine.java
//名前を読み込んで挨拶する2
import java.util.Scanner;

public class HelloNextLine {
    public static void main(String[] args){
        Scanner stdIn = new Scanner(System.in);

        System.out.print("お名前は:");
        String s = stdIn.nextLine(); //一行分の文字列読み込み
        System.out.println("Hello" + s + "さん");
        stdIn.close();
    }
}
HelloNextLine.java実行結果

文字列s1は、”ABC”で初期化され、その後”DEF”で代入されます。したがって、s1は”ABC”から”DEF”に変更されます。

以上で、キーボードからの読み込みが終わったので、次からはプログラムの流れの分岐を学んでいきましょう。

カテゴリー
Java

Java(Step2-1)

変数を使おう①

足し算や掛け算などの計算ができるプログラムを作成しながら、変数について学んでいきましょう。

変数

演算結果の出力

まずは、単純な結果を表示するプログラムを作ります。以下のコードを記述してみましょう。

//Sum1.java
//2つの整数値の和を表示

class Sum1{
    public static void main(String[] args){
        System.out.println(50 + 100);
    }
}
Sum1.java実行結果
数値の出力

System.outに続く、()の中に注目しましょう。50+100の演算結果が150となるプログラムです。前回のプログラムでは文字列を表示していましたが、整数値の表示を行っています。

整数のリテラル

100や50のような、整数を表す定数のことを整数リテラル(integer literal)と呼びます。100と書けば整数リテラル、”100″と書けば文字列リテラルになります。

文字列と数値の連結

先ほどの整数リテラルのプログラムに文字列を繋げたプログラムに改良してみましょう。以下にコードを記述しておきます。

//Sum2.java
//2つの整数値の和を表示

public class Sum2 {
    public static void main(String[] args){
        System.out.println("実行結果:"+(50 + 100));
    }
}
Sum2.java実行結果

処理の流れは以下のようになります。

  1. ()で囲まれた50+100の演算が行われます。()で囲まれた演算が優先的になるのは、日常での数学のルールと同じになります。
  2. 演算結果150が、文字列”150″として変換されます。
  3. 文字列 “実行結果:”と”150″が連結されます。そして、画面に表示されます。

もし、この(50+100)から括弧を取り除いたら、どうなるでしょうか。以下のプログラムを実行してみましょう。

//Sum3.java
//2つの整数値の和を表示(誤り)

public class Sum3 {
    public static void main(String[] args){
        System.out.println("50 + 100 =" + 50 + 100);
    }
}
Sum3.java実行結果

実行すると、50+100の和が50100になってしまいます。文字列の連結や数値の加算を行う+は、左から順に演算を行います。そのため、このプログラムでは、文字列”50+100=”に50という数値を文字列として”50+100=50″にしてから、100を”100″として連結しています。

加算の式で括弧を使わない場合は、以下のようにプログラムを書きます。

//Sum4.java
//2つの整数値の和を表示

public class Sum4 {
    public static void main(String[] args){
        System.out.println(50 + 100 + "は50と100の和です");
    }
}

加算の式で括弧を書かずとも記述できますが、完全に括弧を省略してしまうと、読みにくくなっていしまいます。プログラムに応じて適せん、使い分けていきましょう。

変数

これまでのプログラムでは、50と100の数値以外の和を求めることができません。そこで、値を自由に出し入れできる変数(variable)を使うと、色々なプログラムに対応できます。

変数の宣言

変数とは、値を格納する箱のような役割を持ちます。一度、値を入れておけば、その箱があるかぎり値が保持されます。また、値の書き換えや取り出しも自由に行えます。

プログラム中には、複数の変数を設定することができます。どれがどの変数なのか分けるために名前を与えます。これを変数の宣言と言います。この宣言によって、値を入れる箱を作り、何という箱なのか設定します。以下のようにコードで変数を宣言するものを宣言文(declaration statement)と言います。

 int x;  //xという名前のint型の変数の宣言

intは「整数」という意味のintegerからきています。この宣言でxという名の箱が作られます。変数xが扱えるのは、「整数」だけになります。intは(type)の1つで、文字や実数など別の値を入れたいときは、別の型を使わなければなりません。型の設定も宣言する際に重要になります。

変数をいれたプログラムは以下のように書くことができます。

//Variable.java
//変数に値を代入して表示
public class Variable {
   
    public static void main(String[] args){
        int x;  //xはint型の変数
        x = 100;  //xに100を代入
        System.out.println(x); //xの値を表示
    }
}
Variable.java実行結果
代入演算子

上のコードでは、変数xに100の値を代入していますが、=の部分は代入するための記号で、代入演算子(assignment operator)と呼ばれます。数学のようにxと100は等しいという意味ではないので、注意しましょう。

変数の値の表示

変数に格納されている値はいつでも取り出すことができます。

System.out.println(x); //xの値を表示

表示されるのは、xの値で変数名を表示するわけではないので、気をつけましょう。

次に、複数の変数を使ったプログラムに挑戦してみましょう。以下に示すのは2つの値の合計と平均を表示するプログラムです。

//SumAve1.java
//2つの変数xとyの合計と平均を表示

public class SumAve1 {
    
    public static void main(String[] args){
        int x;
        int y;

        x = 100;
        y = 50;

        System.out.println("xの値は" + x);
        System.out.println("yの値は" + y);
        System.out.println("合計は" + (x + y));
        System.out.println("平均は" + (x + y) / 2);
    }
}
SumAve1.java実行結果

上のコードでは、intxとyを別々に宣言していますが、以下のようにまとめることもできます。

int x,y;

しかし、1行ずつ宣言した方が、個々に扱えるので宣言の追加や削除も容易になります。

初期化を伴う宣言

変数に入れるべき値が分かっているなら、最初から変数に入れておくことも可能です。そのように修正したプログラムが次のようになります。最初に値を入れる事を初期化(initialize)と言います。また、その際に入れた値を初期化子(initializer)と呼びます。

//SumAve3.java
//2つの変数xとyの合計と平均を表示(変数初期化)

public class SumAve3 {
    public static void main(String[] args){
        int x = 100;
        int y = 50;

        System.out.println("xの値は" + x);
        System.out.println("yの値は" + y);
        System.out.println("合計は" + (x + y));
        System.out.println("平均は" + (x + y) / 2);
    }
}
初期化と代入

プログラムで行っている初期化と代入は、値を入れるという点では同じですが、タイミングが異なります。以下のように理解しましょう。

  • 初期化:変数を生成する時に値を入れる事
  • 代入:生成済みの変数に値を入れる事

次からはキーボードからの入力に取り組んでいきましょう。

カテゴリー
Java

Java(Step1-2)

画面に文字を表示しよう

Javaについて

Javaの誕生

1991年ごろにアメリカのSun Microsystems社が、家電製品用ソフトウェアの開発の為にプログラミング言語が作られ、改良が重ねられ、Javaになりました。注目された理由は、Webブラウザ上で動作する「アプレット」という小規模なプログラム開発ができたことでした。

Javaの特徴

  • 無料で提供される…Javaの開発ツールは無料で提供され、開発環境を準備しやすいです。
  • 一度作成すれば、どこでも実行できる…一般的には、プログラミング言語で作成したプログラムは、特定の機器や環境でのみ動作しますが、Javaで作成したプログラムは動作環境が整っていれば、どこでも動きます。
  • C言語やC++に似た構文…Javaの文法体系は、C言語やC++を参考に作られているので、それらの言語を経験していればとっつきやすいです。
  • 強い型付け…プログラムでは、整数、実数、文字などの多くのデータ型を扱います。各種の演算において、厳密に開発ツールでチェックされるので、信頼性の高いプログラムが作りやすいです。
  • オブジェクト指向プログラミングのサポート…クラスによるカプセル化、継承、多相性といったオブジェクト指向プログラミングを実現する技術がサポートされています。
  • 複数のライブラリ…Javaでは基本の機能がAPIとして多数、提供されているので、目的の処理を簡単に行うことが可能です。
  • ガーベジコレクションによる記憶管理…Javaでは、不要になったオブジェクトの開放処理が自動的に行われるので、オブジェクトの管理が簡単になります。
  • 例外処理… 予期せぬエラーなどの例外的な状況に遭遇した時の処理を、スムーズに行えるようになっているので、頑丈なプログラム開発ができます。
  • 並行処理…1つのプログラム内で、複数の処理を同時に実行できます。
  • パッケージによるクラスの分類…Javaのクラスをパッケージごとに分類でき、膨大な数のクラスを効率よく管理できます。

Javaの発展

Javaは、頻繁にバージョンアップを重ねており、開発容易性(EoD)を重視しています。特にバージョン1.2と5.0(1.5)では、文法体形が大きく変わり、沢山の機能が加わりました。

文字の出力

Step1-1で環境設定が済んでいるのなら、プログラムを作成して確認してみましょう。

プログラムの作成と実行

最初に作るのは、コンソール画面に文字を表示するプログラムになります。「Test.java」ファイルを作成し以下のようにソースを入力して見ましょう。

//画面への出力を行うプログラム

public class Test {
    public static void main(String[] args) {
        System.out.println("初めてのプログラム");
        System.out.println("Hello, World!");
    }
}

実行すると、次のようにコンソールに文字列が出力されます。

※プログラム中の余白や「”」などの記号は全角文字で打ち込まないように気を付けましょう。余白の部分は、スペース・タブ・エンターキーを用いて打ち込みます。

ソースプログラムとソースファイル

プログラムは文字の並びとして作成し、そのようなプログラムをソースプログラムと呼び、ソースプログラムを格納したファイルのことをソースファイルと呼びます。

ソースファイルは、classの後ろに書かれているクラスの名前(このプログラムではTest)に拡張子.javaを加えた名前とするのが原則です。したがって、ソースファイルの名前は、Test.javaとなります。

プログラムのコンパイルと実行

ソースプログラムを作成してもそのままでは実行できないので、2つの手順を実行する必要があります。

1.コンパイル

コンパイル(compile)とは、そのままでは実行できないソースプログラムを実行できる形式に変える作業になります。(バイトコードを生成する)

2.実行

コンパイルに成功したら、「.class」の拡張しを持つファイルが生成されるます。このファイルから、クラスを読み込んで実行します。

コメント(注釈)

先ほど、記述したプログラムに注目していきましょう。

// 画面への出力を行うプログラム

先頭にある連続する2個のスラッシュ記号「//」は、プログラムそのものではなく、プログラムに対してのコメント(comment)になります。コメントの内容はプログラム動作に影響を与えません。ここには、プログラムの読み手に伝えたいことを簡潔に記述しましょう。

コメントの記述方法は以下の3つがあります。

1.伝統的コメント(traditional comment)

コメントを「/*」と「*/」で囲みます。

/* 画面への出力を行うプログラム */

複数行にわたるコメントの記述に効果的な方法です。なぜ、伝統的かというと、C言語のコメント形式と同じで古くから使われているからです。

2.文書化コメント(documentation comment)

コメントを「/**」と「*/」で囲みます。

/** 画面への出力を行うプログラム */

伝統的コメントと同様に、複数行にわたってコメントが書けます。この形式のコメントから、プログラムの仕様書となるドキュメントを作成できます。

3.行末コメント(end of line comment)

「//」から、その行の末端までがコメントになります。

// 画面への出力を行うプログラム

複数行にわたってコメントできないので、短いコメントの記述に使います。

プログラムの構造

次にコメント以外のプログラム本体部分に注目していきましょう。

クラス宣言

上の図の青い部分はプログラム全体の骨組みになります。クラスという骨組みを宣言するということです。以下のように書くと覚えておけば、大丈夫です。

class クラス名{
    // mainメソッド他
}

クラス名の先頭文字は、大文字が基本となります。また、ソースファイルの名前は、大文字・小文字の区別を含めてクラス名と同一でないといけません。

mainメソッド

上の図の白い部分は、mainメソッドの宣言になります。「public static void…」の部分は後ほど説明しますが、この部分を決まり文句として覚えましょう。

public static void main(String[] args){
     // 行うべき処理
}

プログラムを起動して実行すると、mainメソッド中の(statement)が順に実行されます。

重要なことは以下の2つです。

  • Javaプログラムの本体はmainメソッドで、プログラム実行時には、文が上から順に実行される
  • 文は原則、セミコロンで終わる

文字列リテラル

コンソール画面に出力を行う文に注目しましょう。

 System.out.println("初めてのプログラム");
 System.out.println("Hello, World!");

最初に「初めてのプログラム」と「Hello, World!」に着目します。二重引用符「””」で囲んだ文字の並びを文字列リテラル(string literal)と呼びます。リテラルとは「文字通りの」という意味で、例えば文字列リテラル”あいうえお”は5個の文字の並びとして表されます。

コンソール画面への出力とストリーム

コンソール画面を含め、外部との入出力にはストリーム(stream)を利用します。ストリームとは文字が流れる川のようなものになります。

「System.out」は、コンソール画面と結びつくストリームであって、標準出力ストリーム(standard output stream)と呼ばれます。続く、「println」は、()内の内容を表示した後に改行を行います。図で表すと以下のようになります。

「println」のlnは、lineの略で行を表します。ただのprintでは、改行が行われません。このような依頼された処理を行うprintやprintlnは、プログラムの部品になります。これらをメソッド(method)と呼びます。

文字列の連結

複数の文字列リテラルを「+」で結んだら、連結されます。そのことをを利用して前のプログラムを書き直すと以下のようになります。

//画面への出力を行うプログラム

public class Test {
    public static void main(String[] args) {
        System.out.println("初めてのプログラム" + "Hello, World!");
    }
}

長くて一行に文字列の表示などには+を挟むことでわかりやすく記述できます。

改行

文字列リテラルには、改行文字を示す表記「\n」を埋め込むことができます。パソコンによっては、バックスラッシュ(\)が円記号(¥)として表示されることもありますがプログラムでは、別の文字として扱われます。以下のように記述します。

public class Test{
  public static void main(String[] args) {
    System.out.println("こんにちは\nJava!!");
  }
}
記号文字の読み方

他にもJavaのプログラムで利用する記号文字があるので、以下に記載しておきます。

記号読み方
+プラス符号 プラス たす
マイナス符号 マイナス ひく ハイフン
*アスタリスク かけ こめ
/スラッシュ
$ドル ダラー
%パーセント
.ピリオド ドット 小数点文字
,コンマ カンマ
:コロン ダブルドット
;セミコロン
一重引用符 シングルクォーテーション
二重引用符 ダブルクォーテーション
(左括弧 パーレン
)右括弧 パーレン
{左波括弧 ブレイス
}右波括弧 ブレイス
[左角括弧 ブラケット
]右角括弧 ブラケット
<小なり 左向き不等号
>大なり 右向き不等号
?疑問符 ハテナ クエスチョン
!感嘆符 ビックリ エクスクラメーション
&アンド アンパサンド
~チルダ ※JISコードでは、オーバーライン
オーバーライン 上線 アッパーライン
^アクサンシルコンフレックス ハット
#シャープ ナンバー
_アンダーライン 下線 アンダーバー
=等号 イコール
|縦線
バックスラッシュ ※JISコードでは¥
\円記号 円マーク

自由形式記述

まずは、以下のコードを見てください。実行結果は同じですが、読みにくいと思います。

 public class 
Test{
    public static
 void main(String[] 
  args) {
    System   .   out.
println("こんにちは\nJava!!");
  }
}

一部のプログラミング言語は、「プログラムの各行を、決められた桁位置から記述しないといけない」などの制約があります。しかし、Javaプログラムは制約を受けません。それは、自由形式(free formatted)が許されてるからです。ただ、若干の制限もあります。

  • 単語の途中にホワイトスペースを入れてはいけない
  • 文字列リテラルの途中で改行してはいけない

インデント

プログラムの構造を掴みやすくするためには、記述の際に読みやすくする必要があります。文を段落で管理するためにインデントを用います。文の左側に設ける余白をインデントと呼び、これを用いた記述をインデンテーション(段付けする、字下げする)と言います。

カテゴリー
Java

Java(Step1-1)

Javaの開発環境設定

まず、始めに開発できる環境を整えましょう。Javaの開発環境というと「eclipse」を使うことが多いですが、今回はVisual Studio Codeを使って説明していきます。

JDKのダウンロード

先にJDK(Java Development Kit)をダウンロードしておきましょう。これは、Javaで開発するために必要なソフトウェアをまとめたパッケージのことです。

以下のOracle社のURLからダウンロードしましょう。無償で提供されているので、誰でも使えます。

Oracle社JDKダウンロード

以下の画面になるので、「JDK ダウンロード」を選択しましょう。

次の画面でOSごとにダウンロードが分かれているので、自分のOSに合ったものを選択してダウンロードしましょう。macやwindowsは、「installer」と書かれたものをダウンロードしてください。ダウンロードが完了すると、インストールに移るので、画面の案内に沿ってそのままインストールしてください。保存先のパスが必要になるので、場所を覚えておくと良いでしょう。

Visual Studo Codeの設定

Visual Studo Codeを開きましょう。そして、拡張機能メニューから「Java Extension Pack」を検索してインストールしましょう。

「Java Extension Pack」内には6種類の拡張機能パックが含まれており、これらによって開発環境を設定します。

画面左下にある歯車マークをクリックし、表示される設定を選択しましょう。

下の図の画面が表示されるので、検索欄に「java home」と入力し、四角で囲まれた所の表示を探しましょう。そして、「settings.json」で編集を開きましょう。

開くと以下のコードが表示される画面になるのを確認してください。

この中の「“java.home”:””」に先ほどダウンロードしたJDKのパスを記述しましょう。

基本的には、以下のようになります。

  • Windowsの場合
"java.home": "C:/ProgramFiles/Java/(JDKフォルダ)"
  • Macの場合
"java.home": "/Library/Java/JavaVirtualMachines/(JDKフォルダ)/Contents/Home/"

この(JDKフォルダ)には、あなたがダウンロードしたJDKのバージョンによって変わります。

今回の場合は、以下のようなコードになっています。

"java.home": "C:/ProgramFiles/Java/jdk-14.0.2"

コードを変更したら、「setting.json」をしっかりと保存しておきましょう。その後、いったん「Visual Studo Code」を閉じて、再度開きましょう。

デバックの確認

再度、開いたら左下の歯車マークをクリックし、コマンドパレットを選択しましょう。「Shift + Command + P」キーを使っても開きます。

表示される検索欄から「Java: Create Java Project」を検索して選択しましょう。

プロジェクトを作成しますが、「No build tools」を選択します。その後、どのフォルダに保存するか聞かれるので、お好みの場所を選択してください。

その後、名前をつけてプロジェクトを保存します。今回は「Test」で作成しています。

実行すると新しいウインドウで「Test」プロジェクトが追加されるので、下の図のように「App.java」を選択してください。

そして、F5キーまたは、画面上の実行からデバックを開始してください。

この際に、左側に「launch.json」ファイルを作成するかどうか表示されるので、作成しますをクリックします。

すると、「launch.json」ファイルが新たに「Test」プロジェクト内に作成されます。

これで、いつでもF5キーでデバックの実行が可能になります。実行して、コンソールに「Hello World!!」が表示されたら、きちんと動作しています。

もし、コンソールに表示されない場合は以下のことを試してください。

launch.json」のコード内に「”console”:”internalConsole”」と記述して保存してください。これは、コンソールに出力結果を表示するという意味を持ちます。

ビルドの確認

デバックが正常に機能していることを確認したら、ビルドが機能するか確認しておきましょう。

メニューのターミナル→ビルドタスクの実行を選択しましょう。これで、ビルドが実行されます。初めての場合は、「tasks.json」ファイルを作成するか聞かれるので、作成を選び、再度実行しましょう。この時にエラーが出る場合は、パスの設定が上手くいっていない場合が多いです。

そのときは、環境変数の設定からパスが作成されているか、確認しましょう。

コントロールパネルから、環境変数の編集を開きましょう。すると、上記のような画面になるので、「Path」の項目を選択し、「編集」を選択しましょう。

この欄にJavaのjdkへのパスが含まれていない場合は「新規」で追加が必要です。今回は、ローカルディスク直下にプログラムファイルを置いているので、以下のように追加しています。「C:\Program Files\Java\jdk-14.0.2\bin」自分のJavaのjdkの位置をパスとして設定しましょう。「bin」を付けるのを忘れずに!

以上の設定をしたら、もう一度ビルドの実行をしてみましょう。

….java」ファイルと共に「….class」ファイルが作成されていたら、ビルドが正常に動いているということになります。

以上で、Javaの開発環境の設定が完了します。次からは、本格的にJavaについて解説していきます。

カテゴリー
HTML

HTML(Step4-3)

インターネットにデータをアップロード

HTML、CSS、画像の各ファイルの準備ができたら、サーバーにデータをアップロードしていきます。

具体的な手順はいかのようになります。

  1. レンタルしたサーバーのサイトにアクセスしてFTP情報を確認する
  2. FTPソフトの接続設定を行う
  3. FTPソフトからサーバーにアクセスする
  4. パソコン内に保存してある各ファイルをサーバーに転送する

アップロードに必要なもの

サーバーの準備

今回はお名前.comよりドメイン取得とサーバーをレンタルして設定していきます。自分のサーバーがある場合はそちらをお使いください。ドメインはあなたのホームページのアドレスになるので、自分のサイトに合ったものを取得しましょう。

FTPソフトの準備

FTPは、File Transfer Protocolの略で、インターネットを利用してファイル転送を行うための仕組みの総称になります。その仕組みに対応したソフトをFTPソフトと呼びます。

今回は「FFFTP」というソフトを使います。以下よりダウンロードできるので入れておきましょう。

https://forest.watch.impress.co.jp/library/software/ffftp/

FTP情報を確認する

FFFTPにサーバーへの接続情報を設定する必要があります。最初にお名前.comにアクセスして、「ホスト名」「ユーザー名」「FTPパスワード」などの情報を確認しましょう。

まずは、お名前.comにログインして、レンタルサーバーのページに飛びましょう。下の図のようにコントロールパネルにログインしましょう。

ログインできたら、以下のようなコントロールパネルのページが表示されるので、「FTP・SSHアカウント」を選択しましょう。

開くと、管理者アカウント接続状況が確認できると思います。ここで、「アカウント」「パスワード」「FTPサーバー名」の3つをメモしておきましょう。後々、必要になるので、間違えずに控えましょう。

FTTPを起動して接続設定

FTTPを起動すると以下のように画面が表示されるので、「新規ホスト」をクリックしましょう。

ホストの設定画面が開かれると思うので、先ほどの「アカウント」「パスワード」「FTPサーバー名」の3つを使うながら入力していきましょう。

①ホストの設定名

ここには任意の名称を入力します。どのサーバーかわかるように名前を決めておくとわかりやすいと思います。

②ホスト名(アドレス)

先ほどメモした「FTPサーバー名」を入力します。

③ユーザー名

先ほどメモした「アカウント」を入力します。

④パスワード/パスフレーズ

先ほどメモした「パスワード」を入力します。

入力が終わったら、OKを押して設定が完了します。

HTMLファイル他を転送する

設定が完了したら、サーバーにファイルを転送しましょう。下の図のように先ほど①で設定した名前が一覧に表示されるので、接続を選択しましょう。

接続が完了すると、下の図のように自分のPCにあるファイル等が左側に、サーバー側は右側に表示されます。

左側の自分のPC側から今回作ったフォルダを開きましょう。移動するファイル、フォルダを全て選択します。

選択したら、右クリックをアップロードを選択しましょう。アップロードが完了したら、右側のサーバー側にファイルが全て表示されていたら、サーバーに無事転送が終わったということです。

ホームページにアクセス

転送が終了したら、最後にブラウザで確認してみましょう。「http://」にサーバーをレンタルする際に取得したドメイン名を入力して検索しましょう。トップページである「index.html」が表示されていたら、ホームページの公開の完了です。

カテゴリー
HTML

HTML(Step4-2)

CSSファイル作成④

メニューページの設定

ブロックごとのスタイル

メニューページのメインコンテンツのスタイルを定義します。各ブロックの幅やマージンを設定し、左を基準に並べるのがポイントです。また、ブロックが4つ、入れ子の構造になっているので、気をつけましょう。

まずは、下の図よりメニュー画面の構造を確認しましょう。

メニュー品目のCSS

次にCSSのコード全体を確認してみましょう。追って各セレクタについて説明していきます。

/*メニューページ*/

#global_menu{
    width: 670px;
    float: left;
    margin-top: 30px;
    margin-right: 30px;
	}

#global_menu img{
	border: 3px #fff solid;
	}

.menu_box{
	width: 670px;
	clear:left; 
	}

.menu_block{
    width: 210px;
	float: left;
    margin-right: 13px;	
    margin-bottom: 10px;
    }
    
.menu_photo{
    margin-bottom: 10px;
    }
    
.menu{
	width: 210px;
	/*margin-right: 30px;*/	
    margin-bottom: 10px;
	}

.item_heading{
	font-weight: bold;
    margin-bottom: 10px;
    }
    
.price{
	font-size: 125%;
	margin-top: 5px;
	color: #ff0000;
    }

コンテンツ幅の設定

メニューページの基本設計を行った時に決めたglobal_menu、menu_box、menu_blockのそれぞれのコンテンツ幅を確認して、セレクタに反映させていきます。

global_menuとmenu_boxは670ピクセル

global_menuとmenu_boxセレクタは、メインコンテンツ幅の670ピクセルで指定しましょう。

#global_menu{
    width: 670px;
    float: left;
    margin-top: 30px;
    margin-right: 30px;
	}

.menu_box{
	width: 670px;
	clear:left; 
	}
menu_blockセレクタの幅とマージンを決める

menu_blockは、670ピクセルの中に3つ収め、それぞれにマージンを設定します。図にもあるように、次の計算で収まるようにしています。

「menu_blockの幅210ピクセル」×3+「menu_blockの右側マージン13ピクセル」×3=669ピクセル

.menu_block{
    width: 210px;
    float: left;
    margin-right: 13px;	
    margin-bottom: 10px;
    }

レイアウトの崩れを直す

メニューページのコンテンツは左寄せになるように設定していますが、menu_box内のmenu_blockはこの設定を外さないとレイアウトが崩れるので注意が必要です。解除するには以下のようにコードを記述します。

.menu_box{
	width: 670px;
	clear:left; 
	}
floatプロパティの扱い

floatプロパティは扱いが難しく、意図した通りにコンテンツを配置できないこともあります。思い通りにできない時は適宜、clearプロパティを上手に使い分けましょう。

  • clearプロパティで指定できる3つの値
プロパティ解説
clearboth全ての要素に対する回り込みの解除
left左寄せされた要素に対する回り込みの解除
right右寄せされた要素に対する回り込みの解除

アクセスページの設定

次にアクセスページのスタイルをCSSで定義しましょう。アクセスページも構造はメニューページと似ているので、設定する内容は多くはありません。

気を付けるのは、placeとmap_photoと幅を670ピクセルに合わせる事と、map_photoに埋め込む2種のマップとストリートビューの幅を調節しておくことだけです。

/*アクセスページ*/
#global_map{
    width: 670px;
    float: left;
    margin-top: 30px;
    margin-right: 30px;
    }
    
.map_box{
    width: 670px;
    clear:left;
    }

.map_block{
    width: 315px;
    float: left;
    margin-right: 13px;	
    margin-bottom: 10px;
}

.map_photo{
    width:670px;
    margin-bottom: 10px;
    }
    
.place{
	width: 670px;
      margin-bottom: 10px;
	}

プラグインの設定

TwitterとFacebookのウィジェット部分のレイアウトをCSSで設定します。ここのポイントは右寄せにすることです。

/*右サイドバー*/
#side_bar{
    margin-top: 30px;
	width: 260px;
	float: right;
    } 

side_barセレクタに対して、幅260ピクセルで指定しています。次のように幅を決めています。

「wrapperの幅960ピクセル」ー「global_mapの幅670ピクセル」ー「マージン30ピクセル」

フッターの設定

各ページで共通のフッターのレイアウトを定義していきます。まずは、フッターのCSS全体を確認してみましょう。

/* フッター */
footer:before{
    content: "";
    display: table;
    clear: both;
}

footer p{
    background: #666;
    width: 960px;
    margin: 50px auto 20px;
    padding: 5px;
    text-align: center;
    font-size: 80%;
}

footer p small{
        color: #ffffff;
        border: 1px #ffffff solid;
        padding: 20px;
        display: block;
    }

footer a{
	color: #ffffff;
	}
	
footer a:hover{
color:#b7b7b6;
}

float:rightで指定した右寄せの解除

side_barセレクタで指定した右寄せの設定「float:right」を解除しなければ、レイアウトが崩れるので、以下のように「clear:both」を指定します。

footer:before{
    content: "";
    display: table;
    clear: both;
}

フッターの領域

フッター内に<p>要素として記述した文字に対し、グレーの背景、幅、マージンを下の図のように指定しています。

footer p{
    background: #666;
    width: 960px;
    margin: 50px auto 20px;
    padding: 5px;
    text-align: center;
    font-size: 80%;
}

フッターの罫線装飾

フッターの縁の内側に白い罫線で装飾されるようにします。

footer p small{
        color: #ffffff;
        border: 1px #ffffff solid;
        padding: 20px;
        display: block;
       }  

p及びsmall要素に対し、子孫セレクタ「footer p small」を定義しています。この定義対象と先ほどのfooter pセレクタで指定している文字の対象が同じで、2重にスタイルを定義しています。これは、CSSの上書き特性があるからです。そのため、両方のスタイルが適用されるので、注意が必要です。

フッターの文字色

最後にフッターの文字色をマウスオーバーで変更できるようにしましょう。やり方は以前説明した疑似クラスhoverを使うだけです。

footer a{
	color: #ffffff;
	}
	
footer a:hover{
  color:#b7b7b6;
}

以上でCSSファイルが完成し、ホームページが完成できたと思います。次からは、サーバーへのアップロードを学び、公開できるようにしましょう。

カテゴリー
HTML

HTML(Step4-1)

CSSファイル作成③

ナビゲーションボタン設定

ここからはナビゲーションボタンの設定をしていきます。以下のCSSのコードを記述し、確認していきましょう。

/*ナビボタン*/

nav{
    margin-top: 10px
}

nav li{
	float: left;
    }

#nav1:hover{
	filter:alpha(opacity=60);
	opacity:0.6;
	}

#nav2:hover{
	filter:alpha(opacity=60);
	opacity:0.6;
	}
	
#nav3:hover{
	filter:alpha(opacity=60);
	opacity:0.6;
	}
	
#nav4:hover{
	filter:alpha(opacity=60);
	opacity:0.6;
	}

コンテンツ同士のマージン

始めにナビゲーションボタンを配置したnav要素のスタイルをCSSで設定していきます。まずは、コンテンツのマージンを考えましょう。

nav{
    margin-top: 10px
}

「header」下側マージン10ピクセル、「nav」上側マージン15ピクセルの指定だが、10+15で25ピクセルにはならずに相殺されて15ピクセルとなるので注意が必要です。ですから、どちらかにマージンを設定すれば良いということになります。

ボタン同士の隙間

CSSを設定していない状態では、ボタンとボタンの間に隙間があると思いますが、設定をすると以下のようになります。

CSSでは以下のように記述するだけで、隙間を詰めることができます。

nav li{
	float: left;
    }

「float:left」で指定することで、左詰めで横幅が許す限り画像が並んでいきます。しかし、「wrapper」は横幅960ピクセルで指定したので、ピッタリ収まるようになります。

マウスオーバーで色の変更

ナビゲーションボタンの上にマウスポインタをのせると色が変わり、離すと元の色になるように設定していきましょう。

HTMLファイルでは、「li id=”nav1″」から「li id=”nav4″」と設定してきました。この4つに対してのセレクタで、「hover」を追記し、文字色の変化を以下のコードのように記述します。

#nav1:hover{
	filter:alpha(opacity=60);
	opacity:0.6;
	}

#nav2:hover{
	filter:alpha(opacity=60);
	opacity:0.6;
	}
	
#nav3:hover{
	filter:alpha(opacity=60);
	opacity:0.6;
	}
	
#nav4:hover{
	filter:alpha(opacity=60);
	opacity:0.6;
	}

メインコンテンツの設定

ブロックごとのスタイル

ここでは、メインコンテンツのスタイルを定義していきますが、今までの基本をそのまま生かすだけです。以下にコード全体を記すので、順を追って説明します。

/* おすすめ情報*/

#global_info{
    width: 670px;
    float: left;
    margin-top: 30px;
    margin-right: 30px;
	}

#global_info img{
	border: 5px #fff solid;
	}

.info_photo01{
    width: 300px;
	float: left;
    margin-right: 30px;	
    margin-bottom: 30px;
    }
	
.info01{
    width: 340px;
	float: left;
	margin-bottom: 30px;
    } 

.info_photo02{
    width: 300px;
	float: left;
    margin-right: 30px;	
    margin-bottom: 30px;
    clear:left; 
    }
	
.info02{
    width: 340px;
	float: left;
	margin-bottom: 30px;
    } 
    
 .intro{
    width: 670px;
	float: left;
	margin-bottom: 30px;
	}

構造を確認しながら、進めていきましょう。

「global_info」のスタイルを定義
#global_info{
    width: 670px;
    float: left;
    margin-top: 30px;
    margin-right: 30px;
  }

「gloabal_info」では、HTMLファイルで配置した「div id=”global_info”」に対応する形でセレクタを定義します。スタイルでは、主にマージンと幅を決めています。右側に「side_bar」を配置するので、「float:left」で左に寄せておくことも忘れずに行いましょう。また、マージンとして30ピクセル空けておくことも必要です。

写真のフレーム
#global_info img{
	border: 5px #fff solid;
	}

次に「global_info img」を定義します。これは「global_info内のimg要素」にのみ適用する子孫セレクタで、borderで枠を設定します。

info_photo01のスタイルを定義
.info_photo01{
    width: 300px;
  float: left;
    margin-right: 30px;	
    margin-bottom: 30px;
    }

写真を配置している「div class=”info_photo01″」という要素に対し、セレクタを設定します。スタイルでは、幅とマージンの設定を基本設計で決めたサイズにしておきます。

見出しと文章のスタイル

文章部分の見出しと本文のスタイルを設定していきます。section要素に対し、「info01」というクラスセレクタを定義し、レイアウトを整えておきます。とくに見出しは大きく、表示し見やすいページを心がけましょう。

info01という名前でクラスセレクタを定義
.info01{
      width: 340px;
	float: left;
	margin-bottom: 30px;
    } 

文章内の340ピクセルは次のように算出しています。「#global_infoの幅670px」-「.info_photo01の幅300px」+「.info_photo01の右のマージン30px」=340px

同様にinfo02のセレクタも記述しておきましょう。

見出しのスタイルを定義
.item_heading{
  font-weight: bold;
    margin-bottom: 10px;
    }

HTMLファイルでは、p要素に「class=”item_heading”」を追記し、item_headingというクラスセレクタを設定しています。

このようにCSSでマージンを設定すれば、小見出しと本文の間に隙間を自由に設定できるます。

「おすすめ情報」のスタイル

「おすすめ情報」と書かれた部分のCSSを設定していきましょう。ここには、コンテンツの横幅と文字の左寄せ、下側の余白を設定するだけです。CSSソースも以下のようにシンプルになります。

.intro{
    width: 670px;
  float: left;
  margin-bottom: 30px;
  }

特に特別なことはしていませんが、sectionタグに「class=”intro”」を追記してintroというクラスセレクタを設定しています。

カテゴリー
HTML

HTML(Step3-4)

CSSファイル作成②

見出し(h1要素)のスタイル設定

「おすすめ情報」や「サイト紹介」といった見出しのスタイルを設定します。

  • HTMLソース
<div id="global_info">
            <h1>おすすめ情報</h1>
         <!--省略-->
</div>
  • CSSソース
#global_info h1{
    font-size: 125%;
    border-left: 10px #d95483 solid;
    padding-left: 10px;
    margin-bottom: 15px;
    }

子孫セレクタとして定義したh1要素

#global_info h1

#global_infoセレクタは、HTMLファイルの「div id=”global_info”」に対応するセレクタになります。そのため、このスタイルは「global_info内のh1要素にだけ適用」されるスタイルです。

フォントの大きさを指定

font-size:125%;

font-sizeプロパティでフォントの大きさを決めています。これは、「基本表示フォントに対し、125%の大きさで表示する」という意味になります。

文字の大きさを指定する方法

文字の大きさを指定するには、いくつか方法があるので、以下に記載しておきます。

絶対数値による文字サイズの指定

数値によって指定する場合は、次の単位を用いることができます。

  • px…ピクセル
  • pt…ポイント
  • pc…パイカ
  • in…インチ
  • cm…センチメートル
  • mm…ミリメートル
キーワード指定による文字の大きさ

キーワードを使っても文字の大きさを指定できます。

キーワードピクセル指定へ換算
xx-small9px
x-small10px
small12px
medium16px
large18px
x-large24px
xx-large32px

ボーダーを利用してアクセントを付ける

border-left:10px #d95483 solid;

見出し部分の左側に赤いアクセントがついていますが、周囲にボーダー(枠)を描くのが「border」プロパティです。今回は、左側のボーダーのみを10pxの太さで描いて、四角い図形のように見せています。

ボーダーの表示のさせ方

ボーダーは4辺全て指定によて表示させることができます。

プロパティ解説
border-right:値右ボーダーのみ表示
border-top:値上ボーダーのみ表示
border-bottom:値下ボーダーのみ表示
border:値4辺のボーダーを表示
ボーダーの種類

ボーダーは1本線以外にも、次のような指定ができます。

線種
solid1本線
double2本線
dashed破線
dotted点線
insetボーダー内領域がへこんで見える
outsetボーダー内領域が盛り上がって見える
grooveへこんで見える
ridge盛り上がって見える

パディング(余白)の設定

padding-left:10px;

paddingプロパティは、文字や画像とその周りのボーダーなどとの間に余白をつくるための指定になっています。

パディング(余白)の設定方法

paddingプロパティは次のように上下左右に指定することが可能です。

プロパティ解説
padding:値文字や画像の上下左右とボーダーとの余白
padding-top:値文字や画像の上側とボーダーとの余白
padding-bottom:値文字や画像の下側とボーダーとの余白
padding-right:値文字や画像の右側とボーダーとの余白
padding-left:値文字や画像の左側とボーダーとの余白

マージン(余白)の設定

margin-bottom:15px;

以前説明した、コンテンツごとに余白を設定するプロパティで、これを設定することで、読みやすいレイアウトをとることができます。

プロパティ解説
margin:値文字や画像の上下左右と他コンテンツとの余白
margin-top:値文字や画像の上側と他コンテンツとの余白
margin-bottom:値文字や画像の下側と他コンテンツとの余白
margin-right:値文字や画像の右側と他コンテンツとの余白
margin-left:値文字や画像の左側と他コンテンツとの余白

他ページのh1要素も同様に設定

#global_menu h1, #global_map h1

今回作成したページでは、メニューページ、アクセスページに対してもそれぞれ上記のセレクタを定義しています。このように記述することで各ページのh1要素をそれぞれ変更できるので、設定しておくと後から使いやすいです。

例えば、メニューページのh1要素のアクセントを緑色に変更したい場合は以下のように記述すれば変更できます。

#global_menu h1{
    font-size: 125%;
    border-left: 10px #1c781c solid;
    padding-left: 10px;
    margin-bottom: 15px;
  }

ヘッダーのレイアウト

ヘッダー要素のスタイル設定

ヘッダー部分のソースコードを以下のように記述して、確認していきましょう。

/* ヘッダー */
header{
    margin: 50px 0 15px;
    overflow: hidden;
	}
	
.logo{
	float: left;
	} 

#banner_list li img {
	vertical-align:bottom;
	}

header p{
	font-size: 125%;
	font-weight:bold;
	color:#670000;
	text-align: center;
      }
要素名の省略

CSSの要素の中でクラスセレクタは省略できるので、コード内もそのように記述しています。

  • 正式な記述方法
header.logo{
	float: left;
	} 
  • 要素名を省略した記述方法
.logo{
	float: left;
      } 

ヘッダーの上下にマージン設定

ヘッダー部分のスタイルをCSSファイルに記述してヘッダーの位置を確定させましょう。

ロゴの配置

現在のロゴの配置は以下のHTML部分とCSS部分で決定しています。

<a href="index.html" class="logo"><img src="images/logo.png" alt="サイトのロゴ" width="374" height="73"></a>
.logo{
	float: left;
   } 

この場合は、「left」なので、左に寄せるように設定しています。「right」で設定した場合には、以下のようになります。

ヘッダーのマージン

HTMLで配置したheader要素の上側に余白を設定し、ウインドウの枠との間にマージンを設定することで、全体のバランスを調整しましょう。以下のようにCSSコードを書いて調整しましょう。

header{
    margin: 50px 0 15px;
    overflow: hidden;
	}
フロート設定
overflow: hidden;

headerセレクタ内のoverflowプロパティについて説明します。ここでは、logoセレクタで記述した「float:left」の指定を解除するために書いています。「float:~」で要素を配置した場合、float指定を解除しないと後々のレイアウトに影響を与えてしまう可能性があるので、できるだけ記述しておきましょう。

ヘッダー内の文字スタイルを設定
header p{
	font-size: 125%;
	font-weight:bold;
	color:#670000;
	text-align: center;
      }

上記のようにheader内のp要素にだけスタイルを適用する子孫セレクタを指定しておきます。

  • font-weightプロパティでできる文字装飾の指定
プロパティ解説
font-weightnormal文字を通常の太さにする
bold文字を太くする
bolder文字を一回り大きくする
lighter文字を一回り小さくする
  • text-alignプロパティでできる行揃えの指定
プロパティ解説
text-alignleft左揃え
center中央揃え
right右揃え
カテゴリー
HTML

HTML(Step3-3)

CSSファイルの作成①

実際にCSSファイルを作成して今まで作成してきたHTMLファイルに適用していきましょう。

CSSのHTML適用方法

CSSで設定した内容をHTMLに適用するには3つの方法がありますので、順に紹介していきます。

リンク方式

HTMLファイルとは別にCSSだけを記述した「〇〇〇.css」という拡張しの付いたファイルを作成し、HTMLからリンクを貼ります。リンク方式では、1つのCSSファイルを複数のHTMLファイルに適用できるので、非常に管理がしやすいです。基本的にはこの方法でホームページを作成するのが良いでしょう。

記述は、<head>と</head>の間に<link rel=”stylesheet” href=”CSSのファイル名”>と記述します。今回作成したファイルは「style.css」というファイルを作成しています。以下のように記述します。

<!DOCTYPE html>
<html lang="ja"> 
<head>
    <title>portlander</title>
    <meta charset="UTF-8">
    <meta name="description" content="ポートランドにあるレストランを紹介するサイトです。">
    <meta name="keywords" content="ポートランド,レストラン">
    <link rel="stylesheet" href="style.css"> <!--リンクの記述-->
</head>

ヘッド<head>内に記述する方法

HTMLファイル内の冒頭に配置する<head></head>の間に記述する方式です。この方式は別途にCSSファイルを用意する必要がありません。記述する量が多いとHTMLファイル内のソースコードが長くなったり、複数のHTMLファイルの一括変更ができないので、注意が必要です。

以下のコードでは、<style type=”text/css”>というstyle要素を使い、<head>内に記述します。

<!DOCTYPE html>
<html="ja">

<head>
    <style type="text/css">
        h1{
            font: size 125%;
            font-weight: bold;
            color:blue;
            text-align: center;
        }
    </style>
</head>

ボディ<body>内に記述する方法

HTMLファイル内のコンテンツを配置する<body>と</body>の間に記述する方式です。HTMLタグにCSSを追記することで、直接スタイルを適用させます。該当する要素に一時的にスタイルを使いたい場合に使用します。

この方式では、「style=”プロパティ:値;”」を追記してスタイルを定義します。次の例は、<h1>タグに文字を青くするCSSを追記しています。

<body>
    <h1 style="color:blue">HTMLファイルのボディ内に記述する方式</h1>
</body>

HTMLファイルにCSSファイルをリンク

CSSファイルを作成する前に、「index.html」「munu.html」「access.html」の3ファイルに設定するCSSファイル名「style.css」のリンクを設定しましょう。

まずは、「index.html」を開いて<head>内にリンクタグを記述しましょう。CSSのファイル名は「style.css」としておきます。

<head>
    <title>portlander</title>
    <meta charset="UTF-8">
    <meta name="description" content="ポートランドにあるレストランを紹介するサイトです。">
    <meta name="keywords" content="ポートランド,レストラン">
    <link rel="stylesheet" href="style.css">
</head>

このリンク設定は、「menu.html」「access.html」に対しても同じ場所に記述しておきましょう。

これで、3つのファイルに対しての設定が終わったので、「style.css」という名前で新しいファイルを作成し、3つのファイルと同じ所に保存しておきましょう。

CSSの記述

ページ全体の背景や文字色を指定

最初に全てのページとコンテンツに共通して適用されるスタイルから決めていきます。以下のコードはbodyセレクタに記述する全文です。1つ1つ使い方を見ていきましょう。

body{
    background: #ebe6d3; 
    font: 16px/20px "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",'メイリオ',Meiryo,Helvetica,Arial,Sans-Serif;
    color: #666666;
     }
①bodyセレクタ

CSSでは、まずHTMLのbody要素(<body>)内の背景、文字の大きさ、色を決めていきます。

  • backgroundプロパティ
background: #ebe6d3;

「background」は、ページの背景を決まるプロパティになります。「#ebe6d3」は、何色にするのか、カラーコードを記述しています。これは、16進数のコードで指定していますが、Blueといった色名でも指定することができます。以下のページを見れば、色のコードを確認できるので参考にしてください。

原色大辞典

②背景画像を指定

今回は背景の画像を設定していませんが、以下のように記述することで、背景に画像を設定できます。

background: #ebe6d3 url(画像をリンクするパス) repeat-x; 

先ほど説明した背景色の指定の後に、urlを記述することでその画像を背景にできます。「repeat-x」は、画像の繰り返しを指定しており、これは、「x軸に方向に繰り返す」という意味になります。

画像の繰り返し設定は以下のようなものがあり、レイアウトによって使い分けましょう。

  • no-repeat 画像を繰り返さないで1回だけ表示
  • repeat-y 画像をy軸方向に繰り返す
  • repeat 画像をx軸とy軸方向に繰り返す
③フォントの大きさ、行間の指定
font: 16px/20px "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",'メイリオ',Meiryo,Helvetica,Arial,Sans-Serif;

fontプロパティは、<body>内の基本のフォントを設定して、サイズと行間を指定できます。「font:」の後に「フォントサイズ/行間」を記述します。この場合は、フォントサイズ16ピクセル、行間20ピクセルになります。

"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",'メイリオ',Meiryo,Helvetica,Arial,Sans-Serif

これらは、標準となるフォントを指定しています。各フォントは「,」で区切って記述します。またフォント名にスペースが含まれているものは、「””」で囲む必要があります。

④フォントの色を決める
color: #666666;

bodyセレクタで、colorプロパティで文字の色を定義できます。ここでは、16進数のコードでグレーを指定しています。何も設定しない場合は黒で表示されます。

リンクの文字色を指定する

リンクが設定してある文字の表示色は他の色にすると閲覧者から見たら分かりやすくなります。また、閲覧後の色を変える設定もしておきましょう。

aセレクタに色を設定する
a{
	color: #79a6d2;
	}

bodyセレクタと同様にaセレクタ内でcolorプロパティを定義しています。16進数のコードで「#79a6d2」は薄い青になります。

マウスオーバーの色を設定する
a:hover{
	color:#4080bf;
	}

以前、説明した疑似クラスを使用しています。hoverは、マウスカーソルがリンク文字に乗った状態を設定するものです。カラーは16進数のコードで「#4080bf」の濃い青色を指定しています。

コンテンツの表示幅とマージンを設定

HTMLを記述した際に<div id=”wrapper”>を記述しましたが、これに対応するセレクタがここで説明するwrapperセレクタになります。CSS側では、IDセレクタを使う際には「#」を使って記述する必要があります。

コードは以下のように記述します。

#wrapper{
    width: 960px;
    margin: 0 auto;
	}

wrapperセレクタを定義したら、幅を指定するためにwidthプロパティを追記します。ここでは、レイアウトを設計する際に決めた960ピクセルを指定します。

marginは、コンテンツやブラウザのウィンドウまでの余白を指定するプロパティです。指定は「margin:値」と記述します。値は以下のように指定方法が定められています。

  • 値…機能
  • auto…自動で設定される
  • 数値指定…ピクセルなど距離で指定
  • %…他との関係性で割合を指定

レイアウトによっては上下左右の距離を記述しなくても良く、次のようにまとめて指定もできます。

  • 上・下・左・右…margin:50px 20px 30px 30px
  • 上・左右・下…50px 30px 20px
  • 上下・左右…50px 20px
  • 上下左右…50px

「margin:0 auto;」では、上下のマージンはゼロで、左右は自動で設定になります。

また、次のような場合でもmarginプロパティで調整できるので、覚えておくと良いでしょう。

カテゴリー
HTML

HTML(Step3-2)

レイアウトを決めるCSSのルール

最近のホームページでは、基本の構成をHTMLで作成し、見た目や色などのデザイン部分を設定する方法が一般的になっています。

CSSが必要な理由

Cascading Style Sheets(CSS)は、ホームページのデザイン的な設定を記述するためにあります。例えば、背景の色、画像と文字の間隔、見出しと本文の間隔、文字の色や大きさなどのホームページの見え方「スタイル」を定義しています。

複数のスタイルなどを一括管理

現在作っているページはトップページ、メニューページ、アクセスページと3つのHTMLファイルがありますが、CSSファイルは「style.css」の1つだけで大丈夫です。このファイル1つで、全てのページの変更を行うことができ、非常に便利です。

細かなデザイン、レイアウトが可能

CSSを使うと、文字の間隔や画像の配置などをピクセル単位で決めることができます。HTMLでは不可能だったものも可能になります。

検索エンジン最適化(SEO)がやりやすい

レイアウト部分を全てCSSにすることで、HTMLファイル内の記述は簡潔になります。そのため、検索エンジンには文書の内容を理解させやすいので、SearchEngineOptimization(SEO)への効果が見込めます。

CSSとHTMLの関係性

HTMLとCSSの内容を見ながら、CSSで可能な設定を確認してみましょう。

サンプルページのHTMLとCSSを見比べ

「index.html」を開いて以下の各コードを確認してみましょう。

<div id=”wrapper”>タグとCSSの関係

このタグ内のコンテンツは960ピクセルの幅に設定しようと記述しました。

<body>
     <div id="wrapper">
     <!--全てのコンテンツを記述-->
     </div>
</body>

CSSのソースコードでは以下のように記述します。「”wrapper”」と定義されたものの横幅を960ピクセルに、上下のマージンを0にして、左右のマージンは自動になるように書かれています。

#wrapper{
    width: 960px;
    margin: 0 auto;
	}
<h1>おすすめ情報</h1>タグとCSSの関係

文頭に赤いラインのアクセントが入る「おすすめ情報」という見出しも、CSSで定義します。

<div id="global_info">
            <h1>おすすめ情報</h1>

CSSのソースコードでは以下のように記述します。

  1. 「global_info」内の「h1」は
  2. フォントのサイズを125%にし、
  3. 左側に10ピクセルのべた塗りの赤い境界線を入れ、
  4. 文字から10ピクセル離す
  5. 次の行とは15ピクセル離す
#global_info h1{
    font-size: 125%;
    border-left: 10px #d95483 solid;
    padding-left: 10px;
    margin-bottom: 15px;
    }
<img src=””>タグとCSSの関係

「おすすめ情報」内に配置している2枚の写真のフレームは白い枠になっています。これはCSSで付けています。

<div id="global_info">
            <h1>おすすめ情報</h1>
            <div class="info_photo01">
                <img src="images/thumbnail01.png" alt="Hair of the Dog Brewing Company" width="300" height="224">
            </div>

CSSのソースコードでは以下のように記述します。「global_info」内に「img」で配置した画像には幅が5ピクセルの白い境界線を付けるという意味になります。

#global_info img{
	border: 5px #fff solid;
	}

CSSの基本記述

CSS記述のルール

CSSを記述する場合の基本は、HTMLで記述した要素に対して、スタイルをルールに基づいて指定します。基本的には「セレクタ」「プロパティ」「値」の3つを組み合わせます。その際には、「#」「{}」「:」「;」などで区切るというルールがあります。

セレクタ{プロパティ:値;}

HTMLファイル内の<h1>要素に色を付けたい場合は、以下のように記述します。

  • HTMLソース
<h1>青い見出しの文字</h1>
  • CSSソース
h1{color:blue;}

この場合、h1=セレクタ、color=プロパティ、blue=値となり、HTMLファイル内の<h1>要素がすべて青色になります。

また、複数のプロパティを定義することもあります。

セレクタ{プロパティ:値; プロパティ:値; …}

先ほどの「#wrapper」がそれにあたります。

#wrapper{width:960px; margin:0 auto;}

1つのセレクタに「width」と「margin」というプロパティを記述しています。

それ以外にも複数のセレクタに同じスタイルを定義することもできます。

セレクタを「,」で区切って、複数個記述できます。

  • HTMLソース
<h1>青い見出しの文字</h1>
<h2>青い見出しの小文字</h2>
  • CSSソース
h1,h2{color:blue;}

このように記述することで、<h1><h2>に対して同じスタイルを設定できます。

「セレクタ」の種類

「セレクタ」にはいくつか種類があるので、使い分けて記述する必要があります。「基本的なセレクタ」「クラスセレクタ」「IDセレクタ」などについて説明します。

基本的なセレクタ

セレクタの前に「#」「.」などがついていないセレクタのことをいいます。HTML内に記述された複数ある指定要素に対し同じスタイルを使う場合に使用します。

  • HTMLソース
<h1>青い見出し</h1>
<h1>赤い見出しにしたい</h1>
  • CSSソース
h1{
   color:blue;
   }

この場合は、HTMLファイルのすべての<h1>要素が青になるように記述されています。

クラスセレクタ

同じセレクタに対し、複数の異なるスタイルを適用したい場合は、先頭に「.」(半角ピリオド)を付けた「クラスセレクタ」を記述します。「クラスセレクタ」に対応したタグをHTMLに記述する場合、タグの後に「class=””」を記述し、「””」内に「クラスセレクタ名」を記述しましょう。

  • HTMLソース
<h1 class="blue">青い見出し</h1>
<h1 class="red">赤い見出しにしたい</h1>
  • CSSソース
.blue{
      color:blue;
      }
.red{
      color:red;
     }

このように同じ<h1>タグでくくられていてもクラスセレクタを使って個別にデザインを変更することができます。

IDセレクタ

先頭に「#」がついたセレクタは、「IDセレクタ」と言われます。これは、ページ内の同名のセレクタを1か所だけ使えるセレクタになります。「index.html」内では、「wrapper」や「global_info」などがこれにあたります。

  • HTMLソース
<h1 class="blue">青い見出し1</h1>
<h1 id="red">赤い見出しにしたい</h1>
<h1 class="blue">青い見出し2</h1>
  • CSSソース
.blue{
      color:blue;
      }
#red{
     color:red;
     }

このように一回のみ使うとき「IDクラスタ」を使っていきましょう。そのために、しっかりとホームページの構造を先に練っておくことが重要です。

疑似セレクタ

「疑似クラス」というのは、HTMLで記述された「要素」が特定の状態になったら、別途定義したスタイルを適用するためのクラスになります。

例えば、ホームページに文字にリンク先を設定する場合です。リンク文字が薄い青色になっており、マウスが文字上に重なると濃い青色になるといった時です。

このような場合は以下のように記述します。

  • HTMLソース
<a href="index.html">Portlander</a>
  • CSSソース
a{
    color:blue
  }
a:hover{
          color:red
        }

<a href=~></a>タグで囲んだリンク文字(a要素)に対して定義しています。「a」は「基本的なセレクタ」になるので、a要素はすべて同じように適用されます。また、「a:hover」はマウスカーソルを重ねた状態を示す「疑似クラス名」になります。

要素名:疑似クラス名{プロパティ:値;}

a要素に追記できる疑似クラスは他に以下のようなものがあります。

  • a:link…リンク先のサイトが未訪問の場合の状況を示します。
  • a:visited…リンク先のサイトに過去にアクセスしたことがある場合の状況を示します。
  • a:active…クリック中の状況を示します。

子孫セレクタ

特定の要素に内包される子や孫の要素に対して、指定したスタイルを適用させます。

要素名 子要素名{プロパティ:値;}

例えば、<header>タグ内にあるp要素のスタイルを変えたい場合です。これを行うと<header>タグ外のp要素には適用されません。

  • HTMLソース
<header>
        <p>ポートランドのお洒落なレストラン</p>
</header>
  • CSSソース
header p{
            font: size 125%;
            font-weight: bold;
            color:blue;
            text-align: center;
        }

上記の場合、ヘッダー内のp要素に対し、文字の大きさを125%に拡大、太文字に色を青、文字はセンターに配置すると指定しています。

以上が各セレクタの簡単なルールになります。次からは、実際にCSSファイルを構築しながら進めていきましょう。