webデザイナーを目指す日報録：So-netブログ

	ブログをはじめるログイン

CSS Reset - YUI Library　[メモ]

Yahoo! UI Library(YUI)のreset.cssの中身

html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}

2012-01-04 22:53 nice!(0) コメント(0) トラックバック(0)

高速コーティング術を学習する　 [学習メモ]

ちなみにこの本も学習しています。

XHTML&CSS超高速コーディング術

作者: 大藤幹
出版社/メーカー: ソシム
発売日: 2009/12
メディア: 単行本

その際のメモをここで記述

・パーツ一覧ページを用意した方が良い。
・ボーダーは背景の上に表示されるため、線種が実線だと背景はそのボーダーで被る。
　また初期値は「実線」ではなく「無し」になっている
・displayプロパティの「table」は内容に合わせた幅になっている
・上下のマージンの相殺は、floatが指定されている要素、絶対配置されている要素
　displayの値が「inline-block」の要素との間のマージンには相殺が行われない。
・絶対配置の位置指定は、絶対配置にした要素を含む要素のうち、「相対配置」「絶対配置」「固定配置」のいずれかに指定されている最も近い要素のボックスを基準として配置される。なお、IE6以前は固定配置には対応していない。

【セレクタの書き方について】
・基本的にはセレクタの最終的な適用対象となる要素までに経由する要素は、全て記入
・パーツに含まれるすべての要素に対するセレクタと｛｝を階層順に並べて先に書いてから表示指定を行うのが良い。
・body要素にたいしてclass属性とid属性の両方を指定した方が良い。
　classにはディレクトリ名　idにはファイル名
・ページやカテゴリごとに固有の表示をする場合、セレクタはbody要素も含め列挙して書くのが良い。

【コーディング基本ルール】
・floatもしくは絶対配置に幅をセットで指定する
・floatと「display:inline;」をセットで指定する
・floatとclearfixをセットで指定する
・ブロックレベル要素の幅は一番外側の要素にだけ指定する
・高さは指定しない
・hasLayoutの切り替えには「zoom:1;」を使用する

white-spaceプロパティに「pre-line」「pre-wrap」が追加されてる

・シャドーコーディング→実際にコーディングをする前に頭の中でシミュレーションをすること。

【コーディングをするにあたって】
・外側の枠組みをしっかりと作り、その後にその内部（ヘッダ・フッダ・ナビゲーション・サイドバー・メインコンテンツなどの各領域の中身）を作る
＜外枠組み＞
・２段カラムで常にサイドバーの背景画像をフッタに接するように表示させるには、この背景画像をサイドバーの背景画像として表示させるのではなく、その親要素のボックスの背景として表示させればよい。
・IE6ではfloatを指定した要素のボックスとボックスの間にコメントがあると表示が崩れてしまうことがあるので、コメントは終了タグの直前に付ける。
・html要素とbody要素の両方に「height:100%;」とさせてbody要素の背景画像をウィンドウズ全体に表示させる指定方法もあるが、マージンやパディングをbody要素に指定しているとその分だけbody要素がhtml要素よりも長くなってしまい、常にスクロールバーが出てしまう。

＜ヘッダの作成＞
・ルールとして決めているわけではないが、「position:relative;」を指定した時に合わせて「zoom:1;」を指定することが多い。
・fontをまとめて指定する時、ine-heightプロパティの値を指定するときはfont-sizeプロパティの値との間にスラッシュ（/）を入れる。（知らなかったw）
http://www.xml.vc/property/font/font.html
・rightプロパティを使用すると問題が発生することがあるため、可能な限りtopプロパティとleftプロパティを使用する。
・cssソースコードの中で同じパターンで数値部分だけが異なるような指定の場合には、こうすることで異なっている部分がわかりやすくなり、編集もしやすくなる。

＜フッダの作成＞
・フッダ部分のナビゲーションをul要素とし、その子要素である先頭のli要素にはクラスを定義して処理を行う。
・上記の際、li要素と下マージン指定して行と行の間の間隔を広げる。
・「white-space:nowrap;」を入れることでfloatした状態で改行されるのを防ぐ。

