CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
![Webもモバイルデバイス向けもこれ1つ!~Fireworks拡張機能で思い通りのデザインを作成](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2a29f7cf2f3bf8a68ec5982ca25829a47ac1794/height=288;version=1;width=512/https%3A%2F%2Fcodezine.jp%2Fstatic%2Fimages%2Farticle%2F6431%2F6431_arena.png)
知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう CSSで多彩な表現が可能に 本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。 従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。しかし、CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。 この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。 ベンダプレフィクスについて CSS3の多くの機能はまだ規格策定段階のも
CSS3で作るタブメニュー 今回は、前回のWEBパーツに続き、これまで紹介してきたCSS3の機能を使ってナビゲーションパーツを作成してみましょう。まずは、図 1のような、タブ型ナビゲーションの作り方を紹介します。タブ画像を並べたようなデザインですが、テキストはWebフォント、グラデーションはlinear-gradient、角丸はborder-radiusで指定し、CSSだけで実装したサンプルになります。 HTMLは以下のようになります。 [リスト01]HTMLソース(tab01.html) <head> ~中略~ <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:800' rel='stylesheet' type='text/css' /> <link rel="stylesheet" type="text
CSS3で作るグラデーションの見出し 今回は、これまで紹介してきたCSS3の機能を使って、コンテンツの見出しやボタン、アイコンなどのWebパーツを作ってみましょう。WebパーツをCSS3で描画することは、特にスマートフォン向けサイトにおいて有効です。 画像を使わないので、サーバへのリクエスト数を減らすことができます。また、スマートフォンでは縦と横に傾けた場合に画面幅が変化しますが、WebパーツをCSSで描画することで、縦横それぞれの向きに合わせて表示を最適化できるため、非常に有効です。 さらに、スマートフォンなどでは画面解像度が高いため、PC向けのWeb画像が荒く表示されることがありますが、こういった問題も、CSSで描画することで回避が可能です。 今回紹介するサンプルは、IEには非対応ですが、スマートフォンであれば、ほぼ問題なく表示されるはずです。IEに対応させたい場合には、CSS3.PI
面白法人カヤックがサイトリニューアル! いきなり手前みそで恐縮ですが、今年の夏、面白法人カヤックがコーポレートサイトを2年ぶりにリニューアルしました。 「世界一更新頻度が高く、カヤックの活動がひと目で分かるコーポレートサイト」をコンセプトに、可読性が高く容量も軽いサイトに仕上げました。 ひと目見るだけで、最近のカヤックの動向が分かるようにニュースでTOPページを構成し、日々リアルタイムにカヤックの最新の情報を発信します。 技術的には、ブラウザのウィンドウサイズによって拡縮する画像はベクターファイルであるSVG(Scalable Vector Graphics)画像で置き換えたり(SVGはベクトル形式の画像のため、拡大してもボケない)、CSS3を用いることで画像の使用を極力控えたりするなど、ページの軽量化を実現しています。 カヤックサイトのCSSテクニックを丸ごと伝授! 本稿では、サイトリニ
CSS3のWebフォント機能は、サーバー上にあるフォントを利用するもので、ユーザーの閲覧環境に依存しません。使用したいフォントファイルをサーバーにアップロードし、CSSで読み込ませるだけで利用できるので、フォントの選択肢が広がります。 これまでテキストを画像化して表現していたWebのタイポグラフィも、Webフォントを使って自由に表現できるわけです。テキストなので、選択やコピー&ペーストも可能、SEOにも有効です。もちろん、font-sizeやcolor、text-shadowなどのCSSプロパティも適用できます。 主要なブラウザは、既にWebフォントに対応しているので、少しの工夫ですぐに利用できます。ただし、フォント形式やライセンスなど、利用に際してはちょっとした注意が必要です。本稿では、これら注意点を踏まえてWebフォントの利用方法を紹介します。 Webフォントの利用方法 では早速Web
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く