purazumakoiの[はてなブログ]

技術メモから最近はライフログも増えてきてます。

CSS

sass + compass で改行コードがLFになってしまう

改行コードをCR+LFにしたかった。。 書き出しのcssは基本はCR+LFで、LFにしたいときはこのオプションがっていうのを沢山のブログで見たんですけど今回は、CR+LFにしたいのに、ならない!ということで 社内の上手く言ってる人、ダメな人で環境を調査しました…

JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省略して"//example.com"と書くといいらしい

via いい加減、

IE6で背景にも透過pngを使用するiepngfix.js

via 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる | DesignWalker しかしiepngfix.jsは今はリンク切れになってしまっているので こちらのサンプルよりDLさせていただきました。 IE6以下で透過PNGを使用する(JavaScript使用)|…

プロパティの書き順

いろんな書き順があると思うcssのプロパティ ここみて自分のも大体決めておこうと思ったのでモメモ 自分のプロパティの書き順とか|CSS HappyLife いつも大体外側から攻めて行こうってのが基本コンセプト なので大まかにはblockからinlineへっていう順番 細…

IE6とか5.5とかだとリスト間で隙間ができる

縦メニュー時に隙間が出来てしまう! リストはこんなイメージ(aタグをblockにしてある) IEの6以下だと、色々やっていると、リンク間に隙間ができてしまう。 解決方法はhtml内でタグを改行しないとかすればいいけどそれではコーディングがスマートに出来な…

IEで長いvalueだと余白が増えてデザインも崩れる

参照 IEでもボタンをスマートに表示する | Sixsick 掲示板/HTML質問板/IEで、幅の広い(文字数の多い)buttonの形が崩れる - TAG index 解決方法として、CSSで overflow: visible; とすれば、多少長くても解決できるが、paddingで余白調整しようとするとまた形…

IEで親要素の背景がが消えるバグの対処法

IEにはbackground-image: none;したときに親要素の背景まで消えてしまうバグがある。 これの対処法は、その親要素にWidthを指定してあげることだ。 前にも同じようなものがありましたね IE6、5.5でスクロールすると背景が飛んでしまう場合 - purazumakoiの[…

bodyに62.5%と指定する方法

これもWeb Directions East 2008に参加した人から紹介された フォントサイズをブラウザ間で統一するためのTips なんでも業界では有名な、ダン・セダーホルムという人がこのやり方でやっているらしい bodyに62.5%と指定すると何がよいのか? ブラウザのデフォ…

IE6、5.5でスクロールすると背景が飛んでしまう場合

IE6、5.5で背景が白くなって(飛んで)しまうときがある 5.5の方がより顕著にでるが 例えば、スクロールして背景を指定している箇所が見えるところから、外れたり、また戻ってきたりをマウスでグリグリ上下していると 背景画像や、色の指定が効いたりきかな…

割と実用的?なIEのバグ対応方法

他のと同じcss内でIE用のハックをするのは 何か煩雑としたcssになってしまってスマートじゃないので 参考: 条件付コメント(Conditional Comments)実験ページ 1.別のcssをIEの時だけ読み込む <head> **メタ書く** **js読み込んだりとかする** **css読み込んだり</head>…

字上げ(字下げの反対って意味)する方法

text-indentにマイナスを指定してpadding-leftでその分の余白を空ける こんな感じの書式を実現するための方法 ※ただしコレはメモなのです。かくかくしかじか んんんん・・・・・ .note { padding-left: 1em; text-indent: -1em; }

文の改行の仕方について指定する word-breakプロパティ(IE独自仕様)

widthを固定にしたくなくてdisplay:blockに出来ない場合 ウインドウサイズを小さく狭めていくと 日本語を使うとIEの場合一行単位で改行しちゃって見栄え悪いね>< ってのを回避します。 珍しく、分かり易いようにサンプルを作りました! http://purazumakoi…

背景画像を指定した時に1pxずれる

bodyに背景指定して、repeat-yでcenterしたんだけど IEだとブザウザのウインドウサイズを変えた時、左のラインが見えなくなる場合がある。 どんな時に起きるかというと、例えば bodyに800pxの背景画像を置いて、centerに置く、その背景には両サイド1pxのライ…

横並びリストの作り方

CSSメモ その1でも書いたとおり ウェブクリ12月号を見て感化されてメモメモ さて、グローバルメニュー等で横並びリストを使いますが大きく分けると display: inline; float: left; /* 状況によりright */ の二つやり方があります。 inlineを使用するときのH…

CSSメモ その1

僕はWeb Creatoresを年間購読してますが、ことしの12月号に気になることがあったのでメモメモ line-hightに基本「単位なし」を使用する理由 P { line-height: 1.4; } line-hightプロパティは子要素に継承するので、そこで強調(strongとか)した場合、 単位…

番号付きリスト(olタグ)が複数行になるときの整形

olタグを使って番号付きの箇条書きを使うとき、どうしても複数行になって しまう。 番号つきリストだけ左に突き出て、文章は一列に整列してほしいなーって思うところなので、 その方法のメモ ただ、完璧じゃなくてブラウザによってちょっと誤差があるのが悩…

単位指定emと%の違い。

css

下記のサイト様の記事をみて、em派だった私ですが、%にしようかと思いますたよ>< ただの日記 http://sho.tdiary.net/?date=20021206

 コーディングコンテスト用素材でSTUDY 3

メモっぽく書いております〜 コンテンツ部 簡単に言うとこんな感じです。 <div id="content" class="clearfix"> <div id="main">中身</div> <div id="sub">中身</div> </div> サブコンテンツの背景 そして、サブコンテンツ(左側)の背景を指定しているところが <div id="content" class="clearfix"> ←ココ サブの中↓で背景にしても、中に存在するバナー分しか高…</div>

 コーディングコンテスト用素材でSTUDY 2

自分の制作過程を(覚えている限り)振り返ってみる 正直ソースの意味がよくわかってないけどまず、自分が作った成果物(HappyLife Company)です。 http://purazumakoi.web.fc2.com/test/html/ ヘッダ部 div#header h1要素内のイメージはh1要素ごと float:l…

 コーディングコンテスト用素材でSTUDY

ちまたではコーディングコンテストなるものが 開催されていたのですね(^▽^;) 主催者様サイト:CSS HappyLife 友人のmixi日記でログを見てたらあったのですが、どっちみち不肖ワタクシめではロクなソースもかけないので、逆に今気がつけたのはラッキー♪ なぜ…