LogoMark.png

リカレント講座/Webデザイン/第2回

福岡商工会議所x九州産業大学 リカレント講座

Webデザイン基礎講座 第2回


ご案内と補足説明

本日(17日)はお疲れ様でした。以下、次回に向けてのご案内と補足説明です。

次回に向けて

補足:Webサイトフォルダのバックアップについて

backup.png

HTMLやCSSは、編集の過程でエラーが生じた場合、原因がわからず元に戻せなくなることがあります。そのような場合に以前の状態を復元できるよう、随時フォルダを圧縮(右クリック>圧縮)して保管しておくことをお勧めします。

補足:HTMLとCSSの記述構造の違い

HTMLはタグの入れ子状に記載しますが、CSS は入れ子状の記載はできません

補足:コンピュータ上で扱う文字について

Webサイトの制作にあたっては、文字コードについての知識と、フォントについての知識が必要です。

補足:テキストエディタ Atom について

IT系の業務では、テキストエディタは最もシンプルかつ重要なソフトウエアです。使いこなし方次第で業務効率には大きな差がつきます。以下に補足説明を記載していますので、お目通し下さい。> Atom




CONTENTS




はじめに

本日の作業環境について


HTML+CSSファイルの確認

html_css.png

前回ダウンロードしていただいた SampleSite を利用して、説明を続けます。フォルダの中に、以下の2つのファイルがあることを確認して下さい。


Webサイトのフォルダについて

folder.jpg

注)フォルダ名、ファイル名は必ず半角英数で
images page01.html page-01.html page_01.html logoMark.jpg など、
Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。


Webサイトの公開について

前回の説明の復習です。

FileZilla1.jpg
FileZilla2.jpg
FileZilla3.jpg




HTML

HTMLとは

HTML(HyperText Markup Language)とは、ページの内容を記述するためのマークアップ言語です。文章や画像はもちろん、リスト表記や表組み、他のドキュメントへのハイパーリンクも設定できます。
 HTMLファイルは、ごく普通のテキストファイル(文字が並んだだけのもの)なので、必要なのはテキストエディタだけです。

HTMLタグの基本

HTMLは、情報要素を以下のようなタグでくくる形で記述します。

<◯◯> 〜 </◯◯> ← 前者を開始タグ、後者を終了タグといいます。

以下、基本的なものを列挙します。 > 詳しくはこちら


演習1 基本操作

演習2  画像の配置

sample.jpg

演習3 YouTube動画の配置


参考

CSS

CSSとは

CSS(Cascading Style Sheets)は、表示された要素のビジュアルを定義するためのものです。文書というものは、タイトル、見出し、本文、箇条書きなど、いくつかの要素に分けることができますが、その場しのぎにフォントや文字サイズを変更していたのでは、まとまりのない書類になってしまいます。そこで、「見出しは12ptでゴシック体」、「本文は10.5ポイントで明朝体」などとルールを決めて、文書全体を通じて共通にルールを適用させるというのが賢いやりかたです。このルール決めのことを「スタイル定義」といいます。

3種類の記述方法

で、結論から言うと、3つめを採用するのがWeb標準で、この講習ではそれにしたがって、style.css を別ファイルとして独立させています。


HTMLとCSSの関連づけ

index.html の<head>内に、以下の1行があることを確認して下さい。

<link href="style.css" rel="stylesheet" >

これによって、CSSに書かれた内容が、ページのスタイルに反映しています。

CSSの記法

CSSではどの部分の・何を・どうするかを記述します。
記述の基本ルールは以下のとおりです。

セレクタ(どの部分の) {
    プロパティー(何を)  :  値(どうする) ;
    プロパティー(何を)  :  値(どうする) ;
             :
}

HTML内の特定の要素をセレクタで把握し、その要素をどう表示したいか、指示を列挙する・・というのがCSSの基本的な書き方です。

付記:親要素 / 子孫要素
階層構造をもつ文書において対象を特定する際に頻出するキーワードです。外側の要素を親要素、中に囲まれている要素を子要素といいます。

<div> ← 親要素
  <p> ・・・ </p> ← 子要素
  <p> ← 子要素
      <span>・・・</span>  ← 孫要素
  </p>
  <p> ・・・ </p> ← 子要素
</div>


CSSセレクタ

セレクタには、タグ名、ID名、CLASS名 などが使えます。タグ名を使ってスタイルを適用する、つまり「同じタグ名の要素は、すべて同じスタイルになる」というのが最もシンプルですが、同一のタグであっても、それが置かれた場所によってスタイルを区別したい・・ということが当然あります。その場合は、開発者が要素に任意の名前を与えて、その名前を使ってスタイルを制御します。ページ内に1つだけ存在する特定の要素にのみデザインを適用したい場合は、ID名 を利用し、ページ内に複数存在する要素に一括して同じデザインを適用したい場合は、CLASS名 を利用します。
 以下、対象を特定するための代表的な方法を紹介します。




