学科 CSS基礎①

-本日のアジェンダ-

1限目
学科 CSS基礎①
CSSの記述【文字】

2限目
学科 CSS基礎①
セレクタの得点について

3限目
学科 CSS基礎①
コメントアウトについて

4限目
学科 CSS基礎①
CSSのまとめ

5限目
学科 CSS基礎①
グラフィックツールの復習

本日のテーマ

「セレクタ」「プロパティ」「値」の基本構造を理解しましょう。

CSSとは?

Cascading Style Sheetsは、HTMLやXMLの要素をどのように修飾するかを指示する仕様の一つで、World Wide Web Consortium がとりまとめ勧告する。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。 ウィキペディア

ワンポイントアドバイス

CSSとHTMLの両方を駆使してWebサイトを構築していきますが、HTMLとCSSは開発元が異なります。単純に密接な関係なのに記述ルールと役割が異なります。
まずはしっかりとルールの違いに気を付けて学んでいきましょう。

CSSの記述ルールの基本として

セレクタ{
プロパティ :値;

※この「 セレクタ」「 プロパティ 」「値」の構成をしっかり意識して使い方を学んでいきましょう。

CSSのブラウザ対応について

HTMLやCSSを学ぶ際に最も気を付けなければならない事は、ブラウザに対応しているかどうかです。ここまでご紹介したHTMLのタグはほぼどのブラウザにも対応したタグです。逆に考えてもらうと、HTMLのタグもCSSのタグもここで学ぶ以上のタグが存在します。

ワンポイントアドバイス

検索などで独自に調べたタグは要注意です!非推奨やブラウザでは非対応ブラウザが存在したり、PCでは使えるがスマートフォンではNGのタグがあります。
特にCSSは、使えないタグは見た目の実装を不可能にします。
まずは、広く使われている、どのブラウザでも対応している基本のタグをしっかりと把握していきましょう。

参考サイト

CSSの記述【文字】

まずは文字の装飾や大きさ位置などを指定するCSSから覚えていきましょう。
文字に関するCSSの特徴は、正しく記述したら必ず見た目が変わります。
もし、変わらない時はHTMLの記述が誤っているなど他に原因があるかもしれません。注意して記述の練習をしていきましょう。

ワンポイントアドバイス

デザインしたサイトの文字情報はSEO対策として出来る限り画像文字にはぜずテキスト文字にするイメージをしっかり持って「どんな事ができるのか?」を確認しておきましょう。

サンプルページ(CSSの記述【文字】)

参考サイト

ショートハンドについて

CSSのプロパティにはまとめて記述するための「ショートハンド」という書き方が用意されています。

ワンポイントアドバイス

CSSの記述はショートハンドという短縮して記述できる書き方があります。お仕事で誰かが作成したサイトを編集する時に、両方を理解しておく必要がありますので、しっかりと覚えておきましょう。

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科 グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

学科 HTML基礎⑦

-本日のアジェンダ-

1限目
学科 HTML基礎⑦
CSSの読み込み方について

2限目
学科 HTML基礎⑦
FTPサーバーについて

3限目
学科 HTML基礎⑦
FTPサーバーの取り扱いについて

4限目
学科 HTML基礎⑦
HTMLのまとめ

5限目
学科 HTML基礎⑦
グラフィックツールの復習

本日のテーマ

タグチェッカーを活用しましょう。

CSSの読み込み方について

CSSを書く方法(場所)は3パターンあります。それぞれメリット・デメリットがあるため、この3パターンを組み合わせてCSSを書いていくのが良いでしょう。

パターン①「 外部ファイル 」

1つめの方法は、外部ファイルのCSSから読み込む方法です。つまり、CSSファイルを別に作り、HTMLファイルから読み込むということです。この作成したCSSファイルは外部スタイルシート(外部CSS)と呼ばれます。ウェブサイトを作る時にはこれが最も一般的な方法です。

パターン②「 styleタグ」

2つめの方法はHTMLファイルのheadタグ内に<style></style>を書き、その中にCSSを書く方法です。

パターン③「 style属性を使う 」

3つめは、HTMLのタグにstyle属性を書く方法です。文字にサクッと色をつけたり、線を引いたりするときには便利ですが、タグにいちいち書き込む必要がありやや手間がかかります。また、後からまとめてデザインを変更することもできません。

ワンポイントアドバイス

基本的には外部ファイルで作成しましょう。また外部ファイルは1ファイルにまとめるのがベストですが、管理や運営方法を考えて使い分けましょう。

参考サイト

FTPサーバーについて

FTPサーバとは、FTPを使用してファイルの送受信を行うサーバのことである。 ファイルのアップロード・ダウンロードにはFTPクライアントソフトウェアが必要だが、最近のウェブブラウザにはこれが組み込まれている場合が多い。 

ワンポイントアドバイス

サーバーについては、案件ごとにどのサーバーを利用しているかしっかりと確認を取ってから制作依頼を受けましょう。サーバーによって基本的な設定が異なったり細かい違いがありますので、確認作業をしっかりと行いましょう。

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科 グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題③

サンプルファイルをFTPでサーバーにUPして、Wordpressの記事に投稿してください。