パブー 第２回絵本コンテスト
パブー 第２回絵本コンテスト
パブー 第２回絵本コンテストを絵本紹介 そらくもブログに更新しました。
Webデザイン学習10月04日(火) 見出し(h要素)を表示する
絵本の作り方|そらくも先生の見出し(h要素)をWeb Developerの機能で表示してみると、
トップページに、h3が無い事に気が付きました。
慌てて記述を直し、更新しました。
検索ワード「絵本の作り方」でのチャートが７位まで落ちてしまっていたので、これで持ちかえしを期待します。
ようこそを画像にしちゃおうかな
Webデザイン学習10月03日(月) マージン上下の相殺
マージン左右は相殺されない
相殺されるのは上下だけ。
単にマージンは相殺されると覚えていました。
上記の画像のスタイルシート
<style type="text/css">
*{
margin: 0 auto;
padding: 0 auto;
}
body{
font-size: 100%;
font-weight: normal;
font-style: normal;
color: #000000;
background-color: #cff;
}
#container{
width: 500px;
height: auto;
background-color: #FFF;
margin: 0 auto;
padding: 10px 0;
}
#header{
width: 480px;
height: 50px;
background-color: #999;
margin: 0 10px 10px 10px;
}
#wrapper{
width: 500px;
height: auto;
overflow: auto;
}
#content{
width: 300px;
height: 200px;
background-color: #FCC;
float: right;
margin: 0 10px 10px 10px;
}
#sidebar{
width: 170px;
height: 200px;
background-color: #FF3;
float: left;
margin: 0 0 10px 10px;
}
#footer{
width: 480px;
height: 50px;
background-color: #99F;
clear: both;
margin: 0 10px 0 10px;
}
</style>wrapperにoverflow: auto;の指定が抜けてました。
overflowはまだまだ体感出来ていません。#footer との空きをつくるために入れているようです。
headerの下マージンはwrapperがあるので、相殺されませんでした。
余白は上ではなく下に作る
余白は上ではなく下に作るのが基本のようです。
（clearの上をあけることは出来ない）
×
○
余白15pxの課題
この課題ではwrapperにoverflow: auto;を指定しmargin-bottom: 15px;付けていると、
footerにclear: both;を指定しなくても、wrapperの裏に隠れない事が体感できました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>1003test</title>
<style type="text/css">
*{
margin: 0 auto;
padding: 0 auto;
}
body{
font-size: 100%;
font-weight: normal;
font-style: normal;
color: #000000;
background-color: #cff;
}
#container{
width: 510px;
height: auto;
background-color: #FFF;
margin: 0 auto;
padding: 15px 0;
}
#header{
width: 480px;
height: 50px;
background-color: #999;
margin: 0 auto 15px auto;
}
#wrapper{
width: 480px;
height: auto;
overflow: auto;
margin: 0 15px 15px 15px;
}
#content{
width: 300px;
height: 200px;
background-color: #FCC;
float: left;
}
#sidebar{
width: 165px;
height: 200px;
background-color: #FF3;
float: right;
}
#footer{
width: 480px;
height: 50px;
background-color: #99F;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p>header</p>
</div>
<div id="wrapper">
<div id="content">
<p>content</p>
</div>
<div id="sidebar">
<p>sidebar</p>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
単純な構造でしっかり体感すると勉強になります
Webデザイン学習9月28日(水) 復習
Webデザイン学習は反復して覚える
一度やった課題なので、出来るであろうと思っていましたが、
大間違いでした。
今回学んだ部分は「はい」「いいえ」の扱い
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1
/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>川崎アゼリア・オープン懸賞</title>
<style type="text/css">
p{
float: left;
display: inline;
text-align: center;
}
p.iie{
padding-left: 15px;
}
</style>
</head>
<body>
<p>
<img src="images/b_yes.gif" width="72" height="31" alt="はい" />
</p>
<p class="iie">
<img src="images/b_no.gif" width="72" height="31" alt="いいえ" />
</p>
</body>
</html>「いや違う！もっと細かく指定するはずだ」と思って回答を確認すると全然違っていました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1
/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>川崎アゼリア・オープン懸賞</title>
<style type="text/css">
form{
text-align: center;
}
form label.iie{
padding-left: 15px;
}
</style>
</head>
<body>
<form action="" method="post">
<label>
<input src="images/b_yes.gif" type="image" name="button" width="72" height="31" alt="はい" />
</label>
<label class="iie">
<input src="images/b_no.gif" type="image" name="button" width="72" height="31" alt="いいえ" />
</label>
</form>
</body>
</html>
form要素とlabel要素、input要素
form要素とlabel要素、input要素を使うのを忘れていました。
実際に入力データの処理をするには、CGIやJavaScript等が必要なので、
今回の課題としては、「p要素」の中に「img要素」が入っている状態でもOK。
前回自分がやった課題が忍者ツールズに残っていたので、確認してみると、「はい」「いいえ」の部分は何も解らぬまま正解の丸写しでした。
リストの頭が一文字分前に出る
p {
margin: 0 28px 0 42px;
}
ul {
text-indent: -1em;
margin: 0 28px 0 42px;
}p要素とul要素を１文字分全体左にマージンを多く取り、下げる。
ul要素だけ、text-indentを-1em指定して一文字分左に戻す。
すると、丸だけが飛び出る。
ここも前回理解していませんでした。
丸写しは脳みそになんの刺激も与えない
Webデザイン学習 Good!Web 78/100
テレビ東京
カテゴリーは、フォーマットを決めてワンクッション置いている。
番組サイトは自由にレイアウトしている。
共通ヘッダーの見せ方などそれぞれに工夫が感じられる。
- ジャンル◆テレビ局
- 作り◆html+css+javascript
- イメージカラー◆青
テレビ局のサイトはWeb業界の縮図のように見えます
Webデザイン学習9月28日(水) コーディングの準備
Webデザインの学習は一生続きます コーディングの準備をしよう
HTML5
HTML5の機能が全て使えるようになるのはまだ先のようですが、
ウェブ標準の勉強からスタートした者にとって、なるべく使いたくなるものです。
仕事の場ではまだ多くのブラウザーできちんと見れる事が優先されるので、昔に逆戻りする場合があります。
モバイルサイトのデザイン、コーディングの仕事は一から勉強し直す事になりました。
テレビ局のサイトのように大きなものになると、番組ごとに違う会社で制作していて、
ソースもまちまちです。
沢山のページのソースをチックし、許容範囲とその理由を勉強する必要に迫られています。
MAMP
MAMPを立ち上げ、Web上とまったく同じ状態のものを自宅サーバーに保存し動作確認をしています。
dreamweaverでソースをグループで閉じていき分析していくと、見た事もないような記述が沢山でてきます。
cssファイルよりも、jsファイルが多くあってどのファイルにどんな機能があるか興味が湧きます。
（javascriptの勉強は必要です）
article要素とsection要素
ソースの研究をしているとarticle要素とsection要素がよく出てきます。
共用のヘッダーとフッターに挟まれた、単独でも成り立つ番組のサイトをarticle要素で挟んでいました。
HTML5でサイトをつくろうでは使い分ける条件が書かれています。
説明を読むだけでは解らないものが、少し理解できたような気がしました。
HTML5への移行がどのようにされるか、生で体験出来そうでワクワクする。フレームは勉強しなくていいと思ったのに必要になりそうだ
