コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
clearfixを使わないでやるには。
2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。 なので、一応基本に戻ってみましょうということで。 最近、「CSS Nite ビギナーズ」とかもやってますしね。 あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。 何か、久々に書いてる気がして、どうやって書いてたか思い出せない... えっと、そもそもどんな状況の時かっていう
Re:ユーザーの動き。
ちょっと前に書いた、ユーザーの動き。ですが、アレはただの自分専用メモだったので、自分だったらこーするかもって事と言葉足らずだった部分の補足エントリーです。 いわゆる、ユーザビリティテストっていうのに参加してきました。 目の前でターゲット層に比較的近いユーザがサイトを見ている様子を見るのは滅多にない経験だったので、非常に有用な一日でした。 年齢は、20代前後くらいで、普段から当たり前のようにネットやってる人は殆ど居なく、時々調べ事に使う程度くらいの方々が大半っていう状況での結果です。 だから、ターゲット層によっては、この結果はあんまり役に立たないかも知れないし、見事なまでに合致してる場合は、それなりに使える情報かもわかりませんね。 ロゴクリック＝トップページに戻るという認識は殆ど無い。 だから、リンクは張りませんって結論にはならないので、対策としてはやっぱりグローバルナビゲーションやロゴの近
背景がグラデっててサイドのボックスに下マージンがあるような時のサンプル
何だか間があいてしまいました、、、 ここ以外でのアウトプットが増えてたので、こっちに書くパワーが減っておりました。 さて、言い訳は良いとして、現在も日々コーディングな訳ですが、久々にはまったので同じ状況のを作ってみました。 タイトルだけでは意味がわからないと思ったんですが、どう書いたらよいのかさっぱり… 見た目普通っぽい2カラムがあって、サイドの背景はメインの内容に合わせて繰り返すのは良くあるかと。 んで、今回のデザインにはメインとサイドの裏に当たる部分(親要素)にグラデーションの背景があるんです。 このグラデーションがあった事で、余白がうまく取れずに、はまりました。 どの部分かと申しますと、サイドの上のボックスと下のボックスの間にmarginが10pxほどあったんです。えぇ。 もう書いてて意味がわかりませんので、とりあえずサンプル見てください… サンプルは下記より。 良い例のサンプルを見
フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ
タイトルが長い… サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました） さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。 一番書きたかったフロートボッ（略）みたいなの サンプルとダウンロード サンプルページ ダウンロード 今回の本題は「ほげほげ」って書いてあるところのボックスに関してだけ書くつもりが遊んでいるウチに気になった事があったのでそちらも書こうと思っております。 何はともあれ、この「ほげほげボックス」ですが、main areaは10pxのpaddingが指定されてて、その中にこんな感じでぴったりなボックスがぽこぽこ並ぶときって、
ステッカーっぽいのを貼ってみる
前々からちょっとカッコイイなーと思ってたステッカーっぽいの。 試しに今回貼ってみました。左上に貼ってあるコーディングコンテストのがソレです。 ちょっとウチのサイトの場合だと横幅があるんできついですが、まぁテストって事で。（外しはしないけど） 知ったのは、ネットのサラダボウルさん。 って事で、詳細をば。 方法はすっごい簡単。 たぶんブログとかにも貼り付けれるんじゃないかな？ まずは←こんな感じで、透過Gifを作成。 どんな感じでもいいのでお好きなように作ります。 透過Gifの作り方云々は、ここじゃ割愛。 そしたら、htmlに以下のような感じで貼り付け。 <p id="sticker"> <a href="/archives/2007/0407_1430.php"> <img src="/img/sticker.gif" alt="Codin Contest 開催中" /> </a> </p>
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
画像の周りなどに1pxの破線を引く｜CSS HappyLife
画像の周りなどに1pxの破線を引く場合に、borderを使う事があると思います。 borderで破線を引くと、ブラウザにより表示が異なり何か気分が悪いですよね？ その際、画像を使えばOKなんですが、サイズが固定なら画像でも簡単に枠が作れますが、画像サイズがバラバラで、かつ同じ枠線を引くとなるとちょっと面倒な感じがします。 ソコで、結構簡単な方法で解決できるぷちテクニックのご紹介。 取り合えず下記を見て下さい。 1番の画像は、背景画像を使っているので枠線はどの環境で見ても同じです。 2番の画像は、borderで見せているので、ブラウザによって表示が違います。 では、やり方。 img.tenten { background:url(../img/dotted.gif); padding:1px; } paddingを1pxとり、背景画像をおいて上げるだけです。 その際に用意する画像がポイント。
ボクが良く使うMovableTypePlugin
コーディングをする上で、いまや必須なのがMT。 クライアントからの要望に答える為だったり、より便利にしてくれる為に、MTプラグインも必要とする時が多々あります。 ソレなのにいつも、「何処だっけ。。。あのプラグインは・・・」と無駄に探してしまうので、私的メモとして個人的によく使うプラグインだったり、利便性を強く感じたプラグインを、最低限の説明とともにリストアップしておきます。 より詳しく探したい人は、小粋空間さんのプラグイン一覧とかが非常に便利。いつも使わせてもらってます。 ※リンクは全て別窓で開かれまする CatEntries ・MTEntriesで特定のカテゴリーを表示・非表示 <MTCatEntries exclude="CategoryName1,CategoryName2"> ・・・ </MTCatEntries> <MTCatEntries include="CategoryNa
CSSに関する基本的なこと1（記述方法、使用できる文字、コメントアウト）
実際の作業に入る前に、基本的なことをやっておきます。 作業ミスや混乱などを避けるためにもまずは基本です。しっかりと見に付けておきましょう。 以下の事について触れるので、理解している方は次のエントリーにお進み下さい。 CSSの記述の仕方 セミコロンについて 大文字と小文字の区別について class名やid名で使用できる文字 コメントアウトについて CSSの記述の仕方 セレクタ { プロパティ:値 } セレクタってのは、スタイルを適用する対象で、bodyとかh1、p、ulなどです。 id名やclass名なども。 プロパティは、そのセレクタにどのようなスタイルを指定するかです。 marginやpadding、borderなど。 値は、指定したプロパティにどんな値を適用するかで、color:red;の太字のredの部分です。 コレで文字の色を赤にするという値を指定してます。 CSSの書式の統一に関
.htaccess ファイルを簡単作成「.htaccess Editor」
オンライン上でいとも簡単に.htaccessファイルを作成してくれる、ヒジョーに便利なツール。 ツールだけどサイトなので、Webサイトカテゴリに。（もちろんCSSで組まれてます） これ、すべての動作がJavaScriptなんで、ファイル作成時にサーバとの通信は一切なし。 .htpasswd の作成時にサーバにデータが残ったりしたら、なんてことが心配な人にも安心です。 .htaccessに関してボクはぜーんぜん分かってないので、こういったツールが有ると非常に助かります。 .htaccess Editor
横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現
かなり色んなサイトで見かけるようになった、JavaScriptを使わずにロールオーバーをCSSのみで実現するテクニック、そのやり方です。 以前のエントリーで、縦並びのメニューで同様のを紹介しましたが、横並びのメニューは随分勝手が違います。 またメニューをテキストではなく、画像で行っているのでその部分についても説明していきます。 サンプル： サンプルページを見る ダウンロード： サンプルをダウンロード 使用画像 ロールオーバー用画像 ナビ背景画像 では、やり方をば、、、 まずはロールオーバー用の画像を用意します。 今回使用してる画像は上記の2枚のみです。 また、メニューの背景画像として、全てがオフの状態の画像を用意しています。 コレは、サーバーや回線の都合でたまに読み込みが遅れて、メニュー部分が真っ白になってしまうのを防ぐ為です。 必要無いといえば無いですが、結構気になっちゃうので（ボクは）
文章構造を崩さず出来るだけキレイに角丸をつくってみる。
前回のエントリーでご紹介した角丸。 今回は、文章構造を維持出来るデザインが上がってきた場合の角丸の作成をしてみました。 仕様 タイトル：3行～4行くらいまで。 本文：文字数・サイズ制限無し、横幅固定。 投稿日部分：3行～4行くらいまで。 サンプル：http://css-happylife.com/template/06/ ダウンロード：http://css-happylife.com/template/06/06.zip 使ってる画像。 角丸上部画像 繰り返し用画像 角丸下部画像 文字サイズなどを制限無しに対応する場合、上部画像、繰り返し用の画像、下部画像の3つが必要になってきます。 そうすると、必然的にdivが増えたりしてしまうんですが、サンプルのように、タイトル、本文、投稿時間と分かれていれば、ソコにスタイルを適用させる事が出来るので非常にシンプルなHTMLで角丸が実現できます。 サン
見出しの横などにボタンを配置
結構見かける、見出しなどの横に配置されているボタン。 ウチのサイトでも、NEW ENTRYの横にRSSボタンをつけてます。 他に、続きを読むやMoreなんかが見出しの横にボタンやテキストとして配置されているケースが多いと思います。 このデザインを実現する際に、floatかpositionのどちらでも可能ですが、この場合はpositionの方が楽な上に柔軟に対応できる（と思う）のでオススメ。 ということで、ウチのサイトを例に作成方法を。 HTMLはこんな感じになってます。 <div id="main"> <h2>New Entry</h2> <p id="btnRss"><a href="/index.xml">RSS 2.0</a></p> ・ ・ ・ <!-- / main END --></div> CSSを切っている状態だと→こんな感じ。 position以外のスタイルを適用させると
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
