71.2kg
2009年6月アーカイブ
参考にした記事⇒ウェブデザインライブラリー
初心者向けだったこともあって本当に簡単でした。
レイヤーの効果の効果的な使い方をまだまだ知らなかったので、ぽってりとした感じの出し方などとても参考になりました。
ブラシも散布させると楽なこととか今更になって分かって来ました。
やっぱ勉強大事。
71.0kg
70.8kg
70.4kg
71.4kg
71.4kg
僕は6月生まれで、紫陽花は6月の代表的な花なんだけど、紫陽花をまじまじと見ることは本当に最近までなかった。
紫陽花のめしべの色とか花びらの色づく様子とか、どうしてもっと若い頃にこんなに奇麗な花をよく見てこなかったのか分からない。
71.8kg
71.6kg
71.0kg
70.6kg
71.0kg
71.4kg
71.4kg
71.2kg
/* Layout ----------------------------------------------------------------- */
body {
text-align: center; ---- IE5.5以下でも「#content-inner」をセンタリングするための指定
background: #fff; --- body要素の背景を白色に設定
}
#container-inner {
width: 940px; --- 幅を940pxに設定
min-height: 100%; --- 高さの最小値を100%に設定
margin: 0 auto; --- ボックスをセンタリングする設定
text-align: left; --- body要素のIE5.5対策でテキストをセンタリングしているのを戻している
}
#header, #content, #alpha, #beta, #gamma, #footer {
position: relative; --- 相対配置にしている
}
#alpha, #beta, #gamma {
display: inline; --- IE6.0以前で発生するマージン関連を解消するための指定
float: left; --- 左側にfloatさせる設定
}
#header-inner, #content-inner, #footer-inner,
#alpha-inner, #beta-inner, #gamma-inner {
position: static; --- 入れ子になっている要素を普通の状態に戻す
}
#header-inner, #content-inner, #footer-inner {
padding-top: 20px;
padding-bottom: 20px; --- 上下のパディングを20pxに設定
}
#header-inner, #footer-inner,
#alpha-inner, #beta-inner, #gamma-inner {
overflow: hidden; --- ボックスからはみ出た部分は表示されないように設定
padding-right: 20px;
padding-left: 20px; --- 左右のパディングを20pxに設定
}
/* Wide-Thin-Thin */ --- 「3カラム、大・小・小」の幅と配置位置を設定。今選択しているテンプレート
.layout-wtt #alpha {
width: 560px;
}
.layout-wtt #beta {
left: 190px;
width: 190px;
}
.layout-wtt #gamma {
right: 190px;
width: 190px;
}
/* Thin-Wide-Thin */ --- 「3カラム、小・大・小」の幅と配置位置を設定。
.layout-twt #alpha {
left: 190px;
width: 560px;
}
.layout-twt #beta {
left: -560px;
width: 190px;
}
.layout-twt #gamma {
width: 190px;
}
/* Wide-Thin */ --- 「2カラム、大・小」の幅と配置位置を設定。
.layout-wt #alpha {
width: 750px;
}
.layout-wt #beta {
width: 190px;
}
/* Thin-Wide */ --- 「2カラム、小・大」の幅と配置位置を設定。
.layout-tw #alpha {
left: 190px;
width: 750px;
}
.layout-tw #beta {
left: -750px;
width: 190px;
}
/* Medium-Wide */ --- 「2カラム、中・大」の幅と配置位置を設定。
.layout-mw #alpha {
left: 330px;
width: 610px;
}
.layout-mw #beta {
left: -610px;
width: 330px;
}
/* Wide-Medium */ --- 「2カラム、大・中」の幅と配置位置を設定。
.layout-wm #alpha {
width: 610px;
}
.layout-wm #beta {
width: 330px;
}
----------------------------------------------------------
今回はここまで。
次回は"blog.css"のコンテンツに関しての記述部分を調べていきます
71.4kg
71.0kg
70.2kg
71.2kg
72.0kg
ちょっとした工夫で赤いきつねが素敵な"ニッコリ"うどんに。
揚げの上に乗せてからお湯を注ぐとかまぼこが食べごろな固さにならずにちょっと固い。
でも5分後にセットしたんでは遅いので、ニッコリしたら汁の中に沈めるのがベターかも。
71.4kg
71.8kg
72.2kg
72.2kg
70.8kg
71.8kg
71.4kg
71.4kg
テーマを選択した時に共通して読み込まれる"blog.css"の指定内容
以下"blog.css"の内容と解説
/* Base Theme ============================================================= */
/* Reset ------------------------------------------------------------------ */
/*
reset.css - resets default browser styling
http://tantek.com/log/2004/09.html#d06t2354
http://www.vox.com/.shared/css/base.css by beausmith.com
http://developer.yahoo.com/yui/reset/
*/
:link,:visited {
text-decoration: none; ←すべてのリンクの下線を消している
}
html,body,div,
ul,ol,li,dl,dt,dd,
form,fieldset,input,textarea,
h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,
th,td {
margin: 0; ←
padding: 0; ←各要素の余白を0にしている
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%; ←
font-weight: normal;←見出し要素のサイズと太さを標準にしている
}
table {
border-spacing: 0; ←table要素の各セルのボーダー同士の間隔を0にしている
}
fieldset,img,abbr,acronym {
border: 0; ←各要素のボーダーの太さを0にしている
}
/* strict reset by uncommenting lines below */
address,caption,cite,code,dfn,em,strong,b,u,s,i,th,var {
/* font-style: normal; */
/* font-weight: normal; */
}
ol,ul {
list-style: none; ←リストの各項目のリストマーカーを消している
}
caption,th {
text-align: left; ←tableのキャプションと見出しセルの内容を左揃えに設定
}
q:before,q:after {
content: ''; ←インラインでの引用部分を示す"q"要素の前後に引用符が表示されないようにしている
}
a {
text-decoration: underline; ←a要素に下線を表示させている
outline: none; ←a要素にアウトライン（点線の枠など）が表示されないように設定
}
hr {
border: 0; ←
height: 1px; ←
background-color: #000; ←
color: #000; ←横線を1ピクセルの黒い線（#000）に設定している
}
a img,:link img,:visited img {
border: none; ←各種状態での画像のボーダーを消している
}
address {
font-style: normal; ←斜体で表示されるaddress要素を標準状態に戻している
display: inline; ←address要素の表示方法がインライン要素と同様になるように設定
}
/* Utilities ----------------------------------------------------------------- */
↓ここから
.pkg:after, #content-inner:after {
content: " ";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}
.pkg, #content-inner { display: block; }
/* no ie mac \*/
* html .pkg, * html #content-inner { height: 1%; }
.pkg, #content-inner { display: block; }
/* */
↑ここまで"clearfix"と呼ばれるCSSハックを#conntent-inner等に適用
.inline { display: inline; } ←表示方法をインライン要素と同様にするための指定
.hidden { display: none; } ←表示を消すための指定
=================================
以上までが"base.css"の最初の部分の内容と解説でした。
次回は同様に"base.css"のレイアウトに関する内容を調べていきたいと思います。
71.8kg
このテンプレートもMT4.25の標準テンプレートを使って構築しています。
基本からしっかりわかる Movable Type 4.2 カスタマイズブック（Web Designing Books）
という書籍を購入したところ、始めはスタイルシートの基本構造からでした。
あえて、載ってないテンプレートを選択したので、ここで基本構造などを調べていこうと思います。
まず、このテンプレートスタイルは『プロフェッショナル ウェブサイト』の『Professional Black』です。
読み込み専用スタイルシート『style.css』が『blog.css』、『screen.css』という二つのスタイルシートを呼び出しています。
これは標準テンプレートを選択した場合は必ずこうなるようです。
今日はこの辺で。
次回は『blog.css』の内容を調べていきたいと思います
72.2kg
72.0kg
