20/45

八回目ーーHTML&CSS、中級編開始、透明、ボタンーー

中級編を始めます。

今回はタイトル通り文字や画像が透ける様にしたり、ツイッターやフェイスブックなどのボタンを作りたいと思います。

中級編になっても基本的にやることは変わっていないので調子を崩さず進みたいですね。

　それでは、『HTML&CSS』の中級編へ入ります。

　入りますが、実際学んでみると基本の書き方を初級編で学んだため、実の所要素(プログラム)と使い方や意味を覚える以外真新しい事はありませんでした。

　なので、今回は一気に片付けて次へ進みたいと思います。

　では、まず中級編で学ぶ全体像についてお話しします。

　全体像はこのような感じとなっています。

　初級編との変更点

　　　・ヘッダーはスクロールしても常に上部に配置

　　　・①は中央に配置し、背景に画像、文字を薄くする

　　　・①の下部はボタンにロゴを配置

　　　・②は均等に配置し、文字を収める

　　　・③も中央に配置し、影のある特殊なボタンにする

　　　・全てのボタンはカーソルを当てると色が変わる

　画像ではわかり難いですが、以上の変更点が主な中級編で学ぶことの中心となります。

　これからデザイン性のあるレイアウトを学んでいくということでしょう。

　先ほども言いましたが、基本の形はほぼ同じなのでプログラムを覚えるだけでした。

　では、内容に入ります。

　１．①のレイアウト

　　　画像で分かりますが

　　　・ヘッダー

　　　・①

　　　・②

　　　・③

　　　・フッター

　　　合計で五つのグループから成り立つ構成となっています。

　　　最初の頃は漠然として頭の中でのイメージを形にするのは難しかったですが、このように画像にして全体を決めると何をどの順で書くのか少しイメージしやすくなった気がします。

　　　ヘッダーも少々特殊なので、先に中央配置となる①のプログラミングから始めます。

　　　ここでも画像を作ればいいのですが、少し面倒なので言葉で説明します。

　　　・大きな全体グループ――『top-ue』

　　　・文字やボタンのグループ

　　　・文章――『h』

　　　・文章――『p』

　　　・新規登録――『a』

　　　・文章――『p』

　　　・フェイスブック――『a』

　　　・ツイッター――『a』

　　　簡単に表すとこのような構造となります。

　　　これら以外にも『背景に画像』『文字を薄く』『中央配置』といったCSSのプログラミングがあります。

　　　まずは、背景の画像についてです。

　　　背景の画像はCSSで行うので

　　　　　(クラス名) {

　　　　　　background-image: url(○○);

　　　　　}

　　　HTMLで指定する画像と異なり『image』となるのを気を付けなければなりません。

　　　他にも『url』という文字は必須で、○○には画像の拡張子(pngやjpg)まで必要です。

　　　この状態では画像が表示範囲を埋め尽くすまで繰り返し表示されるそうです。

　　　そこで、画像にサイズを指定することで表示範囲を一枚で埋め尽くす大きさに変更させます。

　　　　　(クラス名) {

　　　　　　height: 300px;

　　　　　　background-image: url(○○);

　　　　　　background-size: cover;

　　　　　}

　　　以上の二つを書き加えることで変更できます。

　　　説明すると

　　　　　『height』で高さを指定し

　　　　　『background-size: cover;』で表示範囲を埋める様にする

　　　となります。

　　　　　</div>

　　　　　h1 {

　　　　　　color: white;

　　　　　}

　　　また、HTMLとCSSには初級編で習ったテキスト表示と色変更のプログラムがあります。

　　　しかし、このままでは左寄りとなって表示される為

　　　次に横幅の指定を行います。

　　　　　.top-ue {

　　　　　　width: 500px;

　　　　　　margin: 0 auto;

　　　　　}

　　　それぞれをプログラミングするのではなく、文字とボタンのグループを作り全てを中央に配置するよう指定します。

　　　両側に『margin』を取れば良いでしょうが、『auto』を使うことで同じ幅を指定することが出来ます。

　　　注意点として、必ず『width』＝横幅の指定が必要となります。

　　　また、0の幅に関してはpxを必要としません。

　２．半透明にする

　　　一つ目の文章についてもう少し詳しく説明します。

　　　・背景が透けるように薄くする。

　　　・文字の間隔を少し開ける。

　　　・二行にする

　　　以上の形が詳細となります。

　　　透けるようにする＝『opacity』

　　　読みはオパシティになるんでしょうが、英語の勉強ではないので自分が覚えやすいようにしておけばいいです。

　　　意味は不透明、曖昧といったプログラムでも同じ意味を持ちます。

　　　明度は『0.0～1.0』で表します。

　　　0が一番薄く、1が一番濃い状態です。

　　　次は間隔です。

　　　文字の間隔＝『letter-spacing』

　　　『letter』は手紙や文字、『spacing』は間隔を空けること。

　　　これも意味が同じとなりますが、『opacity』同様普段使うことのない英語なので覚えるのを苦労しそうです。

　　　幅は普通に○○pxなので文字のサイズ変更等を書き方に変わりありません。

　　　　　.top-ue h1 {

　　　　　　opacity: 0.7;

　　　　　　font-size: 45px;

　　　　　　letter-spacing: 5px;

　　　　　}

　　　　　.top-ue p {

　　　　　　opacity: 0.7;

　　　　　}

　　　プログラムはこの様になります。

　　　文字を半透明にしたい要素に対して『opacity』を使い

