デザイン

2010.01.18

HTML5入門

HTML5入門
こんにちは。エンジニアの はる です。

今回は巷で話題の「HTML5」について、
2009.12.21

IE6でのwebページ印刷時に幅指定をするCSS

IE6でのwebページ印刷時に幅指定をするCSS

通常、IE6で649px以上のwebページを印刷する場合、途中で切れて印刷されてしまいます。(Firefoxは賢いので切れずにちゃんと印刷してくれます)

webサイトを作ったはいいが「うまく印刷できない」と言われた時、印刷用の『CSSを用意すればいい』なんて話はよく聞きますが、印刷の為だけにCSSを書き換えるのは手間がかかります。

 

そこで、今回はIE6で簡単にwebページを縮小して印刷してくれるCSSを紹介します。

2009.12.18

サイトの配色を助けてくれる「Color Scheme Designer」

サイトの配色を助けてくれる「Color Scheme Designer」

こんにちは。まいです。

サイトのデザインを作るとき、色をどうするか?というのも一つの悩みどころですよね。
そんな悩みをそっとサポートしてくれるのが「Color Scheme Designer」。


デザイナーにとっては色を決める時のサポートに、
デザイナー以外にとっては、サイト全体の配色をおまかせできちゃう優れたサイトです。

 

実際にちょっと使ってみましょうー。

2009.10.16

透過PNGを使ったボタンの作成

透過PNGを使ったボタンの作成

透過PNGを使って色違いのグラデーションのついたボタンを作る方法を紹介します。
まず、Photoshop等でボタンの大きさに合わせて黒から透明のグラデーションをかけたものを作成します。

2009.09.15

list-style-imageを使わずにリストマーカーに画像を使う

list-style-imageを使わずにリストマーカーに画像を使う

こんにちは、maiです。

今回は初心に返って、ごく簡単で使いどころが多い「リストマーカーを画像にする」について。

 

リストマークを画像にする場合、
list-style-imageというプロパティが既にありますが、
これを使うとちょっとズレたりしちゃうのでデザインとしてちょっと…ということがあります。
そういうズレを防ぐためにも、リストマークを画像にする時は
backgroundで入れてしまいましょう。

 

具体的にはこんな感じ↓

2009.08.12

高さの違う2つの要素を縦中央に並べる(垂直方向にセンタリングする)方法

高さの違う2つの要素を縦中央に並べる(垂直方向にセンタリングする)方法

上の画像のような高さの違う2つの要素を、縦中央に並べる方法をご紹介します。
サンプルでは画像とテキストですが、テキスト同士、画像同士でも 同じことができます。

確認ブラウザ IE6~8、FF2、3

2009.07.30

ブラウザのデフォルトスタイルをリセットする

ブラウザのデフォルトスタイルをリセットする

こんにちは、maiです。今回はコーディングでデザイン用にcssを書き出す前の下準備のお話。

ただhtmlを書いただけでも、見出しは大きかったり、
リストには黒い丸が表示されたり、strongは太字になったりemは斜体になったり、
そのすべてはブラウザがもともと持っているstyleです。

 

まあ…正直邪魔ですよね。
リストのマークは黒丸じゃなくて画像で作った矢印にしたいし…とか。

 

そんなとき、いちいち
list-style: none;
なんて書くのはめんどくさいことこの上ない。
1カ所だけならいいんですけどね。

 

 なので、もう最初からなかったことにしたいstyleはリセットしてしまいましょう。
↓に実際に使ってるリセット用cssを一気に公開です。

2009.05.13

CSSハック〜IE8編

CSSハック〜IE8編

そろそろIE6が世の中から消えてもいいと思うmaiです。
ほんと…IE6がなくなるだけでもだいぶ色々楽になるのに。

IE6がまだまだ現役の中、IE8が登場してきました。
beta版の頃は一部のマニアックな人だけだから!とか言ってられたんですが、
正式版になってしまったのでいつまでも対象外にはしていられません。

というわけで、IE8にだけ適用するハックを調べてみました。
実はまだ実践してないのでメモですが…

間違っていたので修正しました。今度こそ多分…(2009/6/3)

2009.05.12

IE6で背景が出たり消えたりする件について

IE6で背景が出たり消えたりする件について

こんにちは。maiです。
cssでレイアウトを組んでいるとIE6とは日々戦いです。
今回は、スクロールしたりリロードしたりしたときに、
IE6だけ背景が表示されないことがあるという
めんどくさいバグ(通称いないいないばあバグというらしい)の対処法について。

2009.04.22

テーブルをcssで立体的にアレンジする

テーブルをcssで立体的にアレンジする

テーマ:【テーブルをcssで立体的にアレンジする】

使用:【XHTML/CSS  photoshop 透過png】

 

それでは早速やってみます。 

18 件中 1 - 10 件を表示しています 次のページ
web開発ならKBMJ
Rubyでのwebシステム開発は
実績豊富なKBMJにお任せ下さい
iPhone開発
iPhone開発は
KBMJにお任せ下さい
ファイル共有サービス DUB
クラウドファイル共有サービス「DUB」
オープンソースECパッケージ エレコマ
オープンソースECパッケージ
「エレコマ」
涼宮ハルヒの憂鬱 「TDOS3 for iPhone」
涼宮ハルヒの憂鬱 「TDOS3 for iPhone」

あなたへのオススメ記事


アクセスランキング

Ruby on railsの開発ならKBMJ
株式会社ケイビーエムジェイ