「なんとなく」で使っていませんか？ CSSではいろいろな「単位」でサイズや余白を指定できます。それぞれの単位の違いを理解して使えれば、「なぜかずれる」といったトラブルも防げます。 CSSには、margin、padding、line-height、font-sizeといったさまざまなプロパティがあります。プロパティでは異なる用途に対応するために長さを指定する単位がたくさんあります。問題は、CSSプロ…
Copyright © 2017, Asha Laxmi All Rights Reserved.
Asha Laxmi
フロントエンドの開発者でありインストラクターです。次々にリリースされる興味深いJavaScriptライブラリーに取り組むことを楽しんでいます。余暇は旅行や本を読んて過ごします。
WebサービスのUIやサイト制作のベースに使えるCSSフレームワーク。Bootstrapが代表的ですが、ほかにも人気のフレームワークをピックアップして紹介します。 CSSのフロントエンドフレームワークは百花繚乱です。しかし本当に優れたものだけに絞り込むことは可能です。 この記事では、私が考える「現在のフレームワークのベスト5」を比較します。強みと弱み、向いている分野があるので、プロジェクトで求める…
Copyright © 2017, Ivaylo Gerchev All Rights Reserved.
Ivaylo Gerchev
独学のWeb開発者兼デザイナーです。HTML、CSS、jQuery、PHP、WordPress、そしてPhotoshopやIllustratorで遊ぶのが大好きで座右の銘は「最小限の努力で最大限の結果を得る」。
Reactアプリの開発でちょっとやっかいなのが、スタイルシートの扱いです。さまざまな手法の中から、いま注目のstyled-componentsを使った方法を紹介します。 Reactによるアプリケーションの構築手法は標準化がだいぶ進んでいます。しかし、「スタイリング」においては標準的な実装方法がまだ定まっていません。それぞれの方法に長所と短所があり、どれがベストか言えない状況です。 この記事では、R…
Copyright © 2017, Chris Laughlin All Rights Reserved.
Chris Laughlin
北アイルランドのベルファスト在住のアプリケーション開発者です。フロントエンド、特にJavaScriptの開発に注力しています。2010年からソフトウェアの開発に携わり、いまも毎日学び、知識をシェアしています。
世界中のエンジニアが集うQ&Aコミュニティ「Stack Overflow」が今年も開発者調査の結果を発表しました。最新の調査結果から見えてきた、世界の開発者のトレンドとは？ Stack Overflow Surveyは2011年から毎年実施されている、もっとも包括的な世論調査の1つです。その結果を見る前に……。 いつもどおりの注意事項 Stack Overflowには毎月4000万人のアク…
Craig Buckler
イギリス人のWebコンサルタントで、1995年にIE2.0向けにはじめてのWebサイトを製作。それ以降、Webの標準化とアクセシビリティ向上、HTML5の優れた事例を紹介・提唱してきました。SitePointでは1,000以上の記事を書いています。Twitterのアカウントは@craigbuckler。
marginとpaddingはCSSの基本ですが、正確に理解できていないと「レイアウト崩れ」にもつながります。この春CSSを学び始めた方へ、必読の解説記事です。 CSSを学び始めたばかりのころ、marginプロパティとpaddingプロパティに混乱しました。そっくりに感じただけでなく、同じ表示になっているとさえ思えました。 このチュートリアルでは、CSSにおけるmarginとpaddingの違いと…
Copyright © 2017, Baljeet Rathi All Rights Reserved.
Baljeet Rathi
インドを拠点に活動するライター、Web開発者です。フルスタック開発者だが、フロントエンドに関係したものが大好きです。現在まで5年以上Web開発に携わっています。
この春、CSSコーディングの仕事を始めた新人さんへ、「きれいなCSS」を書くためのガイドラインをお届け。 きれいなCSSを書くためにはいくつかルールがあります。ルールに従うとレイアウトの崩れを最大限防げるだけでなく、軽量で再利用可能なCSSを書けるメリットもあります。ここで紹介するルールは次のとおりです。 グローバルセレクターや要素セレクターを避ける 詳細度が高すぎるセレクターは使わない セマンテ…
Copyright © 2017, Tiffany Brown All Rights Reserved.
Tiffany Brown
ロサンゼルスに拠点を置くフリーランスのWeb開発者・テクニカルライターです。大小のクライアントにWeb開発・コンサルティングサービスをしています。Opera Softwareのdeveloper relationsチームの元メンバーで、SitePointの書籍『JumpStart HTML5』の共同執筆者でもあります。ブログでWeb開発技術についてときどき執筆しています。Twitterのフォローは@webinistaです。
次々とリリースされるJavaScriptライブラリーにフレームワーク、進化を続けるCSSモジュール……と、変化の激しいフロントエンド開発界隈。いま開発者たちに実際に使われているのはどんなツール？ 開発経験は2年以上ありますか？ 高度なCSSスキルとしてSassやAutoprefixerの使用も含まれていますか？ JavaScriptの知識は十分にあり、Gulp、nmp、jQueryを使いこなせてい…
Copyright © 2017, Craig Buckler All Rights Reserved.
Craig Buckler
1995年に処女作としてIE2.0でページを作ったイギリス人のフリーランスWebコンサルタントです。以来、スタンダード、アクセシビリティとHTML5のテクニックの伝道者として活躍し、SitePointでは1000以上の記事を書いています。ツイッターのアカウントは@craigbuckler。
バーティカルリズム（Vertical Rhythm）はタイポグラフィにおける重要な概念ですが、絶対的なルールではありません。 Webのレイアウトをするとき、デザイナーやフロントエンドコーダーは縦方向より横方向のレイアウトに時間をかけるのが普通です。 これはそれほど不思議なことではありません。たいていのデバイスは縦にスクロールするように設計されているので、ページの横幅は高さに比べて制限があります。で…
Copyright © 2017, Alex Walker All Rights Reserved.
Alex Walker
sitepoint.comのデザイン・フロントエンド開発者をマネジメントしています。またSitePointの「デザイン&UX」カテゴリーの編集も担当しています。
上達する近道は、まず他人を真似ることから。SnappySnippetなら、お気に入りのUIパーツのHTML/CSSを抽出して、見やすく整えてくれます。 先週の夜、子どものとき以来久しぶりに映画『E.T. ジ・エクストラ・テレストリアル』を鑑賞していたときのことでした。「子ども時代の思い出補正」があったのかもしれませんが、「この映画はすごい」と思いました。スティーヴン・スピルバーグは、やせた子供たち…
Copyright © 2017, Alex Walker All Rights Reserved.
Alex Walker
sitepoint.comのデザイン・フロントエンド開発者をマネジメントしています。またSitePointの「デザイン&UX」カテゴリーの編集も担当しています。
スマホの普及、マイクロインタラクションの導入と合わせて、再評価されているGIFアニメを使ったUIデザイン。Webサイトを楽しくする活用法を5つ紹介。 ユーザーエクスペリエンスとは、「使いやすさ」だけではなく、製品やWebサイトをより心地よく、そして楽しく使えるようにすることです。Webサイトをおもしろくする方法には、注意を引くトランジション、インタラクティブ性、ビジュアル要素を取り入れる手法があり…
Copyright © 2017, Tim Brown All Rights Reserved.
Tim Brown
Minneapolis web designコミュニティでデザイナー兼開発者として勤めていて、特にアクセス促進とコンバージョンに力を入れています。