【ブラウザで表示チェックする際のポイント】
・スクロールしてみる
・ウィンドウサイズを変えてみる
・元のデザインと比較して差異がないか確認する
・マウスオーバーしてみる
・クリックしてみる
・ステータスバーを確認する
・フォントの異なる環境で確認する

2012-01-02 14:16 nice!(0) コメント(0) トラックバック(0)

HTML5とCSS3を実践的に学習する　 [学習メモ]

今、この本を勉強しています。

HTML5＆CSS3実践入門　最新Web標準を使いこなす (The Pragmatic Programmers)

作者: ブライアンP.ホーガン
出版社/メーカー: インプレスジャパン
発売日: 2011/07/08
メディア: 単行本（ソフトカバー）

そのなかで分からない単語などが沢山でてくるので
ここで自分用のメモを…
そもそもこの言葉を知らなかったw
フォールバック【fallback】（縮退運転）

HTML5においてーー新しい要素と機能

・<header>
ページまたはセクションのヘッダー領域を定義する。
・<footer>
ページまたはセクションのフッダー領域を定義する。
・<nav>
ページまたはセクションのナビゲーション領域を定義する。
・<section>
ページの論理領域またはコンテンツグループを定義する。
・<article>
記事又は完全なコンテンツを定義する。
・<aside>
二次的なコンテンツまたは関連コンテンツを定義する。
・カスタムデータ属性
data-パターンを使ってカスタム属性を任意の要素に追加する。
・<meter>
範囲内の量を表現する。
・<progress>
進捗をリアルタイムを示すプログレスコントロール

このバーのことプログレスバーっていうんだねw
プログレスバー

新しいタイプののフォームフィールド

・<input type="email">
電子メールアドレス用のフォームフィールドを表示する。
・<input type="url">
URL用のフォームフィールドを表示する。
・<input type="tel">
電話番号用のフォームフィールドを表示する。
・<input type="search">
検索キーワード用のフォームフィールドを表示する
・<input type="range">
スライダーコントロールを表示する。
・<input type="number">
多くの場合、数値用のフォームフィールドをスピンボックスとして表示する。
・<input type="date">
日付用フォームフィールドを表示する。
・<input type="datetime">
日付と時刻用のフォームフィールドを表示する。
・<input type="color">
色を指定する為のフィールドを表示する。
・<input type="text" autofocus>
特定のフォーム要素にフォーカスを設定する
・<input type="email" placeholder="ty@example.com">
フォームフィールド内にプレースホルダ（入力すべきデータを表す文字列）を表示する。
・<p contenteditable> aaa bbb</p>
ブラウザを通じてコンテンツをインプレース編集をする

CSS3について

:nth-of-type
→特定のタイプのn番目の要素をすべて検索する。

:first-child
→最初の子要素を検索する。

:nth-child
→先頭から数えて指定された位置にある子要素を検索する。

:last-child
→末尾から数えて指定された位置にある子要素を検索する。

:first-of-type
→指定されたタイプの最初の要素を検索する。

:last-of-type
→指定されたタイプの最後の要素を検索する。

続きはまた今度

2012-01-01 20:39 nice!(0) コメント(0) トラックバック(0)

reset.cssについてはいつも悩ませる　 [問題点]

結局どんなreset,cssが良いのか
頭を悩ませるのだ。

ぐぐっていたら、このような事を書かれたページ発見！

俺の CSS リセット: 2011 冬 - terkel.jp

とてもCSSが長いw

うん〜時間がある時に目を通そうw

しかし、読みたい本が沢山あるw

2011-12-31 01:23 nice!(0) コメント(0) トラックバック(0)

おさらいメモ　 [メモ]

この間、とても悔しい思いをしました
とあるコーディングテストを行った時に
全然出来なかったのです。

躓いた所がたくさんありました。

まず…
・photoshopでのスライスの仕方
http://uradesign.com/php/photoshop_srice.php

・reset.cssについて
http://blog.3streamer.net/html-css-beginner/reset-css-1/

