HTMLを装飾するもの
HTMLコードがあって、どのように装飾するかをCSSで指定する。
HTMLとCSSは別ファイルに記述する。
HTML＝index.html
Progate
CSS＝stylesheet.css
h1{
color:red;
}
--------------------
htmlとcssの関連付け
---------------
全体を赤にする
HTML
萬澄枝さん
モアメタルちゃん
永尾まりあちゃん
CSS
li{
color:red;
}
---------------------------------
↓
萬澄枝さんだけ赤にする
該当の文字をclass（指定範囲）として任意の名前を付けて、
そこだけにCSSを反映させる。
HTML
萬澄枝さん
モアメタルちゃん
永尾まりあちゃん
CSS
.selecteｄ{ ← 頭に.がつく。
color:red;
}
li{
color:#444;
}
■背景色を変える→「background-colorプロパティ」
その行の色の変更
HTML
大見出し
段落
大見出し
段落
↓
CSS
h1{
background-color:#dddddd;
}
p{
background-color:#ffd800;
}
■背景色の幅、高さを変える＝width、heightプロパティをPXで指定。
HTML
大見出し
大見出し
↓
CSS
h1{
width:500px;
height:80px;
background-color:#9de8ea:
}
imag{
width:500px;
height:200px;
}
■文字の大きさを変える→「font-sizeプロパティ」を使う
赤で10px
青で40px
↓
HTML
赤で10px
青で40px
CSS
h1{
color:#ff0000:
font-size:10px:
}
p{
color:#0000ff;
font-size:40px;
}
■文字の種類を変える→「font-familyプロパティ」を使う
HTML
hello
hello
↓
CSS
h1｛
fomt-fa,ily:serif:
}
p{
fomt-size:"Avenir Next";
}
※明朝体：serif、YuMincho
※ゴシック体：sans-serif、"Lucida Grande"
■要素の一部にだけ反映させる→を使う。
https://www.xserver.ne.jp/bizhp/homepage-creation-by-html/
■html
Hyper Text Markup Languag。意味を付ける役割。
ここは見出し
ここは文章
↓ここは見出し
ここは文章
■HTML構成の意味
: HTML5を使う
： ここからHTMLを使う。言語はジャパニーズ。
：HTMLの範囲指定スタート
サンプルHTML
：HTMLの範囲指定終了
：ホームページに表示させる範囲スタート
見出し
文章を書く場所
：ホームページに表示させる範囲終了
：ここまでがHTML
↓
タイトル
見出し
文章を書く場所
■CSS
HTML→色みなし。文字と画像が並んでいるだけのもの
CSS→デザインする言語
HTMLで書かれたものを装飾する
Cascading Style Sheets
スタイルシート言語
表現できるパターンが多い→習得には時間がかかる→テンプレートを使えば簡単。
■役立つサイト
・テンプレート
TEMPLATE PARTY
無料版もあるが、著作権表示が必要となる。
質が高い。
https://template-party.com/index.html
・学習サイト
Progate
HTML、CSS初級編が学習できる。
https://prog-8.com/
■CMS
Contents Management Syst
HTML、CSSの習得が難しい→CMSを使う。
・WordPressなど。
HTML、CSSのスキルはなくてもできるが、あったほうが役立つ。
＝分析できる。追加できる。バグを解決できる。
title>
- ブログルメンバーの方は下記のページからログインをお願いいたします。
ログイン
- まだブログルのメンバーでない方は下記のページから登録をお願いいたします。
新規ユーザー登録へ
