PRESSMAN*Tech(プレスマンテック)

東日本橋の制作・開発会社 プレスマンのスタッフブログ

キーワード:CSS3

CSSだけで作る王冠付きのランキングリスト

CSSだけで作る王冠付きのランキングリスト

今回は、人気商品やアクセスの多い記事の表示に役立ちそうな、シンプルな王冠アイコン付きのランキングリストをCSSで装飾する方法をご紹介します。

続きを読む

CSSでラジオボタンをタブメニューに変える

ラジオボタンをタブメニューに変える。先日、ラジオボタンで実装済みのUIを急遽タブメニューにしたいというご要望をいただき、CSSを利用してタブメニュー風のデザインとして見せることにしました。
ラジオボタンを元にCSSでタブメニューを作成する場合、JavaScriptが必要ないため動作も軽く、比較的簡単に実装することができます。欠点としては、擬似クラスや隣接セレクタなどを多用するため、残念ながらIE8以下のブラウザでは動作しません。

続きを読む

CSSで作るシンプルな矢印アイコン29個

CSSで作るシンプルな矢印アイコン29個最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。
CSSでデザインの実装を行う場合、「カスタマイズやメンテナンスが容易」「レスポンシブWebデザインとも相性が良い」「画像を読み込まないのでモバイルユーザーにも優しい」「Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。

今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。

続きを読む

HTML+CSSだけで作るエアメール封筒

前回、CSSで作る郵便切手と消印風スタンプをご紹介しましたので、今回はエアメール風の封筒デザインを同じくCSSだけで作ってみたいと思います。
せっかくですので、前回作った郵便切手やスタンプと一緒に合わせて、ブログの記事風にレイアウトしてみました。

続きを読む

コピペで簡単!CSSだけで作れる郵便切手と消印風スタンプ

今月7月は別名「文月」と呼ばれ、特に23日には「文月ふみの日」として様々なイベントが行われます。

今回はそんなお手紙と関係の深い7月にちなんで、CSS3を使って画像を切手のように装飾したり、消印風のスタンプを作成する方法をご紹介したいと思います。

続きを読む

紙面に近づけたい!HTML+CSSで作る文字レイアウト12個

印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。
DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理?」といったご相談を受けることがよくあります。

今年に入って、HTML5&CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。

続きを読む

CSS3でかっこいいボタンを作ろう【第四回:上級編(animation)】

CSS3でボタンを作るシリーズ最終回。

対応ブラウザ:Chrome, Safari, Firefox5+

今回はダメ押しの『animation』について。CSS3でのアニメーションといえば前回紹介した『transition』がありますが、『transition』で作成できるアニメーションは状態A→状態Bのような単純なものです。『animation』はキーフレームを使用してより複雑なアニメーションを作成できます。正直ボタン作るのにここまでする必要は無いと思いますが、いい機会なのでまとめて学んじゃいましょう。

続きを読む

CSS3でかっこいいボタンを作ろう【第三回:中級編(RGBa、@font-face、transition)】

CSS3でボタンを作るシリーズ第三回です。これまでに角丸、テキストシャドウ、ボックスシャドウ、グラデーションを使ってボタンを作成してきました。

過去記事
第一回:入門編(border-radius、text-shadow)
第二回:初級編(box-shadow、gradient)

今回はさらに

を使ってみましょう。まずは前回のおさらいから。

html


<a href="#" class="button">Button</a>

css


a.button{
display: inline-block;
padding: 0.5em 1em;
background: #cccccc;
border: 1px solid #666666;
border-radius: 10px;
color: #000000;
font-size: 30px;
line-height: 1;
text-shadow: 0px 1px 1px #ffffff;
-webkit-box-shadow: 0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
-moz-box-shadow: 0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
box-shadow: 0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#888888));
background-image: -moz-linear-gradient(top, #dddddd, #888888);
background-image: -o-linear-gradient(top, #dddddd, #888888);
}

Button

続きを読む

CSS3でかっこいいボタンを作ろう【第二回:初級編(box-shadow、gradient)】

CSS3でボタンを作るシリーズ第二回です。
前回は角丸ボックスとテキストシャドウを使いました。

前回記事
CSS3でかっこいいボタンを作ろう【第一回:入門編(border-radius、text-shadow)】

今回は少しだけレベルアップして

を使ってみたいと思います。

まずは前回の状態をおさらいしておきましょう。

html


<a href="#" class="button">Button</a>

css


a.button{
display: inline-block;
padding: 0.5em 1em;
background: #cccccc;
border: 1px solid #666666;
border-radius: 10px;
color: #000000;
font-size: 30px;
line-height: 1;
text-shadow: 0px 1px 1px #ffffff;
}

Button

角丸ボックスとテキストシャドウでデザインされたシンプルな状態です。
それでは早速、このボタンに磨きをかけていきます。

続きを読む

CSS3でかっこいいボタンを作ろう【第一回:入門編(border-radius、text-shadow)】

ようやくIE9が正式リリースされ、そろそろHTML5、CSS3を勉強しようと思っている方も多いんじゃないでしょうか。そこで今日から数回に渡って、CSS3のみでデザインされたボタンを作成するチュートリアル記事を書いていこうと思います。

最終目標はこのボタンです。(Safari、Chrome、Firefox5+だとマウスオンで動きます)

Button

CSS3非対応ブラウザをお使いの方用に画像も載せておきます。

完成ボタン

今回は初級編ということで、比較的とっつきやすいプロパティのみを使ってボタンを作ってみましょう。

続きを読む

▲ 先頭へ戻る