・HTMLとCSSのクラス名を変更したいときは
http://help.adobe.com/ja_JP/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7cd4a.html
置換を駆使しして使えば良い。

・ホームページを中央寄せ
まずはbodyタグに
text-align: center;を指定。
そして下層にdiv#wrapperを作り
margin:0 auto;
text-align:left;
もちろんwidthの指定も忘れずに。
（こんなことでテンパっていた俺は
相当やらかしてしまっていたのだな…）
http://www.1uphp.com/con2/layout/bodycenter.html

・最悪align属性でも良いが、それは止めたほうがいい。
http://columbusblog.tanuki-bayashi.com/?eid=764678

・CSSのセレクタにアンダーバーは使わない
http://okwave.jp/qa/q2010893.html

レイヤーカンプについてはまた今度

2011-12-21 16:41 nice!(0) コメント(0) トラックバック(0)

只今、自分のホームページの構成を変更＆システム的な面も変更中　 [活動報告]

もっと自分のホームページを見やすいように変更中なんです！

そして今日はメタタグについて色々と調べていた
以下、メモ
・テンプレートを使ったときのmetaタグのdescriptionの変更
http://oshiete.goo.ne.jp/qa/2333538.html

・metaタグの順番について
http://okwave.jp/qa/q4185408.html
http://www.seo-matome.jp/html/head/

・Dreamweaver CS4 でテンプレートを適用すると文字化けする件。
http://blog.btmup.com/web-general/dreamweaver-cs4-template-mojibake.html

・metaタグの注意点
http://www.1st-yst.com/spam-example/meta-foul/post-41.html

2011-12-12 00:21 nice!(0) コメント(0) トラックバック(0)

web関連用語～初心者メモ１～　[学習メモ]

学習しておいたなかでの
メモしておきます。

・jQueryでの落とし穴
http://www.magical-remix.co.jp/magicalog/2009/07/07/catche-the-jquery/
そうCSSとJavaScriptの書く順番を間違えたらいかんよね〜

・Dreamweaverでのスニペット利用
http://katt79.jp/blog/2009/01/18/108.php

2011-11-24 11:37 nice!(0) コメント(0) トラックバック(0)

背景画像を下まで繰り返す方法　 [メモ]

説明はのちほど



あああああああああああ

aaaaa

html{
	height:100%;
}
body {
	margin:0;
	padding:0;
	background:url(画像URL) repeat-y scroll left top;
	height:100%;
}

#wrapper {
	height:100%;　 /* IE対策のため指定*/
	min-height:100%;/* 最小値100%指定*/
	background:url( 画像のURL) repeat-y scroll right top;

}
body > #wrapper { 
    height:auto;
	min-height:100%;/* 最小値100%指定*/

}

2011-09-04 13:51 nice!(0) コメント(0) トラックバック(0)

7月23日のSaCSS Special！ jQueryセミナーの感想　 [感想]

今更ですが、感想を書いておこうと思います。

SaCSS Special！ jQueryセミナーに行ってきました。

セッション毎の感想は控えさせてもらいますが
全体的に言えば、
けっこうJavaScriptが分かっているひとじゃなきゃ意味不明になる！
の内容でした。

つまり、それだけ濃い内容でもあり、
各講師の方のセッション時間が約1時間程度でしたので、
無理もないかなぁ。と。
全体的にスピートは早かったです。
でも、所々笑わせてくれるネタが入っていたのは
さすがユニークな方ばかりだなぁと思いました。

IE6が腐った牛乳だと（下記参照）
http://www.itmedia.co.jp/news/articles/1005/17/news033.html
とのことは自分も今知りましたw

でもね、そのIE6用にコーディングする事に
必死になったりもしているのよw

協賛で献本を貰えるのはとても良かったですね☆
ジャンケンで勝ち取りで貰えるの。
きっと全体の1/3ぐらいの人は貰えたのではないでしょうか。

自分はジャンケン弱いんでw
貰えなかったですけどもw

この後も、色々と札幌では勉強会があるようです。

いいなぁ〜札幌は。

旭川でもそういうのやってくれないかなぁ。

P.S
あまりたいしたこと感想ではなくごめんなさいw