短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案(Working Draft)の段階で、将来、細かい部分に変更がないとは言い切れませんが、Ed…

渡辺 竜

渡辺 竜

「明日のウェブ制作に役立つアイディア」をテーマに「Rriver」というブログを運営。アメリカの大学を卒業後、1998年に東海岸のボストン近郊でウェブ制作を開始。2001年に帰国後、東京のウェブ制作会社に勤務。その後、事業者側に移り現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わる。

Loading...

CSS Gridで使えるrepeat()関数の「auto-fill」「auto-fit」の違いを理解すると、柔軟なレスポンシブ Webデザインが実現できます。わかりにくい両者の違いをデモで確認しましょう。 CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になる…

渡辺 竜

渡辺 竜

「明日のウェブ制作に役立つアイディア」をテーマに「Rriver」というブログを運営。アメリカの大学を卒業後、1998年に東海岸のボストン近郊でウェブ制作を開始。2001年に帰国後、東京のウェブ制作会社に勤務。その後、事業者側に移り現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わる。

Loading...

スクロールに気の利いた動きを加えたいときに便利なJavaScriptのライブラリー「ScrollReveal」を紹介します。 シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「ScrollReveal」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるた…

渡辺 竜

渡辺 竜

「明日のウェブ制作に役立つアイディア」をテーマに「Rriver」というブログを運営。アメリカの大学を卒業後、1998年に東海岸のボストン近郊でウェブ制作を開始。2001年に帰国後、東京のウェブ制作会社に勤務。その後、事業者側に移り現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わる。

Loading...

レスポンシブWebデザインの実装に欠かせないメディアクエリを使わずに、CSS GridとFlexboxでレスポンシブなレイアウトを実装する方法を紹介します。 レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS Grid…

渡辺 竜

渡辺 竜

「明日のウェブ制作に役立つアイディア」をテーマに「Rriver」というブログを運営。アメリカの大学を卒業後、1998年に東海岸のボストン近郊でウェブ制作を開始。2001年に帰国後、東京のウェブ制作会社に勤務。その後、事業者側に移り現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わる。

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

CSSの値に指定できる単位といえば、pxや%などがおなじみ。でもレスポンシブなサイト制作では、vhやvwといったViewport単位がとても便利です。基本と使いどころを解説します。 CSSにViewport単位(Viewport Uints)が導入されてから数年になります。ブラウザーのサイズが変更されるたびに値が変わるという意味で、真にレスポンシブな単位と言えます。Viewport単位について聞い…

Copyright © 2017, Asha Laxmi All Rights Reserved.

Asha Laxmi

Asha Laxmi

フロントエンドの開発者でインストラクターもしています。新しくて興味深いJavaScriptライブラリーに取り組むことが楽しみです。旅行も大好きで、自由時間の多くは読書に費やしています。

Loading...

レスポンシブWebデザインで使うメディアクエリーを進歩させ、要素ごとに条件を設定できる「エレメントクエリー」。どこがどう便利なのか? 専用ライブラリー「EQCSS」による使い方を紹介します。 CSSのメディアクエリー(Media Query)を使い、画面幅に基づいて要素の表示方法を変える方法はもうおなじみでしょう。エレメントクエリー(Element Query)はメディアクエリーと似ているものの、…

Copyright © 2017, Baljeet Rathi All Rights Reserved.

Baljeet Rathi

Baljeet Rathi

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

Loading...

UIデザイナーに人気のベクタードローイングツール「Sketch」の新バージョンがついにレスポンシブレイアウトに対応。モバイルアプリだけでなくWebデザインにもますます活用できそう。 Sketchユーザーに朗報です! Sketch 3.9ではついにフルードレイアウトを利用できるようになりました。フルードレイアウト(レスポンシブレイアウトの一種のサブセット)とは、コンテナのサイズに合わせて要素をリサイ…

Daniel Schwarz

Daniel Schwarz

フルタイムのデザインライター、デジタルノマドです。デザインやコードに関する執筆以外には、自身が立ち上げたクリエイティブスタジオ「Airwalk Studios」で作業することもあります。ロンドン出身の24歳。

Loading...

Web Componentsを使った制作アプローチは、レスポンシブWebデザインの常識を変えるかもしれません。 数年前、「Web Components」という言葉がよく聞かれるようになり、当時は私自身もワクワクしていたのですが、一過性のニュースのごとく、いまではまったく忘れられてしまっています。しかし、ここ最近、Web Componentsが再び注目を集めている模様。特に、Web Componen…

Copyright © 2016, David Berner All Rights Reserved.

David Berner

David Berner

スペーサーGIFや、文字点滅タグがまだイケてた1998年からコーディングし続けているフロントエンドデベロッパー。Webを前進させることに情熱を注ぎ、フロントエンド関連するあらゆることについて fedordead.com でも執筆中。

Loading...