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...

この春、CSSコーディングの仕事を始めた新人さんへ、「きれいなCSS」を書くためのガイドラインをお届け。 きれいなCSSを書くためにはいくつかルールがあります。ルールに従うとレイアウトの崩れを最大限防げるだけでなく、軽量で再利用可能なCSSを書けるメリットもあります。ここで紹介するルールは次のとおりです。 グローバルセレクターや要素セレクターを避ける 詳細度が高すぎるセレクターは使わない セマンテ…

Copyright © 2017, Tiffany Brown All Rights Reserved.

Tiffany Brown

Tiffany Brown

ロサンゼルスに拠点を置くフリーランスのWeb開発者・テクニカルライターです。大小のクライアントにWeb開発・コンサルティングサービスをしています。Opera Softwareのdeveloper relationsチームの元メンバーで、SitePointの書籍『JumpStart HTML5』の共同執筆者でもあります。ブログでWeb開発技術についてときどき執筆しています。Twitterのフォローは@webinistaです。

Loading...

次々とリリースされるJavaScriptライブラリーにフレームワーク、進化を続けるCSSモジュール……と、変化の激しいフロントエンド開発界隈。いま開発者たちに実際に使われているのはどんなツール? 開発経験は2年以上ありますか? 高度なCSSスキルとしてSassやAutoprefixerの使用も含まれていますか? JavaScriptの知識は十分にあり、Gulp、nmp、jQueryを使いこなせてい…

Copyright © 2017, Craig Buckler All Rights Reserved.

Craig Buckler

Craig Buckler

1995年に処女作としてIE2.0でページを作ったイギリス人のフリーランスWebコンサルタントです。以来、スタンダード、アクセシビリティとHTML5のテクニックの伝道者として活躍し、SitePointでは1000以上の記事を書いています。ツイッターのアカウントは@craigbuckler。

Loading...

バーティカルリズム(Vertical Rhythm)はタイポグラフィにおける重要な概念ですが、絶対的なルールではありません。 Webのレイアウトをするとき、デザイナーやフロントエンドコーダーは縦方向より横方向のレイアウトに時間をかけるのが普通です。 これはそれほど不思議なことではありません。たいていのデバイスは縦にスクロールするように設計されているので、ページの横幅は高さに比べて制限があります。で…

Copyright © 2017, Alex Walker All Rights Reserved.

Alex Walker

Alex Walker

sitepoint.comのデザイン・フロントエンド開発者をマネジメントしています。またSitePointの「デザイン&UX」カテゴリーの編集も担当しています。

Loading...

上達する近道は、まず他人を真似ることから。SnappySnippetなら、お気に入りのUIパーツのHTML/CSSを抽出して、見やすく整えてくれます。 先週の夜、子どものとき以来久しぶりに映画『E.T. ジ・エクストラ・テレストリアル』を鑑賞していたときのことでした。「子ども時代の思い出補正」があったのかもしれませんが、「この映画はすごい」と思いました。スティーヴン・スピルバーグは、やせた子供たち…

Copyright © 2017, Alex Walker All Rights Reserved.

Alex Walker

Alex Walker

sitepoint.comのデザイン・フロントエンド開発者をマネジメントしています。またSitePointの「デザイン&UX」カテゴリーの編集も担当しています。

Loading...

スマホの普及、マイクロインタラクションの導入と合わせて、再評価されているGIFアニメを使ったUIデザイン。Webサイトを楽しくする活用法を5つ紹介。 ユーザーエクスペリエンスとは、「使いやすさ」だけではなく、製品やWebサイトをより心地よく、そして楽しく使えるようにすることです。Webサイトをおもしろくする方法には、注意を引くトランジション、インタラクティブ性、ビジュアル要素を取り入れる手法があり…

Copyright © 2017, Tim Brown All Rights Reserved.

Tim Brown

Tim Brown

Minneapolis web designコミュニティでデザイナー兼開発者として勤めていて、特にアクセス促進とコンバージョンに力を入れています。

Loading...

斜めのデザイン、流行っていますよね。いろいろな実装方法がありますが、柔軟で使いやすい、疑似要素を使ったSassのコードを考えてみました。 最近、Webサイト制作でデザインガイドラインの一部としてティルト角(tilted angle)を頻繁に使う必要がありました。この記事で「ティルト角」とは、次のように(Webページの)上か下の辺が完全に水平ではなく少し傾斜している部分を指すものとします。 ティルト…

Copyright © 2016, Hugo Giraudel All Rights Reserved.

Hugo Giraudel

Hugo Giraudel

CSSのゴブリン、Sassハッカー、マージン狂です。Sass GuidelinesSassDocSass CompatibilityBrowserhacksほか多くのSass関連の著者でもあります。

Loading...

Sass、Less、Stylusなどのプリプロセッサーよりも柔軟に、必要な機能を選んで使えるCSS変換ツール「PostCSS」。海外のフロントエンド開発界隈で普及しつつある人気ツールの導入方法とおすすめプラグインをチェック。 SitePointではPostCSSの記事を『An Introduction to PostCSS』『How to Use PostCSS with Gulp』『PostCS…

Copyright © 2016, Craig Buckler All Rights Reserved.

Craig Buckler

Craig Buckler

1995年に処女作としてIE2.0でページを作ったイギリス人のフリーランスWebコンサルタントです。以来、スタンダード、アクセシビリティとHTML5のテクニックの伝道者として活躍し、SitePointでは1000以上の記事を書いています。ツイッターのアカウントは@craigbuckler。

Loading...