Bootstrapについて
BootstrapとはCSSのフレームワークであらかじめ枠組みやスタイルなどがある程度決まっているライブラリです。
以前作ったホームページはCSSでデザインを1から書いてましたが、Bootstrapを使うと大元となる部分が用意されているため、格段に早く見栄えが整ったページがデザインできるとのこと。
非常に便利ですね。
またBootstrapはレスポンシブデザインに対応しているという点でも便利です。
レスポンシブデザインとはスマホやタブレット、デスクトップなどそれぞれの画面サイズに合わせて横並びにしたり縦並びにしたりを自動的に調節してくれるデザインです。
通常デスクトップ用とスマホ用のデザインは別々に作らなきゃいけないがBootstrapなら手軽に出来てしまいます。
これは本当に便利だ…
Bootstrapを使うためにはまずHTMLでBootstrapを読み込んであげる必要があります。
Bootstrapのホームページでファイルをダウンロードして所定のディレクトリに保存します。
次にHTMLのhead部分に以下の文を追加します。
<head> <meta charset="uft-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>うさげのカレーサイト</title> <meta name="description" content="様々な種類のカレーについて紹介しているサイトです。"> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- jQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="js/bootstrap.min.js"></script> </head>
ちなみに「meta name="viewport" content="width=device-width, initial-scale=1"」はレスポンシブデザインを使うために必須のmetaタグだそうです。
ここのポイントとしてBootstrapのJavaScriptよりも先にjQueryを読み込みます。
そうしないとBootstrapのJavaScriptが作動しなくなってしまいます。
これでBootstrapを使う準備が整いました。
基本的なデザインの仕方としてはそれぞれのタグに適用させたいデザインのクラスをつけるだけです。
例えば
<p class="h1">あいうえお</p> <p class="h2">ABCD</p>
という風にすると一般的に「h1」タグや「h2」タグを使ったように見出しが作れます。
ではコンテンツのレイアウトをしてみます。
Bootstrapでは横幅を12等分したグリッドシステムというものを利用してレイアウトしていきます。
例えば8：3の２カラムや、3：3：6の３カラムのページなども作成できます。
グリッドシステムを利用する流れとして
・container（コンテナ）クラスまたはcontainer-fluidクラスでレイアウトしたいコンテンツを囲む
・コンテナの中で１行にまとめたい部分をrowタグで囲む
・col-[prefix]-[数字]クラスでカラムの設定をする
「container」はページの基礎シートとなる要素でBootstrapの各要素はコンテナの中に記述します。
ページ全体を囲むとページが真ん中に来ます。
またウィンドウを縮めたりするとわかりますが、横幅に合わせて段階的に横幅が変動します。
「prefix」の値は4種類ありそれぞれの画面の大きさに沿ったものを指定するとその画面以下になったときにレイアウトが変更されます。
この切り替わりのポイントをブレイクポイントといいます。
・「xs」…スマホサイズ（767px以下）
・「sm」…タブレットサイズ（767px～991px）
・「md」…PCサイズ（992px～1119px）
・「lg」…大画面PCサイズ（1200px以上）
例としてタブレットサイズ以上で8：4の２カラムで表示する場合以下になります。
<div class"container"> <div class="row"> <div class"col-sm-8">あいうえお</div> <div class"col-sm-4">かきくけこ</div> </div> </div>
結果として左に8の幅で「あいうえお」と、その右に4の幅で「かきくけこ」とレイアウトされます。
また、カラムとカラムの間に空白を入れることもできます。
<div class"container"> <div class="row"> <div class"col-sm-8">あいうえお</div> <div class"col-sm-4 col-sm-offset-4">かきくけこ</div> </div> </div>
こうすることで4の幅で左に「あいうえお」、間に4の幅の空白ができて再び4の幅で「かきくけこ」と表示されます。
このほかにも表のデザインをしたりボタンのデザイン、ナビゲーションのデザイン、Javascriptを使って動きをつける等様々なことが簡単に実現できます。
こちらのサイトにBootstrapの要素や使い方がいろいろ載っているので参考にしてみます。
http://www.tohoho-web.com/ex/bootstrap.html
ひとまずこれから以前作ったホームページをBootstrapを使ってデザインしてみたいと思います。
文字の連結と変数
今回は文字を連結したプログラムと変数を使った簡単なプログラムについて書きます。
まずは、文字の連結について。
長文が入ってくる文を表示させたいときに1つの文字列リテラルで書いてしまうと、行をまたいでしまいコードが見づらくなってしまいます。
かといって文字列リテラルの途中で改行してしまうとコンパイルエラーになります。
そんな時に文字列リテラルを複数に分けて連結するといいとのこと。
class Abc { pubric static void main(String[] args) { System.out.println("むかしむかし、あるところにお爺さんと" + "お婆さんが住んでいました。二人は大の仲良しでした。"); } }
というように「+」を使って文字が連結できます。
こうすることでインデントを綺麗に揃えることができます。
この「+」は文字列リテラルだけでなく、整数リテラルでも使うことができます。
class Abc { pubric static void main(String[] args) { System.out.println("50 + 30 = " + (50 + 30)); } }
このプログラムの実行結果は「50 + 30 = 80」と表示されます。
「""」で囲ったものは文字列として、「""」で囲っていないものは数値となります。
文字列を扱っているのか、数値を扱っているのか間違えないように注意しましょう。
次に変数について。
上のプログラムだと「50 + 30」以外の演算をするときに文を書き換えなくてはいけなくて面倒です。
そんなときに変数を使うと楽になります。
class Abc { pubric static void main(String[] args) { int x; //変数の宣言 int y; x = 50; //代入 y = 30; System.out.println(x + " + " + y " = " + (x + y)); } }
これを実行すると「50 + 30 = 80」と表示されます。
最初にint型の変数xとyの宣言をして、それぞれに数値を代入しています。
計算を変えたい場合は代入する数値を変更するだけです。
なお、「x = 50」の「=」は代入演算子といい、等しいという意味ではなく「変数xに50という数値を入れます」という意味です。
また、変数は宣言と一緒に先に数値を入れておくことも可能です。
int x = 50; int y = 30; System.out.println(x + " + " + y " = " + (x + y)); } }
あらかじめ変数に数値を入れておくことを初期化といいます。
Javaレッスン入門
HTMLとCSSの教科書を一通り終わらせたため、先日のレッスンからついにプログラミング言語Javaのレッスンが始まりました。
まずはJavaでプログラムを組むために「JDK」というツールをインストールする必要があります。
インストールと設定の手順は以下の通り。
▼Javaインストール手順
1．JDKをDLする
http://www.oracle.com/technetwork/jp/java/javase/downloads/index.html
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
2．パスを通す
システム→詳細設定→詳細設定タブの環境変数→システム環境変数のPathを編集
変数値を一旦コピーしておく。（変数値を一文字でも間違えると動かなくなってしまうため注意すること。）
JDKが入っているフォルダまでを道筋をコピーして、先ほどコピーした変数値の頭に張り付ける。
「C:\Program Files\Java\jdk1.8.0_111\bin」の場合binフォルダの中にJDKが入ってます。
インストールできたらいよいよプログラムを書いていきます。
書く際は、HTMLやCSSと同じようにエディターで書いていきます。
コンソール画面に文字を表示するだけのプログラムを書きました。
class Hello { //クラス宣言 public static void main(string[] args) { //メインメソッド ↓ System.out.println("初めてのJavaプログラム。") // ↓ System.out.println("画面に出力しています。") // ↓ } }
これが基本的なプログラム全体の骨組みです。
まず上で「Hello」という名前を持つクラスのクラス宣言をして、その下に行うべき処理を記述するメインメソッドがあります。
また、プログラムを起動して実行すると、メインメソッドの中の文が上から順番に実行されていきます。
プログラムを書く際に基本的なルールもいくつかあります。
・単語の途中でホワイトスペースを入れてはならない
・文字列リテラルの途中で改行してはいけない
・文は原則として「;」で終わる
文字列リテラルとはメインメソッドの文の「" "」内にある文字列のことです。
「" "」で1つの単語となるため、文字列が長くなったとしても途中で改行してはいけません。
プログラムが書けたらコンパイルという作業をします。
簡単に言うと、人間が書いたコードはソースコードと呼ばれ、コンピューターが理解できる形式に変換する必要があります。
その作業をコンパイルと言います。
コンソール画面でjavacコマンドでファイルを指定してあげればコンパイルができます。
新たにクラスファイルというものができました。
これがコンピュータが理解できるファイルとなります。
コンパイルができたら実行をします。
実行するにはjavaコマンドでクラスを指定しますが、そのときファイル名で「Hello.class」としてはいけません。
拡張子をつけてしまうとファイル名となってしまうため、拡張子はつけません。
無事、画面に文字が出てきました。
これでコードを書いて、コンパイルして実行という一連の流れができました。
次回は文字列リテラルの連結や改行、数字を計算するプログラムについて書きたいと思います。
ホームページの装飾、レイアウト
HTMLとCSSの教科書、第7章各ページの作成までなんとか終わりました。
どんなことをやったか大まかに言いますと、画像の編集と挿入、ページのレイアウト、リンクやナビーゲーションの作成、各ページの作成をやりました。
一気にやったため、各項目ごとで要点を整理したいと思います。
まず画像の編集と挿入について。
画像の切り抜きや大きさの変更などはPixlrというオンラインの画像編集ツールを使いました。
画像をHTMLに挿入する際も、タグを使いファイルを指定するのみです。
<img src="ファイルの場所/ファイル名" alt="代替えテキスト" width="幅" height="高さ">
alt属性は画像を表示しないブラウザなどで画像の代わりに表示されるテキストになります。
width・height属性は実際の画像のサイズを入力します。
実際と違う値を入力してしまうと画像が伸びたりつぶれたりしてしまいます。
その次はページのレイアウトです。
この章はから少しややこしくなってきました。
現状だとブラウザに表示されているページが左に寄っているためセンターに寄せてあげます。
まずブラウザに表示されてる内容をすべてdivタグで囲みます。
ここで初めて出てきたdivタグはそれ自体には意味がなく、範囲を定義する汎用的なタグです。
idを仮に「page」とします。
CSSを開き#pageにwidthプロパティで横幅を指定します。
横幅を指定する際は、よく利用されているモニターサイズの中で最も小さいサイズである1024×768pxのモニターで閲覧した時でもはみ出ないように考慮する必要があります。
そのため、1024×768pxで表示した際、プラウ座の横スクロールバー部分も考慮して左右に適度な余白が生まれるくらいの、900～980px程度にする場合が多いとのこと。
なので今回は横幅980pxとしました。
続けて#pageに対してmarginプロパティで左右のマージンを「auto」に設定します。
これによってブラウザの横幅に対して自動的に計算されたマージンの値が挿入されて、コンテンツ部分を中央に寄せることができます。
#page { width: 980px; margin: 0 auto; }
次に、左にメインのコンテンツ（main)、右にお知らせを表示させるためページ(sub)を2段組みにレイアウトします。
まずセンター寄せにしたときと同じように、それぞれのコンテンツの横幅を決めます。
ここでは、ページ全体が980pxあるため「main」を720px、「sub」を220pxとします。
そしてfloatプロパティでmainを左、subを右に寄せます。
#main { width: 720px; float: left; } #sub { width: 220px float: right; }
これで左右にコンテンツが分かれて左に720pxのmain、右に220pxのsub、真ん中に40px隙間ができてちょうど980pxとなります。
しかし、問題が一つあり、subの下にあったコピーライトも一緒に右側に来てしまいました。
floatプロパティの特性として画像や要素を左右に寄せると、その下にある内容が反対側に回り込んでしまいます。
つまりここで言うコピーライトという内容が右に回り込んでしまいます。
これを解消するにはmainとsubの親要素にclearfixというテクニックを使います。
#page:after { content: ""; clear: both; display: block; }
擬似要素「:after」が#pageの最後に追加される。contentは内容を入れると文字として出てしまうため空にしておく。
clearによって擬似要素が回り込みを解消する。
displayによってインライン要素からブロックレベルの要素となる。
こうすることで#pageの高さが保たれてコピーライトもちゃんと下に戻ります。
(頭では理解してるつもりですが説明するとなるとなかなか難しいですね…)
ひとまず今日はここまでにして、リンクとナビーゲーションの設定についてはまた明日書きたいと思います！
CSSの基本
勉強の新着状況です。
現在HTMLの基本とCSSの基本というところまでが終わりました。
以下やっていてなかなか感触をつかめなかったものです。
・ HTMLの基本構造
<!DOCTYPE html>・・・doctype宣言
<html lang="ja">・・・html文書であることを示す。言語が日本語のサイトであることを示す
<head>・・・ページの設定情報を記述する
<meta charset="uft-8">・・・html文書に関する情報を示す。文字コードがuft-8
<title>ページのタイトル</title>・・・ブラウザのツールバーに表示されるタイトル
</head>
<body>・・・ページのコンテンツ
コンテンツ
</body>
</html>
・ページの構造がわかるようにタグをつける。
article・・・内容が単体で完結するセクション。ブログの1つのエントリー、新聞や雑誌の記事の1つ。
aside・・・前後の内容と関連はあるが、本筋からは外れる内容を表すセクション。補足情報や広告など。
nav・・・サイトの主要なナビゲーションを表すセクション。
section・・・上記のどれにも当てはまらないセクション。
・表の基本構造
<table>
<caption> </caption>
<tr> </tr>・・・見出し項目
<td> </td>・・・データ項目
<tr> </tr>・・・見出し項目
<td> </td>・・・データ項目
<tr> </tr>・・・見出し項目
<td> </td>・・・データ項目
</table>
・CSSファイルの作成と読み込み
htmlに読み込む時は<head>タグの中に
<link rel="stylesheet" href=".../ファイルの入ってる大フォルダ/中フォルダ/ファイル名”>
と記入する。
・HTMLに クラスをつける
<h1 class="〇〇">
のようにクラスをつけるとそのクラス個別でデザインを適用することができる。
なお、他のタグにもつけることができるため同じフォントサイズにしたい場合などにつけておくと一括管理できる。
また、同じような属性で「id」というのもある。
同じidを2個つけることできないため、ページに一つしか存在しない項目に使うと効果的。
・余白を調整するプロパティ
padding: 〇px; ・・・内側に余白を作る
margin: 〇px; ・・・外側に余白を作る
また、マージンには「隣り合う上下の、マージンは相殺される」という特徴がある。
少し苦戦しながらもなんとかＨＴＭＬとＣＳＳの基本を終えました。
そこで先生にファイルを送りレビューをしていただきました。
以下指摘されたことです。
・タグを閉じられていない箇所が1箇所あった
・インデントは半角スペースを使わずタブを使うこと
タグの閉じ忘れには注意していたはずだったがコードを書いているとごちゃごちゃしてわからなくなってしまいました。
また、そういうことを防ぐためにインデントを綺麗に整理することが大切であるとのこと。
上記のようなことに注意しながら、現在は画像の挿入と共通部分の作成とレイアウトに取り組んでおります。
レッスン初日
本日よりWEBプログラマーを目指してレッスンが始まりました。
まずはプログラマーと言う職業について理解すること。
プログラマーにも種類がいくつかあるが、今回はウェブ上のサービスを開発していくWEBプログラマーというもの。
具体例としてインターネットショッピングサイトのシステムなどがそれにあたる。
必要となるスキルはたくさんあるが、今回のレッスンでは主に
HTML、CSS、java、javaScript、サーバーの構築、データベース、セキュリティ
についてのスキルをつけていきます。
また、プログラマーを目指していく中で重要な企業選びについても簡単に教えていただきました。
主に2種類の会社があり、1つが自社サービスのある会社。
2つ目が「SIer」という自社サービスのない会社。
SIerはプログラマーを複数雇い、プログラマーの足りない会社へ人を提供する会社。
1つの現場にいる期間が短いため、いろいろな現場を経験することができる。
自社サービスがある会社ではプログラミング以外にも任される仕事が多いため大変に思われるかも知れないが、それはそれでまたいろいろな楽しみがあるためどちらを選ぶによって大きな違いがある。
次に実際にHTMLを使いＷＥＢサイトを作っていった。
初めてのＨＴＭＬのため躓く箇所がいくつもあったためメモしておきます。
・タグは必ず半角で入力
・<meta charse="uft-8"> ・・・uft-8という文字で表示します
・写真を載せるときはＷＥＢ上にアップされているものを直接リンクしてはダメ
必ずファイルをローカルに落としてからファイルをリンクさせる
・画像の大きさはHTMLで指定することもできるがCSSで変更したほうがいい
・文字の大きさや色などもCSSで指定するほうが後々変更になったときに一括で変更ができるため便利
・テーブルに線を引く場合は<table border="1">のようにする
・くれぐれもタグのスペルミスに注意すること。
次にJavaScriptについて少し教わりました。
HPの問い合わせフォームなどでよく目にする送信するなどのボタンがJavaScriptによって動作している。
今回入力したタグは
<input type="text" size="4"/> + <input type="text" size="4" />
<input type="button" onclick=test(); value="PUSH" />
である。
onclick=test() はボタンを押すことによって（）内に打ち込んだ文字が表示されることを表す。
value="PUSH" はボタン自体に表示する文字を表す。
<script type="text/javascript">
function test() {
var i = 5 + 10;
alert( i );
}
</script>
になるとのこと。
var i = 5 + 10 は5+10の結果を「i」とすることを表す。
alert( i ) は「i」という結果のアラートを表示する。
これによりボタンを押すとJavaScriptの内容が呼び出される。（ファンクション）
一通りHTMLでページを作成したら最後にサーバーを借りてWEB上にアップするという作業をした。
サイトをアップするにあたりFTPソフトを利用して作成したHTMLファイルをサーバーに転送した。
FTPとは通信プロトコルの一種でURLで目にするHTTPと似たようなもの。
FTPの親戚にSCPというものもある。
FTPが平文なのに対しSCPは暗号化されたものであるため途中で傍受されても内容が分からないようになっている。
作業自体は教科書に沿ってやったため無事に転送ができた。
ここまでで第1回レッスンは終了。
宿題は次回までにHTML/CSSデザインの教科書内容をできるようにすること。
