RedLine Magazine : CSS セレクタ総復習 （2010年5月版）
CSS セレクタ総復習 （2010年5月版） CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://www.w3.org/TR/css3-selectors/ 選択子 http://zng.info/specs/css3-selectors.html (日本語訳) ※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。 目次 * (汎用選択子) E (型選択子) E[foo] (属性選択子) E[foo="bar"] (属性選択子) E[foo~="bar"] (属性選択子
RedLine Magazine : ブラウザ(Win) CSSセレクタ対応状況まとめ （2010年5月14日版）
最近のコメント PHP オブジェクト指向の勉強 └ Red - 2010.01.08 └ hogepage - 2010.01.21 └ Red - 2010.01.22 └ - 2011.11.27 └ houseiii - 2011.11.27 Fireworks トリミング画像を一括書出 CS4編 └ Iper - 2009.06.27 └ Red - 2009.06.27 └ mala - 2011.11.17 └ Red - 2011.11.18 jQueryでボックスを上下左右中央に簡単配置 └ ミラクル - 2009.03.15 └ Red - 2009.03.15 └ entZ - 2011.10.22 └ Red - 2011.10.24 overflow を使用したボックス背景のこと └ - 2007.12.13 └ Red - 2007.12.13 └ - 2007.
RedLine Magazine : PHP修行 「setter/getter」を知るの巻
PHP修行 「setter/getter」を知るの巻 2010.02.17追記 PHPでは「カプセル化」でググる 2010.02.17追記 オブジェクト、getter/setterについての解説 この前書いたMVC勉強のコメントにて添削をして頂いてる最中なのですが、その中でまたもや新たなキーワードが出てきまして･･･。添削して頂いてる最中ですが、分からないコトが出てきたので、先にそっちの勉強して出直してきます。先生、すみません。しばしお待ちを･･･。そんでもって、分からなかったのがこの一文。 setterで値セット、getterで値取り出し。setter,getterを使うことで複数人で開発時に"誰かが勝手なルールで"$nameの値を変更してしまうことを防げる。 ちょっと待って。「setter」「getter」は初耳。教えて！google先生(n'∀')η (n ▼ω▼ ) ＜ sette
RedLine Magazine : CSS 画像の一部を使う3つの方法
CSS 画像の一部を使う3つの方法 こちらの記事でCSSを利用して画像の一部分だけを表示させる3つのテクニックが載ってました。タイムリーに実務で使うかも！とか思ったのでメモがてらにエントリ。 3 Easy and Fast CSS Techniques for Faux Image Cropping | Css Globe ちなみに上記エントリでは、これらの方法を「Faux Image Cropping」って呼んでます。私の拙い英語力ではCropって「作物」としか記憶してなくて一瞬何のこっちゃと思ったんですが、辞書引いてみると「刈る」とかいう意味もあるんですね。なるほどなるほど。 ネガティブマージンを利用する方法 まず１つ目はネガティブマージンを利用する方法。 必要条件 親要素に「overflow:hidden;」を指定 一部分を利用する画像に対してのネガティブマージンの指定 >>ネガティ
RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
RedLine Magazine : PHP 画像にロゴを入れる
PHP 画像にロゴを入れる 追記:090702 はてブのコメントでこのエントリの別案タイトルを頂きました。その名も「PHPのGDライブラリをつかったウォーターマークの入れ方！」（ryuzi_kambeさん、ありがとうございます）こういうのってウォーターマークっていうんだなーと。そういえばなんか聞いたことありました（多分）。普段は「透かし」とか言ってたよ･･･。 ブログを利用してご自身で日々の情報やら画像やらを更新してくださってるクライアントさんから「アップする写真にうちのロゴを入れたいんだけど」というお願いがきた。（画像パクられたくない的な感じ）画像加工のソフト使えばーとか思ったけど、最近放置気味だったPHPの勉強再開のいいタイミングかなーということで、PHPを利用してできないかやってみた。 やりたい事 画像ファイルの右下辺りにロゴを入れたい。 後で「この写真のロゴの入ってない元データを無
RedLine Magazine : スペースは嫌、class付けるのも嫌な時用(追記有)
スペースは嫌、class付けるのも嫌な時用(追記有) >>081210：追記 コメント欄にてもっといい書き方教えて頂きました！ タイトル、なんのこっちゃ？って感じなんですが、そういう時があるんです。例えば会社概要なんかをマークアップした時、定義リストとして書く際にdtに社名、所在地、電話番号・・・って入れるじゃないですか。そういう部分の元原稿って「社 名」みたいな感じで２文字の部分に予めスペースが入ってて見た目を整えてあるものが多いんですね。なんちゃって均等割り付けみたいな感じ。 ところがwebの場合、そういうのってhtmlに直接スペース入れられないじゃないですか。アクセシビリティ的にも文書的にも。もちろんデザイナ目線でのその部分の見た目を整えたい気持ちも分かるんですね。なのでCSSのletter-spacingで左右揃ってなくてもとりあえずなんとなく全部間隔あけとくか、チマチマと例外部分
RedLine Magazine : CMSとして使うMovable Typeガイドブック
CMSとして使うMovable Typeガイドブック 買ってから時間が経っちゃったけど、レビューというか読書感想文。MT4の実用的な本です。 >>CMSとして使うMovable Typeガイドブック ch.01 Movable Type の基本的な操作 このチャプターはほんとに基本的なMTの操作について。ブログの設定だとか管理画面の見方だとか投稿方法だとかを簡潔に解説。一度でもMTに触れたことのある人ならサラっと流す程度でいいんじゃないかなと思う。自分も少し前にローカルにMTOSを入れたんだけど、そいつのダッシュボードと見比べながらサラっと読みました。 個人的に知りたかったのは魅力的だなーと感じてたカスタムフィールドって機能なんだけど、ここでは管理画面のキャプチャと各項目の簡単な説明のみ。次チャプターに期待。あと、もしかしたら実務で複数のユーザーを用意したMTを使ったサイトを作るかもって事
RedLine Magazine : 気になった初期化CSS
気になった初期化CSS コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。 >> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス 初期化する内容やどこまで初期化しておくのかは案件ごとのデザインなどによってケースバイケースだったりして、完全にこれが私のリセットCSSですと言えるものはないのだけれど、それなりにいつもだいたい使いまわしている自分のリセット部分のソースと見比べて考えてみた。いろいろと拝見して気になったものが2つあったのでメモ。 select option に paddingを指定する 予めブラウザのデフォルトスタイルを全称セレクタ（*）なんかで一気にpaddingを0に指定してしまうと、Fxなどの一部のブラウザでだけのようだけど、selectのoptionの右端が下向き矢印マークで隠れてしまうことが
RedLine Magazine : IE7のフォント絡みでこんな話があった
IE7のフォント絡みでこんな話があった Twitter経由でこんなCSSのフォントサイズに関するバグを教えて頂きました。（バグと呼ぶのか、仕様と呼ぶのかは分かりませんが）発端はfloralさんのこの発言。 IE7で検証した？http://redline.hippy.jp/lab/css/bodyfontsize625.php 以前このブログで書いたこの記事。 >>RedLine Magazine : bodyにfont-size:62.5%を指定すると･･･ 内容はbodyに対してfont-size: 62.5%を予め指定しておくと、フォントサイズをemで指定する際、12ピクセル相当なら1.2em、16ピクセルにしたいなら1.6emという風にemを使ったフォントサイズ指定が分かりやすくなるよというものでした。 そしてその記事に対して前述の通り、floralさんのポストからIE7だとなにやら
RedLine Magazine : 実際にMODxでサイトを作ってみる
実際にMODxでサイトを作ってみる なんやかんやと頭の中でやっててもできるかどうか分からないので実際に使ってサイトを作ってみます。MTを初めて使ったときもそうだったんだけど、私の場合、とりあえず一旦雛形になりそうなページを手元でxhtmlとCSSでコーディングして形を作り、その後独自タグとかツール機能に差し替えできる部分のソースを入れ替えるやり方が一番理解しやすいのでその方向でいきます。（要領悪いかもしれないけど） まずデザインを作りました とりあえず今回作ってみるサイトの枠を作ってみました。MODxのカラーは黒と黄緑っぽいので適当にそんな感じのイメージで。 2カラムの左部分にはサンプルサイトに入ってたみたいな最近のエントリとかサブメニューとか、そういうのを入れるつもり。（適当人間なのでその辺りは行き当たりばったりで調べながらできることをやってみる） テンプレート化するのは右カラムのコンテ
RedLine Magazine : MODx スニペットを使ってみる
MODx スニペットを使ってみる スニペットって何だろう？ MODxのスニペットとはphpで出来たスクリプトで、スニペットタグでスクリプトを呼び出すだけで簡単にその機能が使えるというものらしい。有志の方が作ってくださったスニペットが多数公開されている。こんな事いいな、できたらいいな的な機能をパーツとして提供してくれるものといったところなのかな。 MODxのインストール時に一緒にインストールしたサンプルサイトにもいろいろとスニペットが使用されていました。AjaxSearch（Ajaxを使った検索）とかeForm（フォーム）とかWayfinder（メニュー関連を効率よく管理する）などなど。管理画面の「リソース > リソース管理 > スニペット」の一覧にインストールしてあるスニペットがダダダーーって並んでいるので時間がある時にいろいろ調べてみたい。なんせ数が多いので探せば欲しい機能が見つかる気が
RedLine Magazine : MODx チャンクを使ってみる
MODx チャンクを使ってみる チャンクって何だろう？ 複数ページ内で同じ文言なんかを挿入したい際に、その部分をパーツ化しておくといろいろと効率がいい場合がある。チャンクとはソースをパーツ化しておき、テンプレートやドキュメント内からそのチャンクを呼び出せば簡単にソースを挿入できる仕組みの事。ここでピンとくる人はもうピンときてると思う。ピンとこなかった方はフォーラムのこちらのページにチャンクの使用方法について書かれてましたのでご参考に。 >>MODXフォーラム - チャンクの使用方法。。。 MTにもモジュールってありますよね。多分そんな感じ。チャンクはテンプレート内でもドキュメント内使用できる。 チャンクの作成 MODx管理画面の「リソース > リソース管理 > チャンク」でチャンクの作成。 チャンク名はテンプレートやドキュメントから呼び出すときの名前になる。チャンクの説明は自分で後で分かり
RedLine Magazine : MODxの管理画面
MODxの管理画面 MODxの管理画面の様子を1つ1つ確認しながらまとめてみます。はじめたばかりで手探り状態なので間違ってる部分あったら教えてくらさい。 管理画面はこんな感じ MODxの管理画面にログインした一番最初の画面はこんな感じ。一番上にカテゴリ別のメニュータブ、その下のバーの中に上で選択したメニュータブのサブメニューが表示されています。 左のツリーペインの部分、ここが結構おもしろいなーと思ったんですが、ウィンドウズのエクスプローラーのツリーペインと同じような感じで、MODx内で扱ってるドキュメントがここにズラーと並ぶようです。親フォルダがあって、その中に子ファイルがあってーみたいな感じでまとまってます。後ほど詳しく書きますが、なんせ全部のファイルがこのツリーペインで把握、管理できるっつーことみたいです。(多分) 予備知識なんですが、MTなんかでは記事のことを「エントリー」とか呼んだ
RedLine Magazine : 気になるMODxを試してみる
気になるMODxを試してみる MODx(モドエックス)とは、PHPとMySQLで動作するオープンソースのCMSツールの1つです。オープンソースのCMSといえばXOOPSなどが有名ですが、ちょっとMODxに興味を持ったので試しに使ってみます。MODxについての詳細は下記リンク先をどうぞ。 MODx Content Management System（英語） MODx - Wikipedia(日本語) まだ日本ではそこまで有名でもないみたい（？）で、解説サイトがあまり多くはないんですが面白そうなので挑戦。参考サイトは上記 Wikipedia に記載されています。 MODxの特徴 インストールが簡単 Ajaxを取り入れた使いやすいインターフェイス 階層管理が簡単（ツリー形式で分かりやすい） 見た目は静的なURLでページを生成できる 標準の文字コードはUTF-8。eucやshift_jisの言語フ
RedLine Magazine : 変な定義リストをスッキリさせたい
変な定義リストをスッキリさせたい 随分前の話になるんだけど、別の制作会社のスタッフがコーディングしたコンテンツの中でdl（定義リスト）が使われてる部分があった。意味的にその場面で定義リストを使うのは間違いじゃないと思うし、それは問題ないんだけれど、少しソースに違和感があった。今日はそれを書いてみる。 何に違和感があったのか 私が違和感を感じたのはこういうソース。（内容は架空のものに差し替えてます） <dl> <dt>開催日時</dt> <dd>2007年8月18日</dd> </dl> <dl> <dt>開催場所</dt> <dd>日本のどこかの県のどこかの市</dd> </dl> <dl> <dt>参加費用</dt> <dd>1,000円くらい</dd> </dl> 何が違和感かって、定義リストで同じグループのものって普通1つのdlの中にdtとddを並べれば済むんじゃないの？と。そのマー
RedLine Magazine : 100の法則本、読みましたよー
100の法則本、読みましたよー 最近この本を読みました。Twitterのお友達も購入したみたいなので気合入れてレビュー（読書感想文）書いてみます。 Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。 第１章で(X)HTMLの基本を確認 先は長いんですが、一通り拝読して個人的にはこの章が一番濃かったように思う。というのも自分では分かってるつもりでも実はあやふやだったじゃん、みたいな問題にいろいろ気づいた章でした。具体的にはこんな項目。 法則6のメディアタイプ（XHTML文書の基本はapplication/xhtml+xml） 法則15のリンクタイプの種類 私PCDATAとCDATAの違いをちゃんと人に説明できたっけ？ などなど。リンクタイプの話なんかは「興味あるー」とか思ってたくせに放置気味だったし、PCDATAとCDATAの違いについては大事な部分は知
RedLine Magazine : フォントサイズ問題のために100.01%を指定
フォントサイズ問題のために100.01%を指定 70 Expert Ideas For Better CSS Coding | Smashing Magazineをいつかちゃんと読み直そうと印刷までしておいたのだが忘れてた。今日夕方やっと読み直したので今日はその文書からの話。 上記ページにはタイトルの通り、CSSコーディングのより良いアイデアが掲載されている。ほとんどがわりと有名な話だったりするのだが、これは知らなかったわというものがあったので書いてみる。(とかいいつつ有名な話だったら嫌だな) bodyに100.01%を指定する 上記ページの「1.5. Workflow: Setting Up Typography」の中の「Set 100.01% for the html-element.」の部分。結論から言うと、ブラウザのフォントサイズに関する問題を回避するためにbodyに100.01%
RedLine Magazine : StylishでユーザーCSSを楽しむ
StylishでユーザーCSSを楽しむ Firefoxのアドオン、「Stylish」 このアドオンをFirefoxに追加すると、ユーザスタイルを簡単に作れたり、管理できたりするという優れもの。何をどうすればいいのかなどはhamashunさんちのロドリゲスさんとキャシーさんの解説が分かりやすかったです。 Stylishを使ったユーザーCSSの作り方 まず、アドオンを追加したらブラウザの一番下のバーにStylishのアイコンが出るのでそいつを右クリック。そうするとなんかいろいろ出てくる。とりあえず「スタイルを書く」を選択して適応範囲を選ぶ。 適応範囲を選択すると下記のようなウィンドウが出てくる。 上に画像に入ってるソースはウィンドウが出てきた時点で勝手に入ってるので、@-moz-document domain("hogehoge.jp") { } の{}の中にcssを書いていけばOK、なんだと
RedLine Magazine : font-size:82% って何?
font-size:82% って何? なんとなくずっと気になってた事があったので書いてみる。 とある友人がcssにいつも(かどうかは知らないけど)「font-size:82%;」を指定してるのを見て「なんでこの『82』という数字が出てくるんだ、男らしく80とかキリのいい数字にしやがれっ、コンチクショー！もちろん良い意味で。」とかひっそり思っていたわけですが、その『82』という数字が気になって気になって仕方ないので･･･ とりあえず計算してみる。 前提として、ブラウザのデフォルトはどれも16pxであると仮定。 (根拠は過去に何かでそう書いてあるのを見た記憶がある！間違ってたらすみません) まず私がフォントサイズを%で使う際には80%を指定する事が多い。理由は多分何かの本かサイトで12px相当にするには80%にすればいいっていうのを見たからだったように記憶している。となると、計算式はこうなるん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
