ホームページ制作講座

ホームページが見える仕組み

ホームページを作る人は、インターネットの仕組みを理解する必要があります。

ここではまず、ホームページがどのような仕組みでユーザーの画面に表示されるのか？その上で自分は何を作ればいいのか？を理解していただきます。

HTMLとは？CSSとは？

ホームページを作成する時に必ず出てくる言葉「HTML」と「CSS」

ここでは、HTMLとは何か？CSSとは何かを学習します。HTMLという言葉がどういった言葉の略称なのか？といったテスト勉強的な理解ではなく、HTMLやCSSがホームページ作成の中でどういった役割を担っているのかといった本質的な意味を学習します。

基本文法の理解

HTMLの基本文法を学習します。

ホームページを作る際には必ず書かなければいけないソースコードがあります。そのソースコードの意味を１つ１つ丁寧に解説していきます。タイピングが苦手な方向けにコピーペーストで使える素材もご用意しておりますのでご安心ください。

画像の挿入

ホームページに画像を挿入する方法を学びます。

実はホームページの画像は表示されればOKというわけではありません。ホームページは様々な環境で見られています。

そういったすべてのユーザーに等しく情報を伝えていくための「アクセシビリティ」の考え方もここでご紹介していきます。

リンクの指定

他のページへ移動するリンクの設定を行います。

文字にリンクを設定する場合、画像にリンクを設定する場合、それぞれ設定を行います。

またリンクの指定を行う場合に知っておくべきパスの仕組みをわかりやすい図解でじっくりと説明いたします。

CSSの準備

CSSによる装飾をHTMLに適用させる3つの方法をご紹介し、装飾の準備のためCSSファイルの作成を行います。

CSSの基本文法およびコードを見やすくすする整形方法も学習します。

文字への装飾

CSSの基本文法の練習と共に文字に対する装飾を行います。

文字の色、大きさ、フォントの変更、行間の調整、位置揃え、太さの変更などなどページ装飾をするうえでは欠かせない装飾を次々と練習します。

クラスとID

ページのデザインが本格化してくると、クラスとIDを利用する必要が出てきます。

ここでは、クラス、IDとは何か、どのように使い分けるのかを理解していただいたうえで実際にページに組み込んでいきます。

背景の指定

ページ全体、または一部に対して背景の指定がおこなえます。

背景色の指定、背景に画像を表示する方法と、そのコントロールの仕方をマスターして、デザインをワンランクアップさせましょう。

DIVボックス

ここからいよいよページ全体のデザインを組み上げるレイアウト作業に入ります。

レイアウトの骨組みを作成する際に必要なDIVボックスの扱いを勉強します。

なぜ必要なのか？どのようにして作成して制御するのか、HTMLとCSSを書きながらしっかり身につけていきます。

表の作成

ホームページに挿入する表のことを「テーブル」と呼びます。

HTMLとCSSでのテーブルの作り方は少し複雑です。

表の構造と照らし合わせながら、HTMLとCSSをひとつひとつ記述して自分の思い通りのテーブルが作成できるように練習を行います。

Visual Studio Codeの使い方

このレッスンからコーディングの量が増えていくため、Microsoft社が無償で提供しているアプリケーション「Visual Studio Code」を使っていきます。

使い方をマスターするとコーディングのスピードが驚くほどあがります。

レイアウト作業時の注意と準備

ここではレイアウトを組み上げていく上で知っておくべき知識を身につけます。

ブラウザのデフォルトスタイルのリセット方法、ボックスの幅と高さの基準とその変更方法などなど、ここでの知識が後々「崩れない堅牢なレイアウト」を組み上げるための大切な基本となります。

シングルカラムレイアウトの作成

最近ではスマートフォンやタブレット向けのデザインで多く採用されている「シングルカラム」と呼ばれるレイアウトを組み上げていきます。

レイアウトの骨格を作りながら、古いブラウザソフトへの対応方法も学習します。

余白の指定

見やすいレイアウト、美しいレイアウトを実現するには余白の適切な指定が必要不可欠です。

CSSで設定できる外余白、内余白の指定を理解し、ソースコードの記述に非常に便利なショートハンドで効率のいい記述方法も学びます。

ここでの余白の指定がレイアウトの美しさをぐっと引き立てます。

ナビゲーションの作成

ページ内でユーザーがページ間を移動するためのメニューのことを「ナビゲーション」と呼びます。

ここではマウスポインタを乗せた時に色が変化する使いやすいナビゲーションの作り方をご紹介します。

フロート

複雑なレイアウトを可能にしてくれるフロート。

ここでは、画像の横に文字を回り込ませる作業を例にとりながらフロートを適用する練習を行います。

この技術を習得することで実現できるレイアウトの幅がぐっと広がっていきます。

2カラムレイアウト

レッスン３で作成したシングルカラムレイアウトよりも少し複雑な「2カラムレイアウト」をフレックスボックスという仕組みを使って作成します。

レイアウトが自分の手で組みあがっていく手ごたえを感じられるレッスンです。

スライドショーの実装

トップページで多く採用されている写真が一定時間で自動的に切り替わるスライドショー

そのスライドショーの実装方法からカスタマイズの方法までをご紹介します。ページに動きをつけていきましょう。

アップロード

作成したホームページを世の中に公開するにはアップロードという作業が必要になります。

ここではアップロードに必要なアプリケーションの設定から実際のアップロードの方法までをご紹介します。

スマホ対応のキホン

ホームページをスマートフォンできちんと見えるようにするためにはいくつかのルールがあります。

ここでは、そんなスマホ対応のためのルールと、制作中に便利なシミュレーターの使い方を覚えます。

リキッドレイアウト

どんな横幅にもフィットするリキッドレイアウトを作成します。

スマートフォンやタブレットには様々なサイズがあるので、それらに柔軟に対応するデザインを作成することができます。

ハンバーガーメニューの作成

スマホサイトの右上によくみる3本線のボタン。そのシルエットが似ていることからハンバーガーボタンと呼ばれます。

クリック／タップで開閉するメニューを作成します。

CSSアニメーション

メニューの表示やページ内のリンクなど、パッと切り替わってしまう部分にスクロール効果やフェード効果を追加できるのがCSSアニメーションです。

華やかさを追加するとともに使いやすさも向上します。

レスポンシブWebデザイン

ウインドウの幅によって柔軟に変化するレイアウトを「レスポンシブWebデザイン」と呼びます。

ここでは、その概要と導入時に抑えておきたい知識を身につけます。

メディアクエリ

レスポンシブWebデザインを作る際のカギになるのがメディアクエリという技術です

メディアクエリがどういったものなのか？を簡単なパーツを作成しながら理解していきます。

Webフォント

インターネット上には、美しいフォントを利用できる「Webフォント」というサービスがあります。

無料で使えるサービスを使ってWebフォントの導入方法をご紹介します。

複数の背景指定

CSSでは、複数の重ね掛けが可能です。写真の上に半透明のグラデーションを重ねてみたり、エリアの四隅に別々の背景画像を配置したり、ちょっと複雑な背景の設定をおこなってみます。