HTMLとCSS
dtをfloat:left; ddにはdtの文字幅分dadding-leftをつける。
960 Grid System http://960.gs
>>|| box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4); box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset; |
<meta name="keywords" content="Webデザイン, 初心者の勉強, 課題管理"> <meta name="description" content="Webデザイン初心者の勉強法を書く忘筌。課題管理サイト例として作成。初心者がWebデザインを勉強する時の課題のまとめかたの一例です。"> <title>Webデザイン初心者の勉強 - 課題管理サイト例｜忘筌</title> キーワードは3つまで。descriptionにはその三つの単語を頭文字にし解説を書く。</meta></meta>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのHTML5</title> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> </meta></head></html>
#nav ul li { float: left; } #nav ul li a { width: 160px; height: 50px; display: block; background: url(../img/navSprite.gif) no-repeat; overflow: hidden; white-space: nowrap; text-indent: 100%; } ちなみに、white-spaceとは、 ソース中の半角…
共通やresetはcommon.cssに記述 style.cssに各ページのidをbodyにつけてページ毎のCSSを記述。 html側： CSS側：body#ページ名 { }※DW上でフォルダ移動する際の注意。 テストサーバー上ではアドレスの更新をしてくれないので、ローカルビューにしてから行う。
<header> ヘッダー <nav> ナビゲーション <article> 本文 <aside> 本文の解説、補足など <footer> フッター <section> 章HTML 5は、正しい文法で記述しましょうとルールを変更したもの。 HTML4.0 XHTMLでは、見出しは１〜６まで順番に書かないといけなかった。 書く数字に意味があるため。 h1 大見出し h2 </section></footer></aside></article></nav></header>…
問い合わせフォーム <form action="#" method="post" name="form1"> <p>名前：<input type="text" name="name" size="20" mexlemgs="10"></p> <p>内容：<textarea name="subumit" rows="5" cols="30">問い合わせ内容</textarea></p> <p><input type="submit" value="送信"></p> </form> ※「内容：」とフォームの囲みはベースラインでそろう。（インライン要素だから） Googleドライブからもフォームが作…
横並びのナビボタンをマウスオーバーで切り替える方法。 #nav ul{ width:800px; overflow: hidden; } #nav li{ float: left; } #nav li a{ width: 160px; height:60px; display: block; background: url(../img/btn.jpg) no-repeat 0 0; } #nav li#home a:li…
li { float:left; } ul { overfloe:lhidden; } この二つはセット。 ulはliのwrapperみたいなものと考えればいいのかな？ borderを付ける際の注意 liにboederを付けるとborderの線幅分太るので、その分ulも太らせないといけない。 li aにborderを付ければ、li…
画像をhoverでスライドさせる方法。 background-positionでマイナス値を指定して、トリミングをずらす。visibility; hidden; レイアウトを確保したまま、文字のみを不可視にする。OFF-LEFT text-indent; -999em; 画面左にはみ出させる。 あんまり良い方法じ…
ちゃんと理解出来ていなかったので、おさらい。ブロックレベル要素（Block-Level Elements） 見出し・段落・表など、一つのブロック（かたまり）として認識される。 CSSで属性指定出来る。 <div> <p> <h1>~<h6> <ul> <ol> <dl> <hr> <pre> <table> <adress> <fieldset> <form> <noframes> <blockquote> <center>インライン要素（Inline Elemets） 文章の一部とし</center></blockquote></noframes></form></fieldset></adress></table></pre></hr></dl></ol></ul></h6></h1></p></div>…
borderで囲む際の注意点 ulにtop、right、leftのboederを書き、 liにbottomを書く。 囲み全体をリンク領域にする指定 li a { display: block; } paddingなど、領域をつくるための記述は「li」じゃなくて「li a」の方に書く。
background-repeat: repeat; /*ブラウザデフォルト*/ background-repeat: repeat-y; /*縦軸*/ background-repeat: repeat-x; /*横軸*/ background-repeat: no-repeat; /*繰り返さない*/ memo 囲みの文字をセンターにするコツ h1{ width: 13em;/*文字数＋２文…
width 幅。レイアウトするとき必ず指定する。height 高さ。成り行きで増減することが多いので、autoと入れて可変にする。margin:auto; 左右には反映されるが天地には反映されない。margin:0 auto; 数値を入れると反映される。memo Fire Foxでチェック！ コン…
外側から内側に向かって決めていく。 文章 意味づけ グループ化 グループ名を付ける 組み上げる レイアウトの実行 情報の優先順位を考える ヘッダ→ナビ→コンテント→サイドバー→フッタサイドバーよりコンテントのほうが優先させたいので、配置がサイドバーが…
リセット 全部チャラにして記述しなおす。ノーマライズ 元々の数値を上書きして使う。まだ一般的な手法ではない。 リセットの記述 全てに対した指示。 ＊{ margin:0; padding:9; } 昔のやりかたで、いろいろ問題が出てくるのでやらない。 自分が使ったエレメ…
idセレクタ 一回だけしか出てこない部分に使う。（グローバルナビなど） classセレクタ 複数の場所に指定ができる。 子孫セレクタ 子孫要素にスタイルを適用させたい場合に使います。 これをidやclassよりこれをメインに使う。memo コメントアウトはとめ要素…
link→visited→hover→activeの順で書く。 li a:link { color: #0000FF; } li a:visited{ color: #336699; } li a:hover{ color: #FF0000 } li a:active{ color: #FF6600; } memo リストマークの消し方 list-style-type:none;
綺麗にフォントを表記するための鉄板の指定。 font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 英数字に欧文フォントを使いたい場合 font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif;
body{ font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; } ユーザー数の少ない順に書く。 （mac→Win→欧文） osaka、meiryoなどはデバイスフォントなので「" "」…
CSSの構造を理解する。border ↑ content ↑ background-image ↑ mbackground-coloe ↑ paddingを加えたcontent areaその外にmargin書いていく順番は下から上。ボックス幅=コンテント幅+パディング+ボーダーの太さ+マージンpadding（詰め物） コンテントを太ら…
ヘックスカラー（Hex Color） 16進数（hexadecimal） RGBv（Red, Green, Blue Violet） Hue（色相）、Brightness（明度）、Saturation（彩度）No.ＲＧＢ #000000因に、PC上の色が256色なのは、8Bitだから2の8乗=256色PCが覚えられるかららしい。色選びは色彩…
タイプセレクタ h1やpなど、先日勉強したエレメントのこと。 CSSではエレメントのことをセレクタと呼ぶ div：devision（グループ） em：emphasis（強調） strong：（強い強調） br：break（改行）※CSSは下に書かれたものが優先。重複指定しないよう注意。
Cascadは滝という意味で縦に連なっていく構造のスタイルシートということ。 親（body） ／ ＼ 子 子（h1、pなど） ／＼ ／＼ 孫 孫 孫 孫（id、classなど）参考サイト CSS Zen Garden: The Beauty in CSS Design 文書構造は全く同じでCSSを切り替えてみられ…
起点となるフォルダを「.」で、上位フォルダを「..」で、ひとつ上の階層を表すには「../」、２つ上のフォルダは「../../」。内側からみたとき、この部屋の名前が見えないので、起点から何個分内側なのかを記述する。因に、検索エンジンはindex.htmlを探しに…
本題に入る前に HTML5の目的 アウトライン構造をちゃんとして、画一化をすること。Google ChromeにHTML outlinerという拡張機能があるので入れておくと便利。 Chromeウェブストア書いたソースをブラウザーで確認する Fire FoxFirefox拡張機能 HTML Validator…
SEO対策で大事なこと 検索して現れるのは、検索エンジンにインデックスされたものだけが表示される。 インデックスされやすくするには、正しい文法で書くかということが大事。 タイトルと付け方も重要。 「優先順位の高い語句 カテゴリー 個性的な名前」ex.…
