floatレイアウトはすでに過去のもの。Webサイトの要素の位置を操作するならFlexboxが定番となりました。出遅れたWeb制作者のために基本を解説します。 テーブルタグが唯一のWebページをレイアウトする手法だった頃を覚えていますか? 表形式のデータを表示するための機能をレイアウトに無理やり使っていたので、タグ名の意味と用途が異なるひどい状態でした。新しい「道具」が必要になり、「正しい」レイア…

Copyright © 2017, Christian Krammer All Rights Reserved.

Christian Krammer

Christian Krammer

10年以上の経験を持つWebデザイナーで、現在は小さな広告代理店を営んでいます。CSS3の詳細ガイドcss3files.comの所有者です。既婚者で、6歳の息子の父親であり、映画愛好家。彼の作品はchriskrammer.comで見られます。

Loading...

進化するCSSの機能を駆使して、CSSだけでクロスワードパズルを作りました。JavaScriptは一切使っていません! JavaScriptを使わずにCSSグリッドで動くCSSオンリーのクロスワードパズルを作成したところ、CodePenで話題になりました。執筆時点でハートマークが350、ページビューは24,000を超えました。 チュートリアルCSS Grid Gardenに触発され、グリッドレイア…

Copyright © 2017, Adrian Roworth All Rights Reserved.

Adrian Roworth

Adrian Roworth

スコットランドで活動するフロントエンドWeb開発者で、CSSとJavaScriptを独創的かつ革新的な方法で駆使してきた経歴があります。コーディングをしていないときはギターやドラムを演奏して過ごしています。

Loading...

WPJが提携するWeb開発者向けメディア「SitePoint」ではCSS開発者を対象にした大規模なアンケート調査を実施しました。その結果から、いま何を学ぶべきかが見えてきました。 CSS開発の現場で実践されている習慣、CSSに関する知識の量、理解度などの情報を集める目的で実施した「究極のCSS調査」には、6週間で1600名以上からの回答が寄せられました。このほど集計が完了したので、結果を発表します…

Copyright © 2017, Louis Lazaris All Rights Reserved.

Louis Lazaris

Louis Lazaris

2000年からWeb開発業界に従事しているSitePointのHTML/CSSコンテンツの共編者です。Impressive Websでブログを執筆しています。また、ツール中心のフロントエンド開発者向けニュースレター、Web Tools Weeklyのキュレーションを担当しています。

Loading...

進化し続けるCSSの仕様の中でも使い勝手がいいのが、CSS変数。キーカラーやサイズなど、あとから修正するのが面倒な要素はCSS変数を使って工数を減らし、ストレスを軽減しましょう。 SassやLessなどのプリプロセッサーは、CSSのコードベースを、メンテナンスしやすい整った状態にするのに役立ちます。変数、mixin(ミックスイン)、loop(ループ)などCSSコーディングに動的な機能を追加すると、…

Maria Antonietta Perna

Maria Antonietta Perna

SitePointのHTML/CSSチャンネルの共同編集者・フロントエンドWeb開発者です。CSSでいろんな手法を試すことを楽しんでいます。フロントエンドのプログラミング指導方法にも興味を持ち、WebのコーディングやWeb関連の執筆をしていないときは、哲学書や散歩、おいしいものを楽しんでいます。

Loading...

もっとわくわくするような Webサイトに! 海外の有名サイトをお手本に気持ちいい演出方法を学びましょう。 Webは大きく様変わりしています。テキストだけのシンプルなWebサイトから、サイトで情報を伝達するだけでなく、モダンで快適に閲覧できてワクワクするユーザーエクスペリエンスが求められています。 フォントの組み合わせから、インパクトの強いアニメーションやディープなインタラクションまで、視覚的におも…

Copyright © 2017, Simon Codrington All Rights Reserved.

Simon Codrington

Simon Codrington

フルスタック開発者で、Webが大好きです。Webやデザインに興味があり、驚くべきWebサイトを作ることに情熱を注いでいます。WordPressにフォーカスしながら、シドニーでThe White Agencyのチームとテーマ、プラグイン、特注のソリューションを開発しています。

Loading...

「なんとなく」で使っていませんか? CSSではいろいろな「単位」でサイズや余白を指定できます。それぞれの単位の違いを理解して使えれば、「なぜかずれる」といったトラブルも防げます。 CSSには、margin、padding、line-height、font-sizeといったさまざまなプロパティがあります。プロパティでは異なる用途に対応するために長さを指定する単位がたくさんあります。問題は、CSSプロ…

Copyright © 2017, Asha Laxmi All Rights Reserved.

Asha Laxmi

Asha Laxmi

フロントエンドの開発者でありインストラクターです。次々にリリースされる興味深いJavaScriptライブラリーに取り組むことを楽しんでいます。余暇は旅行や本を読んて過ごします。

Loading...

WebサービスのUIやサイト制作のベースに使えるCSSフレームワーク。Bootstrapが代表的ですが、ほかにも人気のフレームワークをピックアップして紹介します。 CSSのフロントエンドフレームワークは百花繚乱です。しかし本当に優れたものだけに絞り込むことは可能です。 この記事では、私が考える「現在のフレームワークのベスト5」を比較します。強みと弱み、向いている分野があるので、プロジェクトで求める…

Copyright © 2017, Ivaylo Gerchev All Rights Reserved.

Ivaylo Gerchev

Ivaylo Gerchev

独学のWeb開発者兼デザイナーです。HTML、CSS、jQuery、PHP、WordPress、そしてPhotoshopやIllustratorで遊ぶのが大好きで座右の銘は「最小限の努力で最大限の結果を得る」。

Loading...

Reactアプリの開発でちょっとやっかいなのが、スタイルシートの扱いです。さまざまな手法の中から、いま注目のstyled-componentsを使った方法を紹介します。 Reactによるアプリケーションの構築手法は標準化がだいぶ進んでいます。しかし、「スタイリング」においては標準的な実装方法がまだ定まっていません。それぞれの方法に長所と短所があり、どれがベストか言えない状況です。 この記事では、R…

Copyright © 2017, Chris Laughlin All Rights Reserved.

Chris Laughlin

Chris Laughlin

北アイルランドのベルファスト在住のアプリケーション開発者です。フロントエンド、特にJavaScriptの開発に注力しています。2010年からソフトウェアの開発に携わり、いまも毎日学び、知識をシェアしています。

Loading...

世界中のエンジニアが集うQ&Aコミュニティ「Stack Overflow」が今年も開発者調査の結果を発表しました。最新の調査結果から見えてきた、世界の開発者のトレンドとは? Stack Overflow Surveyは2011年から毎年実施されている、もっとも包括的な世論調査の1つです。その結果を見る前に……。 いつもどおりの注意事項 Stack Overflowには毎月4000万人のアク…

Craig Buckler

Craig Buckler

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

Loading...

marginとpaddingはCSSの基本ですが、正確に理解できていないと「レイアウト崩れ」にもつながります。この春CSSを学び始めた方へ、必読の解説記事です。 CSSを学び始めたばかりのころ、marginプロパティとpaddingプロパティに混乱しました。そっくりに感じただけでなく、同じ表示になっているとさえ思えました。 このチュートリアルでは、CSSにおけるmarginとpaddingの違いと…

Copyright © 2017, Baljeet Rathi All Rights Reserved.

Baljeet Rathi

Baljeet Rathi

インドを拠点に活動するライター、Web開発者です。フルスタック開発者だが、フロントエンドに関係したものが大好きです。現在まで5年以上Web開発に携わっています。

Loading...