スタイルシート設置

Step03ではCSS(スタイルシート)を設置し内容の記述を開始します。

※ここでCSSについて基本を勉強することはしません。後で個々人でCSSについては学んでください。実践して現象や効果を知った上で学ぶと理解しやすいと思います。

CSSの作製手順

01.

CSSのベースをメモ帳から作成します。メモ帳はウインドウズなら左下のスタートからwindowsアクセサリーの中にあります。それをクリックすると白紙のメモ帳が立ち上がります。

02.

メモ帳に名前を付けて「ホームぺージフォルダー」に格納します。名前は
style.cssとします。

同じ要領で
responsive.css
CSSホルダーを作ります。

簡単です!

ここで難しく考えないでください。単にメモ帳の名前を
style.css
と
responsive.css
という2つのファイルを名前を付けて保存しただけです。

03.

<head>と</head>の間に次のタグを入力します。

位置は<title></title>の下が良いかと思います。思いますとはずいぶんと適当に感じるかもしれませんが<head>と</head>の間ならどこでもいいのです。が、タイトルはよく使うのでタイトルの下ということです。

<meta name="viewport" content="width=device-width,initial=1.0">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<link rel="stylesheet" href="responsive.css" type="text/css" media="screen">

04.

作ったstyle.cssファイルにコードを記入します。

/* 説明--* /
それぞれのセレクタとプロパティと値を入れると色が着きます。

※hpstudyのYouTube登録をすると登録概要欄にスタイルシートなどダウンロードできるようにしていますのでご活用ください。
@charset "utf-8";

/* レイアウトベース --------------------------------------------------------*/

#contener,.inner{
width: 100%;
background-color: white;

}

/* header----------*/

#header{
width: 100%;
background-color: blue;
}


/* メイン----------*/

#main{
width: 100%;
background-color: fuchsia;
}

/* サイド----------*/

#side{
width: 100%;
background-color: yellow;
}

/*footer-----------*/

#footer{
width: 100%;
background-color: silver;

05.

作ったresponsive.cssにコードを記入します。

これでレスポンシブWEBデザインのベースができました。
@charset "utf-8";

/* パソコン------------------------------------------------------------*/
@media all and (min-width: 1024px){

#contener,.inner{

width: 1020px;
margin-right: auto;
margin-left: auto;

}

#main{
width: 70%;
float: right;
background-color: fuchsia;
}

#side{

width: 29%;
float: left;
background-color: yellow;
}

}


/* iPad　横 ------------------------------------------------------------*/
@media all and (max-width:1023px){

}


/* ipad縦 ------------------------------------------------------------*/

@media all and (max-width:768px){

}

/* スマホ　縦 ------------------------------------------------------------*/
@media all and (max-width:480px){

}

Step.02のYouTube

YouTubeテープ起こし

スタイルシート設置
Step03ではCSS(スタイルシート)を設置し内容の記述を開始します。
※ここでCSSについて基本を勉強することはしません。後で個々人でCSSについては学んでください。実践して現象や効果を知った上で学ぶと理解しやすいと思います。
CSSの作製手順
①
CSSのベースをメモ帳から作成します。メモ帳はウインドウズなら左下のスタートからwindowsアクセサリーの中にあります。それをクリックすると白紙のメモ帳が立ち上がります。
②
メモ帳に名前を付けて「ホームぺージフォルダー」に格納します。名前はstyle.cssとします。
同じ要領でresponsive.cssホルダーを作ります。
ここで難しく考えないでください。単にメモ帳の名前をstyle.cssとresponsive.cssという2つのファイルを名前を付けて保存しただけです。
③
headと/headの間に次のタグを入力します。
それぞれのセレクタとプロパティと値を入れると色が着きます。
④
作ったstyle.cssファイルにコードを記入します。
⑤
作ったresponsive.cssにコードを記入します。
これでレスポンシブWEBデザインのベースができました。

CSSの概要

ホームぺージを作るためにはクラシックページのHTMLソースにある記述とこれから作るCSSとで構成されます。HTMLは内容を書く場所です。CSSは遠隔操作でHTML内容の個別箇所の指示書です。建物を例にするとHTMLは現場でCSSは設計図となります。

CSSの構文とルール

後で出ますがCSSエディーターというソフトがビルダーには有り、それで簡単にCSSができます。その準備だけ必要です。実に簡単です。

セレクタ、プロパティ、値
この1行だけ理解してください。
例でいうとh1タグ(セレクタ)のサイズと色(プロパティを)18ピクセルで赤(値)にします。
HTMLでページで1度だけ使うセレクタはidで何度も使うセレクタはclass
CSSにはidは#シャープ、classは.ドットを付けます。
このふたつだけです。
例
HTMLでは
<div id="1ページ1度だけのセレクタ">
<div class="何度も使うセレクタ">
cssでは
#1ページ1度だけのセレクタ
.何度も使うセレクタ

次回STEP.04は

ウェブアートデザイナーでロゴ作成

次回Step04ではホームぺージビルダーに付いていますウェブアートデザイナーを使ってロゴやバナーを作ります。全て手作りです。付録のボタンやバナーは使いません。