web・アプリ制作でよく使うツール ver1

メモ的に・・・


続きを読む

サイト製作の見積もりって？

webディレクション、プロデューサーにとって
料金の見積もりってとても大事です。

　見積もりの出し方は
　１．一式計算（1プロジェクトいくらという形で設定）
　２．人工（にんく）計算（サイト制作を行う人数とその稼動時間にあわせて計算）
　３．単価（作業量）計算（1つ1つの作業工程に対して単価を設定）
　などの方法があります。

参考になるURLを載せておきます。
http://c.p-advg.com/adpCnt/r?mid=911488&lid=2

以上、自分メモでした。

タグ：フリーランス WEB 製作 開発 費用 見積もり

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}

おさらいメモ

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

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

まず…
・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


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

背景画像を下まで繰り返す方法

説明はのちほど

あああああああああああ

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%指定*/

}

主要ブラウザの系統

Trident系→Internet Explorer
Presto系→Firefox,Opera
Webkit系→Safari,Chome,(Dreamweaverライブビュー)

以上

タグ：Trident PRESTO WebKit Internet Explorer Firefox Opera Safari Chome

SyntaxHighlighterの導入テスト

ソースコードを綺麗に表示できるSyntax Highlighterを
導入してみたくて、色々と調べていたら
このブログがとても参考になりました。
http://kusaredaigakusei.blog.so-net.ne.jp/2011-06-18
ブログ作者ありがとうございます。


以下、テスト

これはテストです

タグ：ソースコード Syntax Highlighter

clearfixのメモ

実は今までclearfixという存在をしらなかった（恥＆汗

とても参考になる記事
http://kojika17.com/2011/04/floatclearfix.php

clearfixのコード

.clearfix:after{
    content: "."; /*指定した要素の後ろに(実体のない)オブジェクトを表示 */ 
    display: block; /*ブロックレベル要素に */
    height: 0; /* 高さは0*/
    font-size:0;	/* フォントサイズも0*/
    clear: both; /* もちろんフロート解除*/
    visibility:hidden;/* 非表示*/
    }

上記が一般的なコードと思われる。

しかし、私にとっては意味不明なものがいっぱいw
そもそもafter疑似要素って何？
で、参考にしたのがコレ
http://zero.css-happylife.com/selectors/after.shtml
ほーなるほど、contentプロパティとの組み合わせで、指定した要素の後に指定した内容を生成できると…
しかもheightを指定するのはフロートをしている子要素があると
IE以外のブラウザだと、親要素の高さを算出させなくてはならない意味があったのね。

ちなみに｢/zoom:1;｣のようにプロパティの前にスラッシュをつけると
IE6と7だけに適用されるようです。
http://www.coolwebwindow.com/csstips/csstechnic/000277.php

hasLayoutとは（IEでのCSSのバグを回避するhasLayout | コリス）
http://coliss.com/articles/build-websites/operation/css/143.html

但し、zoom:1の利用も計画的が必要とのこと。
http://likealunatic.jp/2007/09/16_zoom1.php

以上メモ書き

追記
ちなみにグローバルナビゲーションのようにli要素でマークアップし横に並べるのを
floatプロパティで行った場合、ul要素のなかにはli要素以外の要素を
入れてはいけないので、親要素のul要素に「clearfix」を適用する。

タグ：cleafix float