Flexboxで均等割り付けを実現できる「justify-content: space-between」は自動でマージンも計算してくれるため非常に使い勝手が良く、インフォメーションをグリッドレイアウト風に並べる時など、ついつい多用してしまいます。 Box01 Box02 Box03 Box04 上の例のように一行に全て入りきるか「flex-wrap: no-wrap」を指定した時のように、改行されない場合は問題ないのですが、下の例のように二行になった場合、「justify-content: space-be
たまに「MOJA net」のトップページを開いたときの、アイコンがふわふわ浮いているアニメーションはどうやって作るのか聞かれる事があるので、今回はその仕組みを解説しようと思います。 有名なところだと「jqFloat.js」などJavaScriptで作るプラグイン等もあるのですが、私は単純にCSSのみで再現しております。 では、まずソースから見ていきましょう。 HTML CSS #balloon{ width:3vw; height:4vw; fill:#60B99A; animation: 3.5s Rol
Wordpressでショッピングサイトを作るときの定番プラグイン「Welcartウェルカート」 お手軽にWordpressに販売機能を付けられるだけでなく、カスタマイズ次第では大手サイトに負けないくらい本格的なショッピングサイトを作ることも可能です。 第1回はWelcartに｢お気に入り｣機能を追加する｢WP Favorite Posts｣、第2回は｢最近チェックした商品｣機能を追加する｢Last Viewed Posts｣を紹介させていただきました。Welcartには基本的なショッピング機能は備わっている
Wordpressでショッピングサイトを作るときの定番プラグイン「Welcartウェルカート」 お手軽にWordpressに販売機能を付けられるだけでなく、カスタマイズ次第では大手サイトに負けないくらい本格的なショッピングサイトを作ることも可能です。 前回はWelcartに｢お気に入り｣機能を追加する｢WP Favorite Posts｣のカスタマイズを紹介させていただきました。Welcartには基本的なショッピング機能は備わっているのですが、かゆい所に手が届かない事もしばしば。しかし、プラグインを導入する
Wordpressでショッピングサイトを作るときの定番プラグイン「Welcartウェルカート」 お手軽にWordpressに販売機能を付けられるだけでなく、カスタマイズ次第では大手サイトに負けないくらい本格的なショッピングサイトを作ることも可能です。 ところがWelcartには基本的なショッピング機能は備わっているのですが、かゆい所に手が届かない事もしばしば。 例えば楽天市場やAmazonにある「お気に入り」や「最近チェックした商品」等のデータ保存が必要になる機能や「この商品を見た人はこんな商品も見ています
WEBサイトを作った事のある人なら誰しもInternet Explorer(以下IE)に苦しめられた事があると思います。 一般的にIEは遅い・セキュリティが弱い等の悪名が高いですが、制作サイドから言わせてもらうと、W3C標準仕様と異なる挙動と、バグが多すぎるのが一番の問題。例えるなら、マニュアル通りに作っても決して組みあがらず、パーツの欠品も多いプラモデルのようなもの。 他のブラウザなら、W3C標準仕様の通りに作れば、ほぼ同じような表示が可能ですが、最後にIEで確認すると動かなかったり表示の崩れがあって、そ
秋田県横手市でパッケージデザインや雑誌・チラシ等のDTPデザインで活躍しているデザイナーさんを中心に、WEBクリエイター・モバイルアプリのプログラマーが集まってデザイン制作会社「Applause (アプローズ)」が立ち上がりました。 Applause はフリーランスのデザイナー集団です。 経験豊富なスタッフが在籍し、ロゴやイラスト、写真撮影など販促物に関わる要素をオールインワンでお任せいただけるため、低コストで高パフォーマンスの制作が可能です。 私も業務委託という形で Applause のWEBコーディング
前回はシンプルな命令で簡単にフレキシブルなレイアウトを実現できるFlexboxの基本的な使い方を説明しました。今回は応用編としてFlexboxを使って、一般的な使い方とは少し違う面白い使い方をご紹介したいと思います。 皆さんがFlexboxを使ったレイアウトと聞いて、真っ先に思い浮かべるのは基本編でも作った横並びメニューやペイン等の分割レイアウトでしょうか？実際にFlexboxはとても使い勝手が良いので、かなり広いシーンで活躍させることができます。 01.Flexboxでアイコンを中央配置させてみる まず最
リッチコンテンツを作る場合、背景全体に写真やアニメーションを表示させるのに便利なのがCSSの「position:fixed」です。 他にもヘッダーやメニューを固定したい時や、要素をスクロールに関わらず画面内に留まらせる事ができる便利な命令です。 Google Chromeやsafariのようなモダンブラウザなら問題ないのですが、この機能をEdgeやInternet Explorer(以下、IE)で使うと、「fixed」にした要素がマウスホイールを回すたびに"ガクガクブルブル"と震えてしまいます・・・。 せっ