ECサイトの新規構築あるいはリニューアルを実施する場合、まずはショッピングカートの機能を備えたプラットフォームを用意する必要があることをこちらの記事にて解説致しました。その方法は「スクラッチ型」「パッケージ型」「ASP/Saas/クラウド型」等様々ありますが、どの方法を選んだ場合でもECサイトをオープンさせるためには、ECプラットフォーム上でのサイト制作が必要です。 ECサイトにおける商品販売は、 […]
今回はFlexboxを使用してレスポンシブなサイトを構築する方法を解説していきます。 Flexboxは文字通りフレキシブルなレイアウトを構築できるボックスで、今後webデザインを行う上で必要不可欠になってくると考えられます。 そんなFlexboxはレスポンシブwebデザインにも最適で、画面サイズに応じて最適なレイアウトを構築することができます。ぜひ今回の記事を参考に、ご自身のサイトにFlexbox […]
多くのサイトでは画面遷移がしやすい等のメリットから固定ヘッダーメニューを実装するケースが増えてきました。 そこで、今回は実際に固定ヘッダーメニューのメリットデメリットを解説し、その作成方法を紹介していきます。
普段サイトを見ていると、テーブルを使った説明箇所をみることがあると思います。例えばよくテーブルが使用される部分としては、会社概要や料金プランなどがあります。 図１ テーブルの使用例 テーブルはいくつかの要素を比較したり、読者にコンパクトに情報を伝えることができるのでとても重宝されます。今回はサイトでよく見られるテーブルがどのようなHTML＆CSSで記述されているのか解説していきます。
今回はcssのdisplayプロパティについて解説していきます。 htmlタグの表示のされ方や高さ・幅の設定は予めhtmlタグごとに決まってます。しかし、これらの設定を変更し、htmlタグの使う範囲を拡張したい時があると思います。 このような場合に、htmlタグのinline要素やblock要素を変更し、適用範囲を変更できるcssがdisplayプロパティです。
こんにちは。開発部の濵口です。 もうそろそろ梅雨入りですね。いかがお過ごしでしょうか。 みなさんCSSの擬似クラスはご存知でしょうか？擬似クラスを使いこなすと柔軟にセレクタを指定することができるため、Webページの装飾の幅が広がります。 今回は数ある擬似クラスの中でも似通っていて混乱しがちな、nth-childとnth-of-typeの違いについて解説していきます！
5月だと言うのに、もう暑くなってきましたね。 今回はhtmlのタグの中でも汎用性の高いdivタグについて取り上げます。このdivタグはcssとも相性がよく、たいていclassやidを付与して使います。 ただ、あまりの汎用性の高さにどう使えばいいのかわからない人が多くいると思います。また逆に、無駄に使いすぎている人もいるのではないでしょうか？ そこで、この記事ではdivタグの効果的な使い方を再確認し […]
CSSでwebページを作成するにあたり、ボックス関連の分野は難しいと感じる方が多いと思います。それは、paddingとmarginの違いが曖昧なままだからだと考えられます。 そこで、この記事ではpaddingとmarginの違いを明確にしながら、実際の現場で活かせるように解説します。
ECサイトの流入の7割がスマホからの流入となった今、スマホでのUI/UXは非常に重要です。 今回はレスポンシブで対応しスマホでのUIを大きく上昇させるハンバーガーメニューの実装方法をご紹介します。スマホのような小さい画面でも操作しやすいメニューを作成することができます。
最近、パララックス効果（視差効果）を取り入れたサイトを目にするケースが増えてきています。ECサイトの場合、商品ページにパララックス効果を取り入れる必要性はそれほど高く無いかもしれません。 しかしLP（ランディングページ）の見せ方として、パララックスさせることで工夫次第で、人を惹きつけるページを作成することができます。 パララックス効果を持たせるには、javascriptによる実装がよく使われていま […]
ランディングページなどの縦に長いページでは、スマートフォンの小さな画面で表示するとページ上部のメニューまで戻りにくくなってしまいがちです。 このような場合、ページのヘッダー部分を画面上部に固定表示をして、常に表示しておくことができます。グローバルメニューから各ページにいつでも遷移することができるので、回遊率を高めることも期待できます。
