Webサイトを効率よくレイアウトできるFlexbox。メガメニューの実装を例に、具体的な活用方法を紹介します。 ご存じの方もいるとおり、Flexboxはブラウザーサポートが増えて、はずみがついています。Flexboxなら、使いたくないCSSやJavaScriptハックを扱わずに、複雑なユーザーインターフェイスを作れます。 Flexboxはリニアレイアウトモデルを採用しており、スペースの計算をせずに…

Copyright © 2017, Kalpesh Singh All Rights Reserved.

 Kalpesh Singh

Kalpesh Singh

ソフトウエア開発者。インクルーシブウェッブデザインの信奉者であり、オープンスタンダードを尊重しています。CleverTapでフロントエンドの開発者の仕事を楽しんでおり、常にもう一歩の工夫を惜しみません。趣味は、旅行、小説、屋台の食べ歩きです。

Loading...

Flexboxを使えば要素の並び替えはとても簡単。そこで、カスタムデータ属性をうまく使って、Flexboxの内容でソートできるjQueryプラグインを考えて作ってみました。 この記事では、カスタムデータ属性の値をもとに要素をソートする簡単なjQueryプラグインの作成方法を順を追って説明していきます。 どのようなプラグインかは、CodePenのデモを参照してください。 注:この記事では、jQuer…

Copyright © 2017, George Martsoukos All Rights Reserved.

George Martsoukos

George Martsoukos

フリーランスWeb開発者です。SitePointTuts+など、Web構築系の大手マガジンに執筆するWebオタクでもあります。Webに関することなら、なんでもこい!とばかりに、中毒者のごとく、最新テクノロジーについて毎日学び続けています。

Loading...

CSSレイアウトが捗るFlexbox、もう使っていますか? ページ全体のレイアウトのような大掛かりなところよりも、今回紹介するフォームのような小さなところから試してみると便利さを実感できるかもしれません。 HTMLフォーム作成はWeb開発において避けては通れないものですが、その作業が楽しいことはまれなことです。幸いなことに、CSSのFlexboxを使えばこれまで困難だったことでも解決できることがあ…

Copyright © 2016, Craig Buckler All Rights Reserved.

Craig Buckler

Craig Buckler

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

Loading...

もはやBootstrapがデファクトになっているCSSフレームワーク界に、ちょっとかわいい期待の新星が登場。 軽くてシンプル、すぐに使えるCutestrapのチュートリアルをいち早くお届けします。 Cutestrapは最新のCSSフレームワークです。この記事ではCutestrapの機能を紹介し、Cutestrapを使って次のような簡単な1ページのHTMLテンプレートを試しに構築してみます。 Cut…

Copyright © 2016, Maria Antonietta Perna All Rights Reserved.

Maria Antonietta Perna

Maria Antonietta Perna

BootstrapやjQueryでの作業を楽しむフロントエンド開発者です。HTMLテンプレートやカスタムWordPressテーマの構築に強い興味を持ち、WPThemeMakeover.comで幅広く執筆しています。

Loading...