webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

web

960 grid system

grid system か free layoutのどちらかしかない。選択肢は2つ。 当然ながらまず、gridsystem でレイアウトすることを考える。 そこで便利な道具がこれ。 illustratorのテンプレートを開く。 highlightしたレイヤーをダブルクリックすると… テンプレートにチ…

web writing

web writting - 中に書かれている言葉の価値の追求 人々は自分の目的を達成しようとするときに、どのようなキーワードで検索するのか。 web は結論から記述する。行間、言外はない。 キーワードで、伝えたい事が正しく伝わるのか。 サイトの title 、h1、bod…

現在時刻を表示する

DayとDate を間違えないなど…自分にとっての落とし穴が満載 インスタンス名を記述し忘れ。 セミコロン記述忘れ。 dayの記述、配列の箇所が怪しい。 var week=[......] でもいいのか、実験してみよう。 <script>var d=new Date();var year=d.getFullYear(); //yearで…

p について考える。

p の中身がアルファベットの羅列だと文章として認識しないのか、きちんと折り返されないで、一直線に表示される。 p はブロック要素だから幅が指定できる。 margin: 0 auto; と記述すれば、親要素の真ん中に配置できる。 p のインライン要素として写真を取り…

ul について考える。

実験の条件 リセットをかけた状態で、liが5つあるulの要素検証をしてみる。 bodyや#containerとの関係もみたいので、bodyに色を付けてみた。 #containerにはwidth: 500px;を設定した。 確認したかったことのまとめ bodyで指定したフォントサイズになってい…

2column layout 演習

2column layout floatするには幅が必要。 大きいブロックをフロートさせて、小さなブロックは成り行きにした。 <p>はパラグラフであることを思い出した。 段落と段落の間は、p{ margin-bottom : 16px;}、のようにまとめて指定すると楽。 imgの周囲にマージンを</p>…

1column layout 演習

1column layout 面として、幅があるから左右の位置指定ができる、アタリマエのことをもう一度確認する。 #containerの幅を指定すれば、bodyに対して左右の位置を決められる。例えば、margin: o auto;といった具合に。 1カラムの場合は、#containerの中央に…

日本の伝統色

ナビゲーションボックスの覚書 課題 nv-01,02,03

幅があれば、マージンを指定できる。#containerに幅を指定する。指定することでmargin:o auto;の記述が意味を成す。 ulも同じ。幅を指定しないと、親要素の幅いっぱいなのか?幅を指定すれば親要素に対して位置を決められる。 ulで幅を決めると、左右の置き…

CSS3 background: rgba(); border-radius

rgba background: rgba(); 背景の色を指定して、透明度も指定できる。 aの値は0から1。 0は透明、1は不透明、つまりソリッドカラーの状態。 border-radius: 50%とは円を作画することである。 一辺の長さのうち、どの割合を曲げるのか、ということ。 曲げ…

CSS3 text-shadow

text-shadow text-shadowはCSS3の新要素。 text-shadow: 3px 3px 3px #AAAAAA; 最初の値はx方向のoffset、右が+。2番目の値はy方向のoffset、下が+。 3番目の値はボケ方の数字だけれども、いまひとつ理解できません。実験しました。数字が大きくなると等比…