　　　文字の間隔を空けたい要素に対して『letter- spacing』を使います。

　　　因みに、二行のテキストは普通に『h1』を二つにすると二行に分けて表示できます。

　　　以上の形です。

　　　これは『p』でも同じなので良く使う方法となるでしょう。

　３．ボタンを作る

　　　ボタンというと以前似たプログラムを学んだと思います。

　　　HTMLに書き込む『input type=”submit”』です。

　　　ですが、これはあくまでも送信や受信といったボタンで

　　　今回は独自に作るボタンとなります。

　　　使うのは『a』の三つです。

『a』はインライン要素――文章の一部――なので

　　　横幅や高さを指定するプログラムを使えません。

　　　そこで、『a』をインラインブロック要素というブロック要素のような幅と高さなどの指定を行えるプログラムを使います。

　　　そのために使うのが『display』というプログラムで

　　　『block』『inline-block』『inline』を指定することが可能です。

　　　まずHTMLに

<a href="○○" class="btn facebook">Facebook </a>

<a href="○○" class="btn twitter">Twitter </a>

</div>

　　　このようなプログラムを書きます。

　　　短縮ということで

　　　『同じ変更をしたいグループがあるけど、文字の色を変えたい』

　　　という時があります。

　　　今回は文字の大きさ、色、ボタンの大きさは同じですが、ボタンの色を変えたいです。

　　　そこで使うのが、見て分かりますが

　　　『クラスの中に複数を書く』というプログラミング方法です。

　　　CSS

　　　　　.button {

　　　　　　margin-top: 20px;

　　　　　　margin-bottom: 20px;

　　　　　}

　　　　　.button p {

　　　　　　margin-top: 20px;

　　　　　　margin-bottom: 20px;

　　　　　}

　　　　　.btn {

　　　　　padding: 10px 24px;

　　　　　color: white;

　　　　　display: inline-block;

　　　　　opacity: 0.7;

　　　　　}

　　　　　.signup {

　　　　　　background-color: カラーコード;

　　　　　}

　　　　　.facebook {

　　　　　　background-color: カラーコード;

　　　　　　margin-right: 10px;

　　　　　}

　　　　　.twitter {

　　　　　　background-color: カラーコード;

　　　　　}

　　　全体グループの『button』上下の空白を作り

　　　その中の『p』の文章の空白を作り

　　　三つのボタンの『btn』を指定し

　　　それぞれの色を変えます。

　　　『facebook』に『margin-right』があるのは『twitter』との間に空白を作る為です、別に『twitter』の方にあっても変わりありません。

　４．レイアウトを整える

　　　いよいよ大詰めに入ります。

　　　今の状態では空白こそあっても中央に配置されておらず

　　　初期状態の左揃えで配置されています。

　　　これを中央に配置すると共に

　　　『ボタンにカーソルを当てると色が変わる』

　　　『ボタンの角を丸くする』

　　　ような変更を行います。

　　　まず、カーソルを当てての色変更は『:hover』というプログラムを使います。

　　　これはCSSに使い、今までと少々異なり

　　　【クラス名の横】に書き込みます。

　　　次に角を丸くする方法。

　　　この色というのはボーダーの枠の中を色塗りするようなもので、ボーダーの角を丸くすることで角を丸くします。

　　　なのでボーダーを使い

　　　　　『border-radius』＝線の半径

　　　半径(＝円)を弄ることで丸みを持たせます。

　　　そして中央配置には

　　　　　『text-aligin』＝テキストを一直線にする

　　　このプログラムをCSSに書き込みます。

　　　なので

　　　　　全体グループ『top-ue』に

　　　　　『text-align: center;』を書き加え全体を中央配置にします。

　　　　　三つのボタングループ『btn』に

　　　　　『border-radius:　5px;』と書き加え、角を丸くします。

　　　　　新たに『.btn:hover』のCSSを作り

　　　　　『opasity: 1;』と書くことで、半透明にしていたボタンがカーソルが当たっている時のみ本来の色に戻るよう指定できます。

　５．ロゴ(アイコン)の指定

　　　フェイスブックやツイッターと言えば思い浮かべるアイコンがあります。

　　　それをボタンの文字の頭に付けようということです。

　　　アイコンの表示には『Font Awesome』というたくさんのアイコンがあるサイトがあるそうで、気に入ったアイコンを使うことが出来ます。

　　　使うには

　　　　　１Font AwesomeのCSSを読み込む

　　　　　２『span』に『fa』と『fa-アイコン名クラス』を指定する

　　　二つの手順で行います。

　　　まず『head』――定型文の中に

　　　Font Awesomeを読み込むようにします。

　　　次にフェイスブックで行うと

Facebook

</a>

　　　と、『a』の中に書き加えボタンの中に配置します。

　　　テキストのFacebookの先頭に付けたいので、Facebookの上に書き込むことが注意点です。

　　　ツイッターも同じなので省きます。

　　　この状態ではアイコンとテキストの間が狭いので

　　　『margin』を使い空白を作ると良いでしょう。

　　　長くなりましたが、以上がトップを作るプログラミングとなります。

最終目的

　・勿論手に職を付ける、若しくはお金を稼ぐ

　・簡単なゲーム(リバーシや簡易シューティングなど)を作る

　・フリーソフトで販売

短期目標

　・大まかな流れを覚える

　・プログラミングを理解する

上記の内容は覚える中で変わることがあると思います。