RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
RedLine Magazine : 最近重宝しているちょこっとツール
最近重宝しているちょこっとツール 作業中のちょっとした瞬間に便利だなーと感じるツールのご紹介。 Server Switcher 普段phpを使ったページなんかを作る時はXAMPPを使ってローカルでサーバー環境を作って作業してるんですが、ローカルで作ったものを本番サーバーにアップして、相方にチャットで「ちょっとこのページ見て欲しいんだけどー」とかいう時に私よく間違えてlocalhostのurlをコピーしてしまって「これローカルｗｗｗ」とかツっこまれたりしてます。実際Fxのタブでローカル側と本番サーバー側、両方開いてるんだけど、パっと見た感じが同じなのでうっかりローカルのアドレスバーをコピーして送ってしまったりするんですよね（私だけか） そういうちょっとしたミス以外でもローカル側と本番サーバー側を簡単に切り替えられると便利なのになーと思っていたところ、先日こちらの記事でFxのAdd-onの「S
RedLine Magazine : よく使うhtmlとCSSのソースセット
よく使うhtmlとCSSのソースセット 読んで字のごとく、よく使うhtmlとcssのソースセット。プロパティはよく使いそうなやつで値は全部空。自分用ストックだったりするので、もしコピペする場合は状況に合わせていろいろ追加やカットしてくらさい。 ナビゲーション部分用のソース サイトのナビゲーション部分によく使ってるソース。意外とこれ毎回書くの面倒なので個人的にこの雛形は気に入ってる。背景画像は通常時もhover時も全部まとめて１枚もの画像になってる前提。 <ul id="navi"> <li id="menu01"><a href=" " title=" "> </a></li> <li id="menu02"><a href=" " title=" "> </a></li> <li id="menu03"><a href=" " title=" "> </a></li> <li id="m
RedLine Magazine : CSS3 :target擬似クラスでイメージギャラリー
CSS3 :target擬似クラスでイメージギャラリー 最近CSSネタも出尽くした感じで自分でもなかなかこれ面白いよ、と書ける新鮮なネタもないので、海外のサイトで見かけて面白かったものをご紹介。 普段クリックして画像を差替えるイメージギャラリーっぽいものを作る際はjavascriptを使ったりする事が多いんだけど、こちらの記事でCSS3の「 :target」を利用したイメージギャラリーの話が書いてありました。 >>Making an image gallery with :target - CSS3 . Info 内容はimgに対してまずposition:absolute;を指定しておいて、各リンクをクリックした時に:targetの該当img要素に対してz-indexで最前面に配置する、というもの。 ソースやサンプルページはそちらにあるので、そっちを見たほうが早いと思うんだけど、:targ
RedLine Magazine : IE6 standalone の落とし穴
IE6 standalone の落とし穴 ※2008年2月13日夜、「解決した！の巻」追記しました。 大袈裟なタイトルにしてしまったけど、そんな大袈裟なお話ではないです。ごめんなさい。 どうでもいいと言えばどうでもいい話なんだけど、2月13日に先駆けてIE7をstandalone版から正式版に変更した。とはいえIE6もまだまだ無視できないということで、IE6の検証にはevolt.org - Browser Archiveのものを利用させてもらってるわけなんだけど、どうもコイツは透過絡みの処理ができないっぽい。 jsでもcssでも「透明」と名のつくものは一切関知しません的な態度をとられてるんだけど、これ何とかする方法ってあるのかな。なんかIE7正式版+IE6 standalone環境もいいじゃんって思ってたけど、思わぬ落とし穴だった。もしかして私だけだったりする？わかんないけど。 つーことで
RedLine Magazine : 半透明ボックスに関するメモ
半透明ボックスに関するメモ ※2008年2月8日、IE6でinputボタンが押せない件について追記しました。 半透明ボックスに関してのメモ。 デザイナからの要望はこんな感じ。「よくあるタイプのコンテンツ部分の背景に単色ベタの土台を置くようなデザインじゃなくて、今回は背景画像を活かしたデザインにしたい、テキストやら写真やらの中身を入れるボックスだけ半透明にして見せたい背景画像をうっすら表示させたい。」 今回やっかいだなと思ったのが、コンテンツ部分が全面そういう風に背景の上で半透明になっているのではない点。タイトル画像が入る部分やそれぞれのセクションの余白部分は半透明ではなく、素の背景が見えるというもの。文章にするとややこしい・・・つまりこんな感じ↓。(背景とか色合いとか変だけどあくまでサンプルだから気にしないでください・・・。) 半透明のボックスって中身も半透明になるんだよね CSSだけでボ
RedLine Magazine : jQuery Cycle Plugin を使ってみました
jQuery Cycle Plugin を使ってみました 少し前にSBMなんかでよく見かけたjQuery Cycle Plugin、かっちょいいからいつか使いたいなーと思ってたんですが、タイミングよく機会があったので使ってみました。 jQuery Cycle Plugin って何? jsライブラリ「jQuery」のプラグインで、これを使うといろんな種類のエフェクトを使って画像のギャラリーが簡単に作れるという物です。エフェクトというと、なんとなく「script.aculo.us」を連想したりもするんですが、とりあえずサイトでjQuery使ってるし、その流れでjQuery Cycle Pluginを使ってみようということになりました。いろんな動きがあるので、まだ見たことない方は一度jQuery Cycle Pluginでデモを見たらいいかも、です。 設置方法も簡単だった で、さっそく準備。jQ
RedLine Magazine : microformats の簡潔すぎるまとめ
microformats の簡潔すぎるまとめ ちょっと友人と話をしてて microformats って何よ?みたいな話になったので今日はその話。(今頃?とかは言わないで･･･) microformatsって分かるような分からんような･･･なんかイマイチ内容を超簡単に素人向けに話してくれてるサイトがなかなか見つからなかったので、ここでは超簡潔に記載してみる。 microformatsっていうのは要するに、今使ってるxhtmlソースの中身にちょこっとだけ手を加えるといろいろ可能性が広がるぞ、というもの。 その可能性とは、例えばイベント情報なんかを掲載してくるページでmicroformatsで定義されてるものをちょこっとプラスすれば、これはそういう情報だ、この部分が日時でこっちの部分が場所を示しててここの部分はイベントの名前ね･･･はいはい、わかりましたよーてな感じに対応しているアプリケーション
RedLine Magazine : リストタグを使用時のIEでの変な隙間を消す
リストタグを使用時のIEでの変な隙間を消す 私的覚え書き。 リストタグを使用してメニューを作ったりする際にIEだけに変な余白が入る事がある。それを解消するネタ。 >>問題のサンプル・こんな感じ。 Firefox等で見るとちゃんとメニューの間が詰まっててＯＫなのだが、IEの場合だと勝手に余白が入る。marginやpaddingを0にしても、liタグを途中改行しても効果なしで、その都度ごまかしてきたりしてたんだけど、とりあえず原因はIEの場合、リスト内のインライン要素をブロック化すると余計な余白を入れるというかline-heightの解釈が正しくないっぽい。 >>対策はこんな感じ。 li { line-height:0; } a { display: block; background-color:#900; padding: 5px; color: black; text-decoratio
RedLine Magazine : あまり知らないかもしれないclearの話
あまり知らないかもしれないclearの話 一般的にclearプロパティとは「回りこみを解除する」という解説が多く、100％その通りなのだが、どういう仕組でフロートさせたボックスを解除しているのかについてはあまり触れられてない気がするので今日のネタはそんな話。 私の愛読書「Web標準の教科書」でもこの辺りは詳しく解説されてあったのだが、同著ではclearは先行するフロートされたボックスに隣接するかどうかを定めるプロパティと書かれている。 なんとなくclearプロパティでfloatを解除する仕組が気になって仕様書を調べてみた。 9.5.2 Controlling flow next to floats: the 'clear' property 以下、どういう仕組なのかの解説、引用･･･ left The top margin of the generated box is increased
RedLine Magazine : 検索フォーム続編：Safari だと酷すぎる
検索フォーム続編：Safari だと酷すぎる で、一晩空けて親切な方がSBMのコメントにて「Safari だとひどい」と教えてくださった。しかもーースクリーンショットまで作ってくださりました。で、こんな感じ。(forestk様、ありがとうございます。直接画像にリンクするのもアレだったんでDLさせて頂きました。) ※追記：cornsさんもページ全体をキャプチャしてくださいました。 ありがとうございます! >>で、こんな感じでした。 ･･･これはひどいな。 ここでSafari用ハックを考えたわけですが、 (追記)ごめんなさい。間違ったソースを書いていたので勘違いされる方がいらっしゃると申し訳ないので、ソースは削除しました。 キャプチャして頂いた画像を見ると前回の指定でSafariに効いてるのはテキストフォームの幅・高さくらいなのかな。ボーダーはコレ入ってるっつーかデフォルト状態なのかな。←Sa
RedLine Magazine : 気になった初期化CSS
気になった初期化CSS コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。 >> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス 初期化する内容やどこまで初期化しておくのかは案件ごとのデザインなどによってケースバイケースだったりして、完全にこれが私のリセットCSSですと言えるものはないのだけれど、それなりにいつもだいたい使いまわしている自分のリセット部分のソースと見比べて考えてみた。いろいろと拝見して気になったものが2つあったのでメモ。 select option に paddingを指定する 予めブラウザのデフォルトスタイルを全称セレクタ（*）なんかで一気にpaddingを0に指定してしまうと、Fxなどの一部のブラウザでだけのようだけど、selectのoptionの右端が下向き矢印マークで隠れてしまうことが
RedLine Magazine : Firebugを使ってjQueryを実行
Firebugを使ってjQueryを実行 先日jQueryの記事を書きましたが、Firefoxの拡張のFirebug使って、便利に使える技を紹介してくださってたサイトさんがあったのでご紹介。 Firebugをもっと使いやすくするためのブックマーク（jQueryバージョン） - WEBデザイン BLOG 元ネタはLearning jQuery » jQuerify Bookmarkletだそうですが、上記WEBデザイン BLOGさんでも使い方を詳しく説明されていたので、すごく分かりやすかったです（例がはてブなのがいいw） 蛇足だと思うけど必要なもの Firebugをもっと使いやすくするためのブックマーク（jQueryバージョン）- WEBデザイン BLOGの下記からjQuerifyをゲット。 Firebugを入れてない場合は下記からアドオンゲット。 >>Firebug :: Firefox
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
