主要ブラウザの系統

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

2011-07-14〜作業メモ〜

1.子要素のdiv要素の左右のmarginプロパティの値に「auto」を指定すると、親要素であるbodyにたいして左右のセンターに配置される。しかし、IE6以前のバージョンではこのプロパティは適用されないため、親要素で「text-align:center」を指定する。←基本中の基本

2.上記のbody要素で設定した「text-align:center」は子孫要素に継承されているので、子要素のてキスを左揃えに戻すために「text-align:left」に指定し戻す。←基本中の基本

3.div要素などのボックスサイズは基本的には高さを指定しない。

4.li要素をdisplayプロパティの「inline」で指定することインライン要素になり、横並びになる。
（グローバルナビゲーションなどで画像を横並びにする場合は別。）

5.グローバルナビゲーションなどで画像の下に余白が出来てしまう場合はul要素がli要素に
「line-height:0」を設定すると解消される。但し、IE6は「font-size:1%」も同時に設定する。

６,フロート処理したものは必ずクリアする。

7.フロートした要素のフロート方向のマージンが約２倍になってしまうバグがある(IE6のみ)
インライン要素に指定する事で回避←基本中基本

8.ネガティブマージン（こういう時に使う）
http://www.css-lecture.com/log/css/negative-margin.html

タグ：レイアウト IE6バグ CSS フロート処理 ネガティブマージン

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

2011-06-09~またもや画像置換で手こずるw~

自分のホームページにtwitterとfacebookのボタンを設置しようと思ったら
画像置換がまた、忘れてしまっていたw

今回、そのtwitterとfacebookのアイコンを組み込む上でのメモ。
（自分なりのメモなので、他の人が見たら分からない場合があります。ご了承を）

まずはそのアイコンをそれぞれ、ホバーする時の画像として２種類ずつ用意。

htmlのほうはこんな感じ。

• twitter
• facebook

で、問題はCSS。
まずは２つの画像を重なり合うように置く。

ul .btn_tw {
background: url(../image/index/twitter_icon_hover.png) no-repeat;
}
ul .btn_tw a {
background: url(../image/index/twitter_icon.png) no-repeat;
}
ul .btn_fa {
background: url(../image/index/facebook_icon_hover.png) no-repeat;
}
ul .btn_fa a{
background: url(../image/index/facebook_icon.png) no-repeat;
}

これはアンカーポイントにまで画像を指定するというやり方。

#sidecontents #side_btn ul li {
list-style-type: none;
float:left;
width:64px;
height: 64px;
}

liには必ず、幅と高さを指定する。さらに

#sidecontents #side_btn ul li a {
height: 100%;
display: block;
overflow: hidden;
text-indent:-9999px;
text-decoration:none;　←あってもなくても良い。
}
高さは100％指定の必ずブロック要素にしておく！
（インラインのままでは、次にくるoverflow: hidden;が効かない）
もちろんtext-indentも指定。こうすれば、弾いた文字は消える。

最後に大事なのがこれ

#sidecontents #side_btn ul li a:hover {
/* 　background:none !important;*/
background-image:none !important;

}
アイコンをホバーした時に強制的に、画像を透明化させ
下の画像を写すという訳だ。

以上、メモ。

2011-06-04~私が管理しているwordpressのアップデート~

私が管理しているwordpressのブログのアップデートが
一筋なわではいかなかったので、これのメモを…

まずはアップデートをする前にデータベースのバックアップを
取る為に便利なWP-DBManager 日本語版をインストールをしようと
考えたそれで以下のURLをまず参考にする。
http://wp.mmrt-jp.net/plugin-japanization-project/dbmanager/
参考URL
http://www.ttcbn.net/no_second_life/archives/8281
http://www.koikikukan.com/archives/2009/07/23-015555.php

と、同時にWordPress 自動アップデートを XREA や CORESERVER で使えるようにする
http://www.templatestyle.in/item/wordpress-auto-update-xrea-coreserver.html

さらに.htaccessを作る際、必ず最後に改行を入れること(タイプはLF(Linux))
参考に
http://blog.fxmessi.com/2010/12/01/xrea%E3%81%A7-htaccess%E3%82%92utf-8%E3%81%AB%E3%81%99%E3%82%8B%E3%81%AE%E3%81%AF%E3%83%80%E3%83%A1/

そしてmysqlダンプについて
http://dhive.jp/blog/yama/?p=4708


あとで分かりやすくまとめます。

取り急ぎ

2011-05-07〜webレイアウトの勉強を基礎から〜

ご無沙汰していました。

実はiPhoneを購入しましたが、その操作に慣れるのに数日かかりましたw

さて、今日はメモ書き的なものを…
今、以下の本を熟読中。






〜メモ〜

・「ホワイトスペース」・・・単なる空きスペースではなく、メニューの存在を際立たせるためにも効果のある機能的なスペース。操作性の視認性向上に気を配る。

・構成設計のポイントは、メニューと１画面に表示する情報量をまず割り出す事。
・訴求ポイントを定める。パーツの加工にとらわれないこと。配色もバランスを左右する。
・ロゴの見せ方にこだわらない。機能で素材をグループ化、空きの作り方もレイアウトのうち。
・構成パターンに出るイメージ。サイトの性能にも変化が出る。パーツの扱いにも注意。
・見出しで表情が変わる。位置の違いと印象の違いに注意。配置の法則を知る。
・よりよい見栄えにするなら、行間に画像を入れても良い。
・行間取りは、必須。本文スペースを揃える。見出しのサイズに気を配る。

2011-04-26〜マーケティングの用語メモ〜

ご無沙汰していました。
ちょっとある企業さんのサイトを拝見してでの基本的な用語メモ。

CTR
フルスペル：Click Through Rate
読み方：シーティーアール
別名：クリック率，クリックレート，クリックスルーレート

CTRとは、インターネット広告において表示された広告がどれだけクリックされたかを表す値のことである。単にクリック率と呼ばれることも多い。

CVR
フルスペル：Conversion Rate
読み方：シーブイアール
別名：コンバージョン率，コンバージョンレート，顧客転換率

CVRとは、インターネット広告の成果を表す指標の一種で、Webサイトを訪れたユーザーのうち実際に商取引に至ったユーザーの割合のことである。


LPO
フルスペル：Landing Page Optimization
読み方：エルピーオー
別名：ランディングページ最適化

LPOとは、Webページの中でもユーザーが最初に到達するWebページ（ランディングページ）を最適化することにより、ユーザーを誘導したいページへ向かわせることである。



とりあえずメモ。

2011-04-16〜marginの相殺について〜

自分の思考回路がちょっとてんぱっていてだめなので
整理整頓したら、また書く事にする。

とりあえず参考URL
【CSS】 上下のマージンは互いに相殺されるようだ。
http://www.pxt.jp/ja/diary/article/149/

マージンの相殺と背景
http://adp.daa.jp/archives/000574.html

2011-04-11〜ひいては計画を立てるのが下手〜

前回の記事、なんか最近焦ってばかりで
結果として何も進んでいない自分に気づいてしまったのでそう書きました。
（いや、就活のほうは進めてました。）

あっ本日、Facebookを初めてやってみました。
でも、mixiヘビーユーザーだったので良く分からないですw
誰か教えて下さい（笑）


最近、暖かくなってきたので体の調子もいいです。
酒がダメなのが良く分かりましたw

最近字が書けなくなってきているのに気づきました。
漢字が書けないのです。なので漢字ドリルで練習したいくぐらいです。

で、本題ですが
ちょっと自分のサイトデザイン、行き詰まっている感が…
というか、メインカラーを何に持って行こうかなと…
やはりもっとサイトを巡って…

あっというかこの間買った本活かしてないじゃん！w
webレイアウト帳を見ていたら
って、今色々見ていたらコンテンツ（私が情報発信したいもの、ニーズを配慮して）を
ちゃんとサイトマップ作っていかなきゃならないと分かったよ。

今週から…
・荷物の整理整頓。
・初志にかえり、会社に応募する。
・自分のHPのコンテンツ、ワイヤーフレーム、デザイン構成。

今週は、そんなところかな。

自分でも分かっているのですが、何かしてないと勿体ない気になってしまいます。
ひいては、息抜きが下手→計画を立てるのも下手です。

もっとスローライフに生きたいんですけどねw