実際に作る前に。。。。
前回リンクした記事を参考に、
まずは座学が必要ですねw
いったんパソコンを触る手は止めて、
記事の内容を熟読したいと思います。
ではではw
デフォルトスタイルシート、リセットスタイルシートについて。
デフォルトスタイルシートから考える、リセットCSSの留意点|Web Design KOJIKA17
こちらの記事では、
『デフォルトスタイルシートを知ることで、的確にデフォルトスタイルシートの全てをリセットすることが可能です。』とのことで、
なるほどですね。
すごく刺さりました。
ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた)|Web Design KOJIKA17
とても研究熱心なんだなーと、尊敬しました!
僕も、自分で検証する姿勢を持ちます。
CSS: marginの正しい理解 (CSSのmarginが難しい)|Web Design KOJIKA17
KOJIKA17さんの記事を参考にさせて頂きました。
あざます。
スタイルシート[CSS]/ボックス/ボックスのパディング(内側の余白)を指定する - TAG index Webサイト
ボックスモデルに対する数値の指定方法は、上記の記事を参照しました。
今日も試行錯誤です!
頑張りまっす。
margin : 0 auto ; が効かない件。→解決しました!
昨日の続き。
カテゴリマスターからのアドバイス。
<div> に width が指定されていないので、
ブラウザの初期設定である width : 100% ;が効いているため、
margin : 0 atuo ; が効かないとのこと。
margin は "余白" なので、
横幅が100%だったら、
<div>のボックスモデルが
画面の左右両端へとびよーんって広がるため、
横幅が100%ならもちろん、余白が入る隙など無い。
CSS :<div>に余白無いやん。。。。言うてることめちゃくちゃやん!
ブラウザ:<div>に指定が無いなら横幅びよーん!!!!!
というコミュニケーションが成立しているということか(^◇^)
なるほど。
CSSで宣言が無い場合、
ブラウザは「初期設定でOKなんだね!」と解釈し、
デフォルトでレイアウトしてしまうということか。
次回の記事では、デフォルトCSSの記事を書きたいと思います。
今日も昨日の続きに入って行こう!!!!!
さっそくコーディング♪
【HTML】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="css/sstyle.css" type="text/css" >
</head>
<body>
<div>
<header> ここはヘッダーです。 </header>
<nav> ここはナビゲーションです。 </nav>
</div>
</body>
</html>
【CSS】
@charset "utf-8";
/* CSS Document */
div {
margin:0 auto;
background:#637A92;
}
header {
width:980px;
height:200px;
background:#B15D5E;
}
nav {
width:980px;
height:80px;
background:#A68586;
}
んー。。。。
margin : 0 auto ;が効かない(';')
さっそくつまずいたので、知恵袋で質問してみました(^^)/
すみません。これからWEBサイトを作りたい... - Yahoo!知恵袋
他にも
検索してみると、いくつか参考にできそうな記事が!!!
HTML5における要素の分類(コンテンツ・モデル)-HTML5リファレンス
[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ - WEBCRE8.jp
コンテントモデル - HTML5タグリファレンス - HTML5.JP
<header>と<nav>はフロー・コンテンツなのはわかったが。。。
いったいどうすりゃいいんだよ!!!!!!!
どうやったら中央寄せにできるんだよ!!!!!
んー、手強いぜHTML!!!!
ブログ、始めまっす!
WEBサイトが作りたくて、
その記録としてブログを始めます!
訪問して頂いたみなさんに役立つ情報もお届けできたらと思います!
よろしくお願いします!
今更聞けない?!WEBデザイナーなら最低限知っておきたい有名フォントの数々 | バンクーバーのうぇぶ屋
このブログ、とてもおもしろそうです!!!!
頑張る意欲が湧いてきます!!!
どしどし、コメントもお待ちしております!!!!