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