CSSの最近のブログ記事

2008年1月29日

最低限これだけ守っていればコーディングがうまくなるポイント

前回のエントリー(HTML及びCSSは習得が難しい言語か!)が適当に書いた割りにはレスポンスをたくさんしていただけてうれしい限りでございます。

こういう風に話題の種を蒔くと広がりがあるのがblogの面白いところですよね、たまに怖いけど。

ところで、僕は人を怒る、注意するといった事がとっても苦手です。
何もいつも僕が正しいわけではないので、もしかして言っていることが間違っていたらどうしようと思うからです。
できればほめちぎってあげたいのですが、長い人生そういうシチュエーションばかりではありませんよね。

HTML+CSSコーディング作業も然りなので、
それに関する、多分これはやっておいて間違いないだろうという項目、
そして僕の好み(ここに該当する項目は適当にスルーしてください)をまとめてみます。

習得度にもいろいろありますし、事情もいろいろあると思いますので基本的に何も禁止はしません、
やったほうがいいよってことですね。

それでは以下詳細です。

最低限これだけ守っていればコーディングがうまくなるポイント の続きを読む >>

Tags:

2007年4月13日

正しく、早く、美しいコーディングを実現するために踏むべき5つのステップ

今コーディング・コンテストエントリー受付中という事もありますが、
最近社内外を問わず、コーディングを教える機会も増えてきたのでメモの意味も含めて再度エントリーに残しておこうと思いました。

当たり前と言えば当たり前なので今回もビギナー向けなんですが、初心・・・忘れてませんか?

では詳細は以下から↓

正しく、早く、美しいコーディングを実現するために踏むべき5つのステップ の続きを読む >>

2007年1月22日

CSSレイアウトが崩れている時に試す10の処方箋

私事で大変恐縮ですが、今月(1月)の20日をもっていままで勤めていた会社を退職いたしました。
今までは「ちょっと見てください」や「うまくいかないんで助けてください~」と一声かけてくれればその場でレクチャーできたのですが、
これからはそうもいかなくなるのでコーディングのレイアウトで躓いたときに皆が読めるようにチェックリストを作りました。

主に初心者を対象としていますが、意外と役にやつかもしれませんので一度読んでみてくださいね。

さて、具体的な処方箋は以下です。

CSSレイアウトが崩れている時に試す10の処方箋 の続きを読む >>

2007年1月16日

DreamweaverのCSSパネルを見やすくする!

コーディングをする時Dreamweaverを使う方がほとんどだと思いますが、
Dreamweaverの右上、もしくは左上にCSSパネル表示していますよね?

こんなの↓

Dreamweaver CSSパネル

皆さんソースコードを書くときにはコメントでHTMLやCSSに区切りを入れて視認性を高めますよね、
今日はこのような視覚的な区切りをCSSパネルにも入れたいなという欲求を叶える小技です。

方法は至って簡単です、あるclassを作成して区切りたいところに挿入するだけ。

DreamweaverのCSSパネルを見やすくする! の続きを読む >>

2007年1月15日

text-indent:-9999pxを使ったときFirefoxで出る無駄な点線は消せます

今日も結構当たり前の話なんですが、先日とあるクライアント様から

「Firefoxでクリックするとバグが出て点線がでるので消して下さい」

というような若干わかりにくい指摘を受けパニックに陥った担当者が僕にヘルプを送ってきたので
ちょちょいと消して対処しました。

要するにこんな点線が左の画面外までのびてしまう現象です

text-indent:-9999pxを使ったときFirefoxで出る無駄な点線は消せます の続きを読む >>

2007年1月 9日

右揃えテキストのアイコンは文字サイズを変更すると文字にかぶるよね

本日のエントリーも当たり前の事といえば当たり前の事なんですが、
休みの間CSSを教えていた子が当たり前のようにやっていて注意した箇所について書きます。

こんな感じで右寄せにしてアイコンつけるシチュエーションって結構ありますよね。

右寄せテキストにアイコンを付けたサンプル

右揃えテキストのアイコンは文字サイズを変更すると文字にかぶるよね の続きを読む >>

2006年12月29日

【text-indent:-9999px】背景置換論争について

CSSの有名なテクニックのひとつに
テキストインデントでテキストを飛ばし背景画像を見せるテクニックがありますよね。
似たものにはテキスト自体を消してしまうImage ReplacementやFlashに置き換えるIFRがあります。

これは非常に便利なんで結構使ってしまうのですが、
クライアントやディレクターから

「これ検索エンジンにSPAM扱いされない?」

という質問をよく投げかけられます。
CSSになじみの無い方からみれば更新しにくくもなりますし、
混乱の原因になることもしばしばあるので疎まれがちなこのテクニック。

正直多分大丈夫じゃないですか、くらいしか答えられないので
とあるコーダーが集まる場所でこの件について話あってみたんですが気になる意見をこちらにピックアップしておきます。

みなから出た意見は以下のような感じです。

【text-indent:-9999px】背景置換論争について の続きを読む >>

2006年12月25日

段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ

こないだ知人に「ある部分にボタンを後からいれようと思ったけど方法が思いつかない」と相談され、
よしきた、下記のような方法を伝授しました。
結構当たりまえのテクニックだと思っていたんですが、まだまだ浸透していないようなのでご紹介します。

段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ の続きを読む >>

2006年11月19日

【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]

僕が主要ブラウザをclearするコードと読んでいる擬似要素を使った方法はclearfixというそうです。実は先日外注さんから教えていただきました。

で、今回のclearfixなんですがIEには独自拡張でzoomというプロパティが用意されているのは少しCSSをかじったかたならご存知の方も多いと思うのですが、

このzoomは実はなかなか優れものです、具体的な使い方は以下から。

【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版] の続きを読む >>

2006年11月 2日

【CSShack/CSSハック】いつie7リリースがあってもこれで大丈夫!なハック

こんばんわ、もうなんだかんだ言ってもIE7のリリースが目前に迫ってきました。

備えあれば憂いなし、WEBサイトの担当者の皆様がIE7のリリースと同時にクライアントや社内からクレームの雨風にさらされない様に本日は傘を提供したいと思います。

続きは以下

【CSShack/CSSハック】いつie7リリースがあってもこれで大丈夫!なハック の続きを読む >>