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

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

カテゴリー:コーディング

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を使って画像を切手のように装飾したり、消印風のスタンプを作成する方法をご紹介したいと思います。

続きを読む

6月23日に終了するFacebook Like BoxからPage Pluginへの移行で気をつけたい事

Facebook Page Pluginホームページなどに表示してFacebookページへの「いいね!」を促すソーシャルプラグイン「Like Box」ですが、このLike Boxは現在deprecated(非推奨)とされており、2015年6月23日にサービスが終了します。これに代わるFacebookプラグインとして新たに、「Page Plugin」が提供されています。
ここではLike BoxからPage Pluginへの移行で、何が変わるのか、何に注意すればよいのかを見てみましょう。

続きを読む

無料でもOK!手軽に使えるTypekitの日本語Webフォント14個

Adobe Typekit

源ノ角ゴシック・小塚ゴシック・小塚明朝など、AdobeのTypekitにて14種類の日本語Webフォントの提供が始まりました。今までTypekitの日本語フォントはアプリケーションでの利用に限定されていたため、Webフォントとして使えるのは今回が初めてです。

続きを読む

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

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

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

続きを読む

ImageMagickでCSS Sprite用の画像を作る。

フリーのアイコンを使ってWebサイトを作るとします。感謝しながらアイコンを使っていますが、残念ながら、一つ一つ画像が分かれている場合もあります。別にそのまま使えばいいのですが、サーバーの負荷やクライアント側での速度を考えるとCSSスプライトでやりたいですよね。

自分はプログラマーですし、PCにフォトショップなんて入っていませんし、大体、たくさんのアイコンを一つの画像になんてめんどくさくてやってられないです。当然、デザイナーの方も嫌でしょう。やることはアイコンを並べるだけで単純かつ繰り返しなので、こういう作業こそプログラマーの出番ですよね。
そこで、ImageMagickを使って アイコンを結合します。以下の様なコマンドをコマンドプロンプトやbatファイルで実行して、appendしていけば画像の右にどんどん追加されていきます。[0]がついていますが、つけなくてもいいです。これがついていると元画像がアニメーションgifだった場合に1枚目の画像をappendするようになります。

続きを読む

『float』ではなく『display: inline-block;』を使うという選択

CSS

通常、ブロック要素を横並びにしたいときは『float』を使うことが多いと思います。しかしfloatには

  • clearする必要がある
  • IE6ではfloatと同方向のpadding、marginが2倍になってしまう(バグ)
  • 高さが異なるボックスがあるとその後のレイアウトが崩れる

といった面倒がつきまといますよね。そんな時は『display: inline-block;』の出番です。block要素のように高さや縦方向のpadding、marginが指定できる上に、inline要素のように横並びができ、しかも高さが異なるボックスがあってもレイアウトが崩れません。

続きを読む

▲ 先頭へ戻る