CSSによる要素の属性定義

色と背景


文字

フォント系とテキスト属性で以下のような事項を定義できます。

サイズの単位について

Webサイト上の大きさを指定するには、画面サイズに対して最も直接的な pxの他に、%、em、rem といった単位が存在します。

付記:擬似要素 :hover

マウスのロールオーバー(ホバリング)時の処理について、HTML側、CSS側に以下のような記述があると、マウスのロールオーバー時に文字が斜体になります。


演習1

演習2





CSSによるページレイアウト

html_css.png

CSSによるレイアウト作業は、大きな箱の中に小さな箱を詰めていく作業と考えるとイメージしやすいでしょう。一般的には、container という外箱の中に、header 、navといった名前の内箱を順に詰め込んでいくことになります。

箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示されないので、ソースコードを書く際は、きちんとインデントをとってわかりやすく書くことをお勧めします。

ワイヤーフレームを描く

ワイヤーフレームとは、HTMLの枠組み構造を図解した「サイト設計図」です。HTML+CSSを効率よくコーディングするには、まずはじめにワイヤーフレームを描いて、header, nav, main {section+aside} , footer などの位置関係を明確にしましょう。詳細な領域区分をする場合、各要素 ID名を付ける場合は、この段階で明確にします。
GoogleImage:Web ワイヤーフレーム


boxModel.png

ボックスモデルを理解する

箱組みをする際には、どこにどのような余白をつくるかが非常に重要です。以下のプロパティーについての理解が必要です。

参考:CSS/BoxModel


ユニバーサルセレクタによる余白のリセット

ブラウザにはデフォルトCSSというものがあって、特に指定のない要素には自動的に margin, padding が適用されます。これは、デザイナーが精密な位置調整を行う場合に邪魔になるので、すべての要素に対して「余白のリセット」を行った上で、後に各々に余白の定義をするのが一般的です。
 ユニバーサルセレクタ( * )を使うと、すべての要素に一斉制御が可能になります。CSSの先頭で、以下のような記述をするとよいでしょう。

* {
    margin: 0;
    padding: 0;
}

この例では、すべての要素に対して余白をゼロにリセットしています。


レイアウトに必須の手法

とりあえず、以下の2つの手法で大半のレイアウトは可能になります。


Flexboxを用いたレイアウト

親要素(Flexコンテナ) に display: flex; を設定することで、子要素(Flexアイテム) の並び(縦・横)や順序(上下・左右)を制御する方法です。例えば、親要素に対して、display: flex; flex-direction: row; と書くと、子要素は横に並びます。
以下、メニューを横に並べる事例です。

詳しくは、CSS/Flexboxをご覧下さい。


positionを用いたレイアウト

通常の「箱詰め作業」では、要素同士が重なるような配置はできません。しかし、「絶対的にこの場所に表示したい」というケースもあります。そのような場合に使えるのが、positionというプロパティーです。これを使うと、任意のブロックを基準にして、その左上を原点とした座標で、配置したいブロックの位置を指定することができます。


テンプレートから個別ページへ

html_css_2.png

index.html と style.css のセットは、いわばページのテンプレート(ひな形)です。実際のWebデザインでは、ここまでの作業に多くの時間をかけます。

gallery.html や links.html など、新しいページは、index.htmlを複製して、主たる記事の部分の部分だけを書き換える・・という単純な作業となります。




CSSレイアウトサンプル

サンプルのHTML構造を変えて(ワイヤーフレーム構造を変えて)様々なパターンサンプルを作ってみましょう(講習時間外演習)。


基本形(第1回配布サンプル)

#container { header, nav, main { section, aside } , footer }


header の中に nav があるパターン

sample01.jpg
#container{ header{ nav } , main{ section, aside } , footer }


main の中に 3つのブロックがあるパターン(3カラム)

sample02.jpg
#container{ header, main{ nav, section, aside } , footer }


header, footer が画面幅100%になるパターン

sample03.jpg
header{ nav } , main{ section, aside } , footer

上記3つの実現事例(コードまとめ)

シングルページで構成するパターン

header, nav,  main{ section, section, section ・・}, footer

PAGES

GUIDE

DATA


*1 ただし近年、例えば モリサワの TypeSquare などでは、Webページに使用されている文字だけをダウンロードさせる「サブセット化」と、CDN(コンテンツ配信ネットワーク)の利用によって、従来の数倍の速さを実現するなど、日本語Webフォントの利用は増える傾向にあります。本格的なサイト制作にはWebフォントの活用を検討すべきでしょう
添付ファイル: filebackup.png 52件 [詳細] filesample.jpg 63件 [詳細] fileyoutube01.png 53件 [詳細] fileyoutube02.png 51件 [詳細] fileyoutube03.png 51件 [詳細]
Last-modified: 2020-11-17 (火) 23:06:01