1月26日 授業内容

 見出し=spread sheet


・Webページを表示する仕組み
http://d.hatena.ne.jp/web-0818/20160126/p1 
画像と情報を並べるのはあまりベターではない時がある。画像があると文章を読まなくなる為。
ランディングページ
http://ukon.house-wf.co.jp/ 


プログラマーが見たほうがいいページ
http://www5e.biglobe.ne.jp/~aji/3min/index.html 
CMS
http://www.nttd-bb.com/service/web/cms/about.html 


絶対パス(http:wwwから始まる)・・・wwwはサーバー形式を表す

教科書P44
  ・ディレクトリ
 ・同一階層: ./
 ・上位階層(1階層上に上がる): ../
 ・ルートパス: /

URLの後に/index.htmlがある


相対パス
教科書P44

f:id:paris1204:20160126232123g:plain


../ 一階層上に上がる


*リストからのリンクがありすぎると検索エンジンは拾わない。
<p>タグからのリンクが1番強い




CSS・・・親で指定したものが下に引きづがれる
cascade・・・小さな滝


CSSの概要

d.hatena.ne.jp

 

記述ルール

記述ルール - Webデザインの勉強 | Webサイト制作科 1月20日開講クラス




html validator(読み込み要)


Web developper(読み込み要)


グーグルクロムとfire foxに読み込む


*HTMLを完全に仕上げてから(文法)CSSを打つ


1.0em=16px


CSSでコメントを入れるときは  /*コメント*/


デシマルタブ・・・ワープロソフトなどで、数値の一覧を作る際に、縦に並ぶ数字の位置をそろえる機能。小数では小数点の位置、整数では1の位が縦にそろうように調節する。これにより、数値の一覧が見やすくなり、比較もしやすくなる。

#:ハシュタグ

 

フォントの良い組み合わせ
font-family:
"Hiragigo Kaku Gothic ProN"
Meiryo
sans-serif;

 

HEX Color:R G B

 

カラーモード(RGBカラーとCMYKカラー)とは?|データ作成の前に|印刷通販の【WAVE】

 

  • rem

6px≒1.0em

教科書P67,68に記載

フォントサイズの指定はCSS3の「rem」が便利そう | HTML5 – CSS3 mag

 

ボックスモデル

f:id:paris1204:20160127001144g:plain

html、css入力内容

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSの練習</title>
<style>
h1{
  font-family:
  "Hiragigo Kaku Gothic ProN"
  Meiryo
  sans-serif;
  color:white;
width :300px;
padding:20px;
font-size:2.0em;  /*16pxの2倍*/
background-color:red;
text-align:right;
}
p {color:white;
padding:5px;
width:6.0em;
font-size:32px;
background-color:blue;
font-weight:bold;}
</style>
</head>


<body>
<h1>大見出し</h1>
<p>こんにちは!</p>
<h2>こんにちは!</h2>


</body>
</html>