ノンデザイナーのためのデザイン上達講座 入門コース
講座受講ページにお越しいただきありがとうございます。
【入門コース】からはじめたい。という方は以下からご登録ください。
【入門コース】は、メルマガにて無料配信しています。
Webデザインに限らず、
- デザインを本格的に学んだことはないけれど、デザインの仕事をしていきたい。
- デザインが本業ではないけれど、見映えのよいWebバナーやプレゼン資料を作りたい。
という方に向けて配信中。
【入門コース】メルマガ登録はこちらから
⇒入門コースに登録する。
ノンデザイナーのためのデザイン上達講座 プロなみコース
CSS基礎知識カテゴリーの記事一覧
id属性とclass属性の違い、使い分けについて教えて下さい。
id属性とclass属性の違いは、簡単に言えば、そのペ...続きを読む
リンクを記述する際に使用するa要素に対して疑似クラスを設定することで、リンクの色を変えたり、背景色を加えたり、下線を引い...続きを読む
floatで作る段組みレイアウト講座カテゴリーの記事一覧
こんにちは。フクモトです。
今回は「floatで作る段組みレイアウト」について。
HTMLとCSSの書き方を...続きを読む
HTMLの作成が終わったら、次はCSSを書いていきます。
新規でCSSファイルを作る。
ファイル名をstyl...続きを読む
それでは、「main」と「sidebar」を段組み(横並び)にしていきます。
段組み(横並び)にするには、floa...続きを読む
それでは、「main」と「sidebar」の左右を入れ替えてみましょう。
といってもやり方は簡単。floatプロパ...続きを読む
こんにちは。フクモトです。
今回は、これまで学習してきた2カラムレイアウトの応用として3カラムレイアウトに挑戦しま...続きを読む
こんにちは。フクモトです。
今回は、2カラムと3カラムとをCSSで振り分ける方法を解説していきます。
例えば...続きを読む
WordPressオリジナルテーマ作り方カテゴリーの記事一覧
今回は、CMSの基礎知識というテーマで、Webサイトを管理・更新するシステムの概要についてお話します。
動画は、12分...続きを読む
HTMLからWordPress化するには、
「WordPressのオリジナルテーマ」はどのような制作の流れで出来上...続きを読む
HTMLからWordPress化する流れ 後編です。
⇒ HTMLからWordPress化 前編はこちら
動画は、1...続きを読む
デザイン制作課題ルームカテゴリーの記事一覧
デザイン制作課題ルームは、
まとめんばー・Webクリめんばー・ノンデザめんばー・レスポンシブめんばー・WordPres...続きを読む
課題ルームで利用できそうなフリー素材サイトをまとめています。
写真関連
⇒ ドットフォトプロジェクト 画像素材サイト...続きを読む
メニュー・ナビゲーションカテゴリーの記事一覧
テキストリンクをボタンのように見せるには、displayプロパティが便利です。
displayプロパティとは、要素...続きを読む
グローバルナビゲーションの一例です。
ここでは、テキストメニューでリストを横並びにし、displayプロパティを使...続きを読む
リストに背景画像をつける
a要素に背景画像の指定をします。表示位置は左上から開始されるように指定。
...続きを読む
ユーザーのアクションや状態に応じてメニューの表示が切り替わる仕組みを作ります。
「通常の状態」「オンマウスでロール...続きを読む
ユーザーのアクションや状態に応じてメニューの表示が切り替わる仕組み。
今回は、横並びメニュー編です。
縦並び...続きを読む
CSSで困った!カテゴリーの記事一覧
Webクリオンライン Webデザイン講座の受講生の方から
「CSSの記述がどこも間違っていないのに、上手く反映されない...続きを読む
HTMLカテゴリーの記事一覧
HTMLのマークアップについて調べていたところ、「h1タグは、1ページにひとつ」にしないといけないという情報を見かけまし...続きを読む
今回は、ul olリストの入れ子のお話。
WebスクールのHTMLの授業でも、
順不同リストであるul li...続きを読む
Dreamweaverカテゴリーの記事一覧
Webクリオンライン受講生へのサポート内容です。
基本的な質問ですが、Dreamweaverでサーバー上にアップし...続きを読む
Dreamweaverの「表示」→「コードビュー」→「非表示の文字」に チェックを入れても動画のような表示が出てこな...続きを読む
Photoshopカテゴリーの記事一覧
PhotoshopでWebデザインのカンプを作成しています。
新規作成時のファイルのサイズは、横幅1280px 高...続きを読む
Webデザイン・レイアウトカテゴリーの記事一覧
Webクリオンラインのビストロ・デュ・リヨン、トップページカンプを制作していて質問があります。
コンテンツ幅128...続きを読む
Webサイトのレイアウトで2カラムのデザインにする場合、サイドバーは左右どちらがよいか、基準はありますか?
とって...続きを読む
受講生の方から、画像の縦横比についてご質問がありました。
「Webサイトに利用する写真の縦横比は何を基準にすればよ...続きを読む
独学の方法カテゴリーの記事一覧
複数ページを作為する際、ヘッダーやフッター、サイドバーなどサイトの共通部分はどのように管理すればよいのでしょうか?
...続きを読む
福本さん!
ついに商品撮影&加工のお仕事を頂くことができました。
撮影台を自作してから3ヶ月あまりホコリをか...続きを読む
Webサイト制作・運営カテゴリーの記事一覧
実際のwebサイトで使用する画像は、どういうものを使うのが多いのでしょうか?
例えば、クライアント様よりもらう、と...続きを読む
Webサイト制作の現場よりカテゴリーの記事一覧
こんにちは。フクモトです。
先日、当サイトをSSL化した際に、疑問に思ったこと、調べたこと、躓いたことなどをこちら...続きを読む
こんにちは。フクモトです。
SSL化を進め、urlが「https」できちんとコンテンツが表示されていても、完全にS...続きを読む
こんにちは。フクモトです。
今回は、フリーランスのWebデザイナーが請け負う小さな案件の場合、Retina対応はどこまで...続きを読む
Facebookページの更新ってSEOに効果あるの?
お客様からこんな質問がきたら、あなたはどう答えますか?
こ...続きを読む
おすすめ書籍・サイト・ツールカテゴリーの記事一覧
デザインやレイアウトが苦手です。
独学で何とか学習したいと、いろいろと参考書を探してみたのですが、たくさんあってど...続きを読む
Photoshop、Illustratorの操作をひと通りマスターしたのですが、実際にどの機能やツールを使えばよいのか?...続きを読む
このサイト、めちゃ便利です。
ハイクオリティ素材が商用無料で揃っていて、私はよくお世話になっています。
...続きを読む
レスポンシブWebデザイン講座カテゴリーの記事一覧
レスポンシブWebデザインとは
レスポンシブWebデザインとはパソコン、タブレット、スマートフォンなどの画面サイズ...続きを読む
レスポンシブWebデザインの制作を進める上で、表示確認をするための便利なツールがインターネット上にありますが、そのほ...続きを読む
このサンプルサイトでは、「グリッドデザイン」という手法を取り入れています。
「グリッドデザイン」とは
ページを構...続きを読む
メディアクエリの説明を中心にCSSの記述の順序やブレイクポイントについて解説します。
練習問題もありますのでぜ...続きを読む
viewportとは
スマートフォン、タブレットで表示されるときのWebサイトの見え方の指定です。
このvi...続きを読む
同じ画像なのにパソコンで見るときれいに表示されていても、スマートフォンでは、画像がぼやけている。
スマホサイトやレ...続きを読む
Retinaディスプレイ対応のスマートフォンやタブレットで画像がぼやけた感じになってしまうのは、解像度に対する処理が異な...続きを読む
レスポンシブWebデザインを学習していて、私が最初に疑問に思ったのが、画像の扱い方です。
Webページが、画面サイ...続きを読む
ブログカテゴリーの記事一覧
こんにちは。フクモトです。
私の運営する「Webクリオンライン・動画講座」を
Webデザインの技術を学ぶだけでな...続きを読む
こんにちは。フクモトです。
独学でWebデザインの勉強をされている方やWebクリオンラインメンバーの力添えになれば...続きを読む
Facebookページに「いいね!」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね!」していただけると嬉しいです!