独学でWebデザインの勉強をする人のためのまとめサイトです。

最新の記事

  • floatで作る段組みレイアウト講座

floatで作る段組みレイアウト

ステップ5ーfloatで作る段組みレイア・・・

こんにちは。フクモトです。 今回は、これまで学習してきた2カラムレイアウトの応用として3カラムレイアウトに挑戦します。 2カラムレイアウトでは、各エ...続きを読む

  • floatで作る段組みレイアウト講座

floatで作る段組みレイアウト

ステップ4ーfloatで作る段組みレイア・・・

それでは、「main」と「sidebar」の左右を入れ替えてみましょう。 といってもやり方は簡単。floatプロパティの値を変更するだけです。 今度...続きを読む

  • ブログ まとめんばーず限定

Webクリオンライン・ロゴ制作コンペ開催!

Webクリオンライン・ロゴ制作コンペ 結・・・

2015年8月~9月、Webクリオンライン・Webデザイン講座の受講メンバーを対象に行われたロゴ制作コンペの採用案が決定しました。 ⇒ Webクリオンライ...続きを読む

  • floatで作る段組みレイアウト講座

floatで作る段組みレイアウト

ステップ3ーfloatで作る段組みレイア・・・

それでは、「main」と「sidebar」を段組み(横並び)にしていきます。 段組み(横並び)にするには、floatプロパティを使います。 「div...続きを読む

  • floatで作る段組みレイアウト講座

floatで作る段組みレイアウト

ステップ2ーfloatで作る段組みレイア・・・

HTMLの作成が終わったら、次はCSSを書いていきます。 新規でCSSファイルを作る。 ファイル名をstyles.cssとしてhtmlファイルと同じ...続きを読む

  • floatで作る段組みレイアウト講座

floatで作る段組みレイアウト

ステップ1ーfloatで作る段組みレイア・・・

こんにちは。フクモトです。 今回は「floatで作る段組みレイアウト」について。 HTMLとCSSの書き方を覚えたころ、一番最初にぶつかる難関は、W...続きを読む

  • CSS基礎知識 まとめんばーず限定

リセットCSS

リセットCSSとは?

こんにちは。フクモトです。 今回は「リセットCSS」について。 リセットCSSとは? 通常、CSSでスタイルを設定していない状態は、以下のように表示さ...続きを読む

  • Webサイト制作の現場より まとめんばーず限定

カフェサイトのご提案書と見積書サンプル

カフェサイトのご提案書と見積書サンプル

こんにちは。フクモトです。 今回は、Webサイト新規制作、インターネットを利用した集客法についてのご提案書のサンプルと同時に提出した見積書サンプルを公開し...続きを読む

  • Webサイト制作の現場より まとめんばーず限定

ネットショップでの売上アップ、集客方法についてのご提案の例

ネットショップでの売上アップ、集客方法に・・・

竹炭などの竹関連商品の販売・売り上げ確保についてのご提案の一例です。 「すでに運営中の竹炭・竹関連商品のネットショップで、なかなか売り上げが伸びず、困って...続きを読む

  • リスト関連 まとめんばーず限定

ol liのマーカーを背景画像にする方法

ol liのマーカーを背景画像にする方法

今回は、ol liのマーカーを背景画像にする方法です。 以下の「HTML」「CSS」それぞれのタブをクリックすると、コードを確認することができます。 ...続きを読む


  • HTML まとめんばーず限定

seoを意識したhtml 見出し、リスト、段落の使いどころ

SEOを考えたhtmlマークアップ 見出・・・

Webサイト全体のhtmlマークアップで、見出し・段落・リストの使いどころについて、よくご質問をいただくので、こちらで一例をご紹介します。 h1からh4、...続きを読む

  • パーツ別合わせ技 まとめんばーず限定

positionプロパティ・見出しを上手くレイアウトしよう!

パーツ別レイアウトその2 positi・・・

パーツ別レイアウトの一例として、画像のようなレイアウトをつくるCSSの指定方法をご紹介します。 以下の「HTML」「CSS」それぞれのタブをクリックすると...続きを読む

  • パーツ別合わせ技 まとめんばーず限定

パーツ別レイアウトその1 positionプロパティ・listにid属性をつける

パーツ別レイアウトその1 positi・・・

パーツ別レイアウトの一例として、画像のようなレイアウトをつくるCSSの指定方法をご紹介します。 以下の「HTML」「CSS」それぞれのタブをクリックすると...続きを読む

  • リスト関連 まとめんばーず限定

定義リストdl・dt・ddタグの応用 その2

定義リストdl・dt・ddタグの応用 そ・・・

定義リストdl・dt・ddタグの応用として、dt・ddタグに背景画像を指定するレイアウトをご紹介します。 私は、よくある質問ページなどに利用しています。 ...続きを読む

  • リスト関連 まとめんばーず限定

定義リストdl・dt・ddタグの応用 その1

定義リストdl・dt・ddタグの応用 そ・・・

定義リストdl・dt・ddタグの応用として、dtタグには背景画像を、ddタグに画像が配置された場合は、右に回り込ませるというレイアウトをご紹介します。 【...続きを読む

  • メニュー・ナビゲーション

CSSを使用した画像のロールオーバー 横メニュー編

CSSを使用した画像のロールオーバー 横・・・

ユーザーのアクションや状態に応じてメニューの表示が切り替わる仕組み。 今回は、横並びメニュー編です。 縦並びメニュー編はこちら 「通常の状態」...続きを読む

  • メニュー・ナビゲーション

CSSを使用した画像のロールオーバー 縦・・・

ユーザーのアクションや状態に応じてメニューの表示が切り替わる仕組みを作ります。 「通常の状態」「オンマウスでロールオーバーさせる」「現在いるページをユーザ...続きを読む

  • ブログ

デザインおすすめ書籍

Webデザインのまとめサイト構築中

こんにちは。フクモトです。 独学でWebデザインの勉強をされている方やWebクリオンラインメンバーの力添えになればと、まとめ的なものを会員制サイトとして、...続きを読む



Facebookページに「いいね!」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね!」していただけると嬉しいです!



Pagetop