webデザインの最近のブログ記事
Prototype Window Classはマルチウィンドウ表示を可能にしてくれるJavaScriptライブラリです。
デフォルトでは単純なウィンドウやアラートの表示がMacのウィンドウのように表示されます。
スタイルシートや画像を変更すればオリジナルのデザインに変更することも可能。
使用ライブラリ
- prototype.js
- script.aculo.us
Movable Typeで生成したatom.xmlをphpで読み込み、日付とタイトルにデザインをつけて表示しようとしました。
デザインを入れる前までは問題なく進んだけど、デザインを入れてみると表示が崩れているではありませんか。。。
cssでfloat:leftを指定し、２段組で表示してあげる予定でした。
しかし、右側のdivが１行下がってしまう…。
原因はphp(文字コード:UTF-8)でatom.xml(文字コード:UTF-8N)を読み込み、デザインテンプレート(文字コード:UTF-8)に日付とタイトルをを埋め込み出力(表示)していたため。
phpで出力されているデータ（テンプレート）の先頭にBOM(Byte Order Mark)がつけられ、そのBOMがデザインの崩れを引き起こしていました。
UTF-8とUTF-8Nが混在していました。
すべてのファイルの文字コードをUTF-8Nにすることで解決できました。
問題解決への道のり
- 完成予定のソースを(x)htmlに直接記述 → 思い通りに表示される。
- phpで表示しソースをコピーし、サクラエディタで表示 → 「・・」のようなコントロールコードが表示された
- こんどはTeraPadで表示 → 文字コードがUTF-8Nと認識された
- 使用しているファイルを全てUTF-8からUTF-8Nに変更
いつもExpression Webを使用していたので、全く意識していないものでした。
ちなみにサクラエディタと秀丸エディタのUTF-8はUTF-8Nのことのようです。
関連リンク
コリス
CSS、JavaScript 、WordPress…その他、webサイトの構築に必要な情報が詰まっています。調べものをしていると、かなりの確立で出てきます。お世話になっております。
to-R
jQueryをはじめとした様々なJavaScriptライブラリについて、その他にもSEO対策、CSS、Movable Typeなどの情報を発信しています。西畑さんが制作したライブラリもあり、活用させていただいております。
CSS HappyLife
名前の通りCSSがメイン。様々なサンプルがあるので、導入調査をする時などにとても役立ちます。
そして、平澤さんのラフだけどラフすぎない文章が大好きです。私とタメなのでとても親近感が…(*^▽^*)
余談でした。。。
WWW WATCH
webの最新情報がチェックできます☆XHTMLやCSSの情報はもちろんですが、それ以外にブラウザの動向であったり最近のwebサービスについてなど、サイト制作に必要な情報がGETできていいですよ！
DesignWalker
デザインに関することはココ！ボタンやアイコンを制作するのに必要なテクスチャやアイコンなどを探すときには必ず見ます。
制作の時だけでなく、目が肥えるようにオシャレなサイトを探すときにも利用しています。
無料で使用できる素材を置いているサイトです。
前に書いた「heightLine.js」がなぜかIEとOperaで上手くいきませんでした…。
ということで違う方法を探したらミラクルなCSSでの実現方法が載っていました♪
外枠のdivの中に高さをそろえたいdivを入れてあげます。
中に入れた二つのdivのpadding-bottomを最大限に伸ばしてあげます。
そしてネガティブマージンで相殺してあげます。
外枠のdivにはみ出た部分の表示を見せないように指定してあげます。
CSSはこんな感じにしました。
#line_suppo {
overflow: hidden;
}
#content , #aside {
padding-bottom: 32768px;
margin-bottom: -32768px;
}
なんと高さが揃うではありませんかっヾ(＠⌒▽⌒＠)ノワーイ!
スタイルシートはネガティブマージンを使うと
デザインの幅がかなり広がります。
これはミラクル！という使い方をご存知の人はぜひ教えて下さいね(*・人・*)
※ネガティブマージンとは：marginにマイナス値を設定すること。
参考サイト：CSS-EBLOG
amazonのくるくるウィジットで年末から買った本を表示してみました♪
はまったぁ～(。＞0＜。)ビェェン
JavaScriptでCSSを読み込んであげる技を使おうとしていますが、優先順位で苦労しています。
CSSは基本的に後に書いたもの（読み込んだもの）が優先されるようになっていますが、そうはいかないことがありませんか？
CSSの優先順位はセレクタの獲得ポイントで決まります。
*（全称セレクタ） ＝ 0
要素(p,h1 などのタグ) ＝ 1
class(擬似も) ＝ 10
id ＝ 100
ハイレベルスタイルシート講座でサイバーガーデンの益子さんに教わりました(*^-^)
わかっていながらも、、、、、、はまっています…。
このお話、明日へ続く…カモしれない…。
デザインを変えました！
コンセプトは「パワフルなOLさん」です♪
どぅですか？？？
会社の新人デザイナー君が作ってくれました★
アタシが目をつけていたきらきらの素材集を使ってくれてかなりご機嫌です♪♪♪♪♪
女の子にはオススメの素材！
コレはかなり重宝する素材集です！
この素材集を使って、プライベートお名刺でも作ってみようかと思います♪
