- 2020.06.18
Flexboxを用いてレスポンシブなサイトを構築する
今回はFlexboxを使用してレスポンシブなサイトを構築する方法を解説していきます。 Flexboxは文字通りフレキシブルなレイアウトを構築できるボックスで、今後webデザインを行う上で必要不可欠になってくると考えられます。 そんなFlexboxはレスポンシブwebデザインにも最適で、画面サイズに応じて最適なレイアウトを構築することができます。ぜひ今回の記事を参考に、ご自身のサイトにFlexbox […]
WEBデザイン
1/3ページ
- 2020.05.25
【レスポンシブ】HTMLとCSSで固定ヘッダーメニューを作成する
多くのサイトでは画面遷移がしやすい等のメリットから固定ヘッダーメニューを実装するケースが増えてきました。 そこで、今回は実際に固定ヘッダーメニューのメリットデメリットを解説し、その作成方法を紹介していきます。
- 2019.10.18
【jQuery&CSS】レスポンシブなハンバーガーメニューを作成する
昨今、スマホ対応サイトではハンバーガーメニューをよく見かけます。ハンバーガーメニューとは三本線でメニューを開閉することができるナビゲーションメニューのことです。 図１ ハンバーガーメニューの使用例 図１の赤枠で囲んだところがハンバーガーメニュー部分です。 今回はそんなハンバーガーメニューの作成方法をcssとjQueryを用いて解説していきます。さらに、レスポンシブなハンバーガーメニューの実装例を紹 […]
- 2019.08.30
html＆cssを用いて見やすいテーブルを作成する
吉永です。 普段サイトを見ていると、テーブルを使った説明箇所をみることがあると思います。例えばよくテーブルが使用される部分としては、会社概要や料金プランなどがあります。 図１ テーブルの使用例 テーブルはいくつかの要素を比較したり、読者にコンパクトに情報を伝えることができるのでとても重宝されます。今回はサイトでよく見られるテーブルがどのようなHTML＆CSSで記述されているのか解説していきます。
- 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を大きく上昇させるハンバーガーメニューの実装方法をご紹介します。スマホのような小さい画面でも操作しやすいメニューを作成することができます。