昨今、スマホ対応サイトではハンバーガーメニューをよく見かけます。ハンバーガーメニューとは三本線でメニューを開閉することができるナビゲーションメニューのことです。 図１ ハンバーガーメニューの使用例 図１の赤枠で囲んだところがハンバーガーメニュー部分です。 今回はそんなハンバーガーメニューの作成方法をcssとjQueryを用いて解説していきます。さらに、レスポンシブなハンバーガーメニューの実装例を紹 […]
吉永です。 普段サイトを見ていると、テーブルを使った説明箇所をみることがあると思います。例えばよくテーブルが使用される部分としては、会社概要や料金プランなどがあります。 図１ テーブルの使用例 テーブルはいくつかの要素を比較したり、読者にコンパクトに情報を伝えることができるのでとても重宝されます。今回はサイトでよく見られるテーブルがどのようなHTML＆CSSで記述されているのか解説していきます。
今回はcssのdisplayプロパティについて解説していきます。 htmlタグの表示のされ方や高さ・幅の設定は予めhtmlタグごとに決まってます。しかし、これらの設定を変更し、htmlタグの使う範囲を拡張したい時があると思います。 このような場合に、htmlタグのinline要素やblock要素を変更し、適用範囲を変更できるcssがdisplayプロパティです。
こんにちは。開発部の濵口です。 もうそろそろ梅雨入りですね。いかがお過ごしでしょうか。 みなさんCSSの擬似クラスはご存知でしょうか？擬似クラスを使いこなすと柔軟にセレクタを指定することができるため、Webページの装飾の幅が広がります。 今回は数ある擬似クラスの中でも似通っていて混乱しがちな、nth-childとnth-of-typeの違いについて解説していきます！
吉永です。もう暑くなってきましたね。 今回はhtmlのタグの中でも汎用性の高いdivタグについて取り上げます。このdivタグはcssとも相性がよく、たいていclassやidを付与して使います。 ただ、あまりの汎用性の高さにどう使えばいいのかわからない人が多くいると思います。また逆に、無駄に使いすぎている人もいるのではないでしょうか？ そこで、この記事ではdivタグの効果的な使い方を再確認しつつ、c […]
吉永です。今回第一回目の記事になります。 CSSでwebページを作成するにあたり、ボックス関連の分野は難しいと感じる方が多いと思います。それは、paddingとmarginの違いが曖昧なままだからだと考えられます。 そこで、この記事ではpaddingとmarginの違いを明確にしながら、実際の現場で活かせるように解説します。
タブメニューを作ってみよう みなさんこんにちは。開発部の本田です。 今回は、jQueryを使って簡単に切替できるレスポンシブ対応のタブメニューを実装していきたいと思います。 最近では様々な用途のサイトで導入されており、ECサイトで利用されることも多々あります。 オシャレで見やすいサイトを実現できるので是非試してみてください。
ECサイトの流入の7割がスマホからの流入となった今、スマホでのUI/UXは非常に重要です。 今回はレスポンシブで対応しスマホでのUIを大きく上昇させるハンバーガーメニューの実装方法をご紹介します。スマホのような小さい画面でも操作しやすいメニューを作成することができます。
最近、パララックス効果（視差効果）を取り入れたサイトを目にするケースが増えてきています。ECサイトの場合、商品ページにパララックス効果を取り入れる必要性はそれほど高く無いかもしれません。 しかしLP（ランディングページ）の見せ方として、パララックスさせることで工夫次第で、人を惹きつけるページを作成することができます。 パララックス効果を持たせるには、javascriptによる実装がよく使われていま […]
