はじめてのWebサイト！～第2回目～｜中央コンピューターサービス株式会社(CCS)

2020年より新しく技術開発推進部に仲間入りした女性社員3人が、ゆりちゃんに代わって情報処理技術についてはじめての方にも分かりやすく説明します。

えりちゃん
フラフープが得意

ゆいちゃん
猫舌で熱い料理が苦手

ともちゃん
早寝早起を頑張り中

リーダー橋本氏
今回の講師

はじめに

: 今回は、前回作ったWebページのレイアウト・デザインを整えながらCSSとJavaScriptを勉強していくよ！

: CSSを使えば、簡単に文字の飾りつけや画像のレイアウトができるんですよね！

: JavaScriptではブラウザを再読み込みすることなく、コンテンツを動かしたりすることができますよね。

: どれも今どきのWebページ作成には欠かせない技術ですね。

: では早速、それぞれ詳しく見ていこう！

「CSS」について

Cascading Style Sheets（カスケーディング・スタイル・シート）
Webページのスタイルを指定するためのマークアップ言語。
Webページのフォントやレイアウトなどに装飾を施すためにHTMLと組み合わせて使われる。
CSS1、CSS2、CSS3と3つのバージョンがあるが、最新のCSS3は過去のCSSと互換性がある上、その利用にはHTMLと違い宣言が不要なため、
新旧の各プロパティを混ぜて使うことができる。
HTMLに直接記述することもできるが、外部ファイルに分けた記述を読み込ませることも多い。

: まずは作ったWebページのコンテンツがブラウザ左端ぴったりから始まっているので、CSSで余白を入れたいですね！

: CSSはタグごとに設定することができるから、bodyタグ全体の外周に「margin」で余白を入れてみよう。

: これでテキストが読みやすくなりましたね！次は見出しを可愛くデザインしたいです！

: じゃあ、今度は「.menu」設定を追加して、見出しのh2タグに「class=menu」を埋め込むことで
範囲を指定したデザインを適応させてみよう！

: 見出しのフォントと下線を設定できました！簡単にデザインできて便利ですね。

: 応用すればもっと色々なデザインが作れそうです！

「JavaScript」について

JavaScriptとは、ページを再読みすることなく動的にコンテンツを更新したりマルチメディアを管理したりできるスクリプト言語のこと。
HTMLとCSSによってWebページが構築されてからブラウザのJavaScriptエンジンによって実行・表示される。
CSSと同様、HTMLに直接記述する方法と外部ファイルに分けたものを読み込む方法がある。

: 作ったWebページにJavaScriptを使って何か動きを入れてみたいです！

: 今回はWebページトップの画像を一定時間おきに切り替わるように設定してみよう。
やり方は色々あるけれど、今回はJavaScriptでプログラミング言語らしさが見える書き方を試してみよう。
ここでは3枚の画像を入れた配列を用意して、2秒ごとに次の要素へ切り替えるプログラムを組んでみるよ。

: 簡単に動きを取り入れられて便利ですね！

おわりに

: CSSとJavaScriptを使ってWebページを簡単にデザインできましたね。

: 先ほどの内容を応用して装飾を少し足したWebページはこんな感じにできました！

: もっと色々なデザインが使えるように勉強したいと思います！

: そうだね。実際に色々なレイアウトを試してみるのがいいね。
次回は、Webサーバーについて学んでいよいよWebページを完成させるよ！

当ページの人物画像はNIGAOE MAKERで作成しました。