Web制作ですっかり定番となったメディアクエリを使ったレスポンシブ Webデザイン。JavaScriptで実装している機能をメディアクエリと連携させるためのちょっとしたテクニックを紹介します。 テーブルタグがCSSに変わり、レスポンシブデザインは心躍るコンセプトの1つです。レスポンシブデザインはメディアクエリで閲覧中の機器の画面幅、高さ、向き、解像度、アスペクト比、色深度などを把握し、応じたスタイ…

Copyright © 2017, Craig Buckler All Rights Reserved.

Craig Buckler

Craig Buckler

イギリス人のWebコンサルタントで、1995年にIE2.0向けにはじめてのWebサイトを製作。それ以降、Webの標準化とアクセシビリティ向上、HTML5の優れた事例を紹介・提唱してきました。SitePointでは1,000以上の記事を書いています。Twitterのアカウントは@craigbuckler

Loading...

すっかり普及したCSS3アニメーション。ハイパフォーマンスなアニメーションを実現する、ちょっとした書き方のポイントとは? モバイルアプリケーション内の要素をアニメーションさせるのは難しいことではありません。でも、この記事を読めば、さらに適切な方法でアニメーションさせることができます。 最近、多くの人がモバイルでCSS3アニメーションを使っていますが、正しく使っていない場合が多くあります。開発者はし…

Copyright © 2017, Jose Rosario All Rights Reserved.

Jose Rosario

Jose Rosario

OutSystemsのSilkチームで働くフロントエンドデベロッパーです。

Loading...

HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 HTML5を習得していくうちに、HTML5のテクニックをまとめて使ったひな型を作っておきたいと考えることでしょう。もちろんお勧めしますし、開始点として便利な、オンラインソースの使用も検討し…

Copyright © 2016, Louis Lazaris All Rights Reserved.

Louis Lazaris

Louis Lazaris

Impressive Websの開発ブロガーで、現在はSitePointのHTML・CSSエディター。フロントエンドにまつわるものならすべて大好きで、ツール中心のフロントエンド開発者向けニュースレター、Web Tools Weeklyのキュレーションもしています。

Loading...

CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxを使うのが常識。でも、仕様策定中の「Grid Layout Module」を使うと、もっと効率よくレイアウトができるようになりそうですよ。 複雑なWebサイトを作成する場合、グリッドは重要な役割を果たします。グリッドを利用することでWeb作成のスピードアップができるフレームワークが多いことからも、現代のWebデザイン…

Copyright © 2016, Nitish Kumar All Rights Reserved.

Nitish Kumar

Nitish Kumar

毎週、Web開発の人気記事を集めるWebサイト、Freadioの共同開発者。最先端の物事に強い関心があり、業界の最新の開発製品や有益かつ面白いライブラリーを見つけることにも興味があります。

Loading...

ボタンなんてちょっとググればいくらでもCSSのコード転がってるでしょ?……なんて言わないで。サイトやアプリに合ったボタンを自在に作るために、まずは基本的な実装から学んでみては? 「ボタン」は、Webページでもっとも重要なコンポーネントの1つ。ボタンをデザインするときは、すでに決まっているデザインにしっくりと溶け込むようにしなければなりません。この記事では、新人開発者が自分でボタンを作成するときに役…

Copyright © 2016, Jack Rometty All Rights Reserved.

Jack Rometty

Jack Rometty

Web開発者兼デザイナー。サイドプロジェクトでの実践が大好きで、いつもツイッター(@rometty_)を使っています。

Loading...

1行の文字数が多い文章は読みにくいと感じる場合があります。しかし、この問題は、マルチカラムを使ってレイアウトすれば、簡単に解決できます。マルチカラムは印刷物ではよく見かけるレイアウト手法ですが、CSSのマルチカラム(段組)レイアウトモジュール機能を使えば、Webサイト上でも印刷物と同じような段組が実現できます。 しかし、Webデザインでマルチカラムを使うことに関して、1つだけ難点があります。それは…

Copyright © 2016, Baljeet Rathi All Rights Reserved.

Baljeet Rathi

Baljeet Rathi

インドに拠点を置くライター兼Web開発者です。フルスタック開発者ですが、特にフロントエンド関連に強い関心を持っています。Web開発に5年以上携わってきました。

Loading...