予習2日目:CSSの基礎とJavaの導入へ。

目次

学習時間について。

  • Day:2
  • Today:8h
  • Total:16h

ジムに行った以外は家の中。

今日の学習内容。

「CSS」セレクタ。

See the Pen css_practice by 林 慶典 (@egjuboey) on CodePen.

参照:セレクタ – CSS3リファレンス

「CSS」色の記法。

See the Pen css_color by 林 慶典 (@egjuboey) on CodePen.

16進数とカラーコードの関係が理解できた。

「CSS」ボックスモデル。

See the Pen css_layout_20200712 by Kiki Keiten (@egjuboey) on CodePen.

  • <div>はデフォルトでdisplay: block;(ブロックレベル要素)、 <span>はデフォルトでdisplay: inline;(インラインレベル要素)
  • <div>をインラインレベル要素の表示にしたい場合は、 display: inline; を指定する。逆に<span>をブロックレベル要素にするのであれば、display: block;を指定する
  • background 系のプロパティはpadding(内側の余白)にまで影響する
  • marginには、互いを相殺するという特別な処理が適用される(marginのみの性質&大きい方が優先)
  • padding: 上 右 下 左; という順番(上から時計回り)

「CSS」カラムレイアウト。

See the Pen css_column_20200712 by Kiki Keiten (@egjuboey) on CodePen.

  • 合計の幅が 100% のときは justify-content は無くてもOK
  • 横並びのレイアウトは、主に display: flex; を使用
    • その際は適切にwidthを設定する必要がある

「CSS」メニューボタン。

See the Pen css_menu_20200712 by Kiki Keiten (@egjuboey) on CodePen.

  • ボタンなどの横並びの場合は display: inline-block とした方が簡単
  • inline-block:ブロックレベル要素のように高さと幅を持ちながら、インライン要素のように左から右へ並んで表示される
  • position: fixed;を追加すると、ページをスクロールしても要素を同じ位置に

「CSS」古いブラウザでブロックレベル要素を横並びに。

See the Pen css_clear-property_20200712 by Kiki Keiten (@egjuboey) on CodePen.

  • float プロパティを利用するとブロックレベル要素を左寄せや右寄せにできる(left or right
  • clear プロパティは、直前のfloatを解除する
    • wrapper の height の値には依存しない

しかし、clear プロパティを与えた要素には margin-top が効かない。
解決策としてfloatされたメインとサイドバーの直下とフッターの間に、<div class="clear"></div> という空のdiv要素を挟み、これにclearの役目を担わせる。

overflowの本来の使用目的はスクロールバーの制御である。

ファイルパスについて。

ファイルパスには相対パスと絶対パスがある。

  • 相対パス:呼び出し元のファイル位置を起点にする
  • 絶対パス:ファイルが外部で公開されている場合に用いる

絶対パスの書き方はURLをそのまま記載するだけだが、相対パスはちょっと厄介。

ファイルが同じ階層にあれば、./を使用。

<img src="./images/image.jpg" alt="相対パス">

1つ上の階層に行って呼び出す場合は、../を使う。2つ上であれば、../../

<link rel="stylesheet" href="../css/style.css">

index.html というファイル名に限り、ファイル名の省略が可能。

<a href="./category">カテゴリーへのリンク</a>

Javaプログラムの作成。

public class Test {

    public static void main(String[] args) {
        System.out.println("Good morning");
        System.out.println("Hello");
        System.out.println("Good night");
    }
}
  • Javaのプログラムの1単位をクラスという
    • このプログラムのクラスはTest
  • mainは処理をまとめたものでメソッドという
    • この場合はメインメソッド
      • public static void main(String[] args)
  • System.out.printlnは処理=命令文。
    • 実行時は上から下に向かって、書かれた処理が順番に実行される(逐次)
  • {}:ブロック
  • インデントをして見やすく
    • Eclipseの場合、Command+Shift+Fで整理される
  • コメント://(単一行)、/* */(複数行)
    • 動作させたくない命令にも有効

なぜかエラーになる箇所があったが単純なミス。printlnprintInって書いてた。iじゃなくてLの方が正しい。読み方はプリントライン、プリントインだと思ってた。。(出力して改行するの意味)

  • コンパイルエラー:プログラマの書き間違いで実行できないもの
    • 半角英数で記述
      • ""やコメントで囲った箇所は全角でもOK
    • 全角スペースはダメ
    • ファイルにつけた名前とクラス名は一致させる
    • メインメソッド(main)は必ず記述
    • 行末のセミコロンを記述
    • クォーテーションや括弧の閉じを忘れない
  • 例外:処理するデータに問題があって発生するもの

コード共有サイトideoneについて。

Eclipseよりもシンプルで使いやすそう。開発環境を作らなくていいのは便利。

変数の宣言と代入。

  • 変数
    • int:数値型
    • String:文字列型
  • 変数に名前をつけることを宣言という
    • 小文字で命名
  • 宣言した変数にデータを入れることを代入という
public class Sample01 {

    public static void main(String[] args) {
        int number1;
        String str1;
        number1 = 1;
        str1 = "abc";
        System.out.println(number1);
        System.out.println(str1);
    }
}
  • int number1;(メインメソッドの1行目)とString str1;(〃の2行目)で変数を宣言
    • intStringは型
  • number1 = 1;(〃の3行目)str1 = "abc";(〃の4行目)で代入
    • 代入の処理には=を使用
  • 変数の宣言と代入は1行にまとめられる
    • 例: int number1 = 1;

変数を使う上での注意点

  • 変数名は自由につけることができる
    • わかりやすい変数名をつけることが重要(可読性)
  • プログラミングでは英語読みがデファクトスタンダード(事実上の標準ルール)
  • 計算過程を書いておくような定義の方がわかりやすい
    • 例:24 * 60 * 60 (1日の秒数)
  • コメントを添えておくと良い
  • スネークケースとキャメルケース
    • スネークケースの例:seconds_per_day
    • キャメルケースの例:secondsPerDay
  • 代入されているデータは上書き可能
    • 意味もなく同じ変数名を使い回すと、プログラムが意図しない動作をする危険がある
      • 明確な意図があるときのみ使用
  • intからStringには上書きできない
  • 変数名にできないもの
    • 数字から始まる変数名
      • 例:1abca1bcは可
    • ハイフン
      • 単語をつなげる場合は_を(アンダーバー)使用
    • 予約語(ifなど)

気になった点。

id属性とclass属性の使い分け。CSSを触っているときにほとんどid属性のものを見なかったので。
  • class属性:種別名を割り当てる(同じ属性値のものをいくつ書いても良い)
  • id属性:固有の名前を割り当てる(HTMLの中で同じ属性値のid属性を2つ以上書くことはできない)。また、idはclassよりも優先される。

全てclass属性で良い気がしてきた。ただ、id属性はページ内リンクには使える。

今日の反省と明日に向けて。

HTMLとCSSは昔に勉強したことがあって、それの振り返りだったのでサクサク進めた。そして、昨日の目標どおりJavaの触りに到達できました。だけど、覚えることばかりでちょっと退屈かな。明日中に制御構文までは行きたいところ。

3+

掲示板

ご意見・ご感想など自由に。

目次
閉じる