IT03-10 Webページのデザインとレイアウト

情報活用編

第4章「画像とデザイン」

IT03-10

Webページのデザインとレイアウト

Webページを作る言語

スライドの学習内容

1.Webページを作る言語
2.HTML
3.CSS
4.JavaScript

学習で使っている「スタナビ」もWebページです。「スタナビ」も「HTML」、「CSS」、「JavaScript」で作られています。それぞれどういう役割か学習しましょう。

1.Webページを作る言語

Webページは次の要素から構成されます。

文書と構造
デザイン
動き

それぞれの構成要素ごとに専用の言語を用いてWebページは作成されます。

Webページを作る言語

WebページはHTML、CSS、JavaScriptの3つの言語で作成されます。それぞれの特徴を確認しましょう。

2.HTML

HTMLはHyperText Markup Language(ハイパーテキストマークアップランゲージ)のことで、Webページを作るための言語です。Webページはテキスト、画像、リンクなどの要素で構成されています。HTMLはタグを用いてWebページの要素を記述します。

リンクとは、ハイパーリンクのことで、Webページ内やWebページ間を移動することです。テキストや画像などの要素に設定し、要素をクリックすることで移動します。

タグとは

Webページで「段落を作る」、「タイトルに指定する」、「画像を表示する」などの、Webページの構造を指示するものです。

タグの書き方

タグは"<>"記号で囲まれ、<タグ>で始まり</タグ>で終わります。

例えば、文章(テキスト)を表示するときに使う「pタグ」やリンクを作成する「aタグ」は次のように記述します。

pタグ：テキストを１つの段落として表示するタグ

pタグの書き方

<p>文章など段落の内容</p>

pタグの記述例


                                <p>これは段落１の文章です。</p>

                                <p>これは段落２の文章です。</p>

上記のpタグを記述した時のWebページの表示

これは段落１の文章です。

これは段落２の文章です。

pタグは段落を指定しています。そのため改行され、段落間の隙間が少し大きくなります。

aタグ：ハイパーリンクを作るタグ

aタグの書き方

<a href="リンク先URL">表示用文字</a>

aタグの記述例


                                <a href="https://www.starjuku.com/">スター AI・情報塾へ移動する</p>

aタグを記述したWebページの表示内容

スター AI・情報塾へ移動する

aタグで書かれた文字にマウスを移動させると、マウスのカーソルが変わることでもハイパーリンクということがわかります。

3.CSS

CSSはCascading Style Sheets(カスケーディングスタイルシート)のことで、WebページやWebアプリケーションのスタイルやレイアウトを設定するための言語です。スタイルシート言語とも呼ばれます。

CSSを使用すると次のことができます。

スタイルの指定

文字の色や大きさ、フォントの種類、背景色、余白、枠線など、さまざまな要素のスタイルを指定する。
レイアウトの設定

要素の位置やサイズ、要素を中央に配置したり、横並びに配置するなどのレイアウトの調整を行う。
アニメーションの追加

要素にフェードインやスライドイン、回転するなどの簡単なアニメーションを追加することができる。

CSSの書き方

CSSは「セレクタ」、「プロパティ」、「値」の組み合わせで記述します。

セレクタ：スタイルを適用するHTMLの要素。タグやclass(クラス)名などがある。

class名とはHTMLのタグに付けるグループ名です。CSSとHTMLは連動しているため、CSSで指定したセレクタへのスタイルは、HTMLで記述した同じclass名の全ての要素に反映されます
class名は自由に付けることができます。セレクタを定義する場合、class名の前に「.(ドット)」を指定します。
プロパティ：要素のスタイル。例えば、文字の大きさや色のこと。
値：プロパティで指定したスタイルの値。

例１：

例えば、CSSで文字に下記のスタイルを付けるには次のように記述します。

作成するスタイル内容

セレクタ名　【text-blue-20】

文字色：青色
文字サイズ： 20px


                                //cssの作成

                               .text-blue-20 {

                                        color: blue;

                                        font-size: 20px;

                               }
                               

                               

                               //pタグにスタイルを適用する

                               <p class="text-blue-20">スタイルを適用しています。</p>

上記スタイルの適用した時のWebページの表示

スタイルを適用しています。

例２：

マウスホバー時に文字を回転させる。

マウスホバーとは、マウスポインタを移動させ、文字や画像などの上に移動させる動作のことです。


                            //最初の文字のスタイル

                            .font-cycle {

                                    display: inline-block;

                                    color: black;

                                    transition: all 1s;

                            }
                            

                            

                            // マウスホバー時に色を赤にして回転させる

                            .font-cycle:hover {

                                    color: red;

                                    transform: rotateX(360deg);

                            }
                            

                            

                            //pタグにスタイルを適用する

                            <p class="font-cycle">スタイルを適用しています。</p>

上記スタイルの適用した時のWebページの表示

スタイルを適用しています。

マウスを重ねてください。

スマートフォンやタブレットでは確認できません。

4.JavaScript

JavaScript(ジャバスクリプト)は、Webページをより動きのあるものにするためのプログラミング言語です。Webページでボタンを押すと何かしらの反応がおこったり、文字や画像が動いたりするのは、JavaScriptがその役割を果たしているからです。

JavaScriptの特徴

Webページ上で動作するプログラミング言語
Webページの動きを制御する
ブラウザ上で実行する

JavaScriptの書き方

JavaScriptは、HTMLの「scriptタグ」の中に記述します。

JavaScriptはプログラミング言語のため、Pythonと同じように文法に従って記述する必要があります。ここでは詳しい説明は行いませんので、興味のある人は調べてみましょう。

JavaScriptは「scriptタグ」の中に記述します。


                                <script>

                                    //ここにプログラムを記述する　　　　　　　　　

                                </script>

例えば、以前の学習に2進数の計算をするゲームがありましたが、あのゲームもJavaScriptで記述されています。

基数変換ゲームへ移動する

アクティビティ②では、ブラウザの開発者ツールを使って、HTMLとCSSを使ってWebページの内容を一時的に修正します。

Well done!

次のステップに進みましょう！

次のステップに進む

← 前のステップにもどる