css3 レスポンシブデザイン基礎
レスポンシブデザインcss3レスポンシブデザインとは？レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制...
2019-11
css3 css3 画像をレスポンシブに対応させる（可変にする）
css3画像をレスポンシブに対応させる為にはたった２種類のやり方しかありません。img画像であればフルードイメージ化させる。background画像であれば、background-sizeの指定をする。この２種類の使い方と特徴を覚えれば、画...
webデザイン ボタン画像の変遷
webデザイングラデーションツールを使う前に、なぜわざわざグラデーションツールを使って色を塗るのかを理解しましょう。グラデーション＝光と影ディスプレイという平面の世界に、立体感や質感を出すために光の当たっている部分とそうでない部分（影の部分...
CSS基礎 ２カラムレイアウトの演習
CSS基礎演習１使用するテキスト卵料理カフェ CockeyollyHomeニュースメニュー今月のおすすめオリジナル雑貨マップメール今月のおすすめきのこのオムライスふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレ...
CSS基礎 第1回実技試験の内容
webサイト制作CSS基礎作例今回の実技試験の概要フォルダー名を「自分の名前_test01」として、試験終了後、講師に提出する事画像は各自で用意し指定されたサイズにトリミングする事headerの幅960px高さは350px。背景画像に「CA...
CSS基礎 2カラム演習問題
CSS基礎ヘッダー要素の幅960px 高さ350pxナブ要素は幅960px高さ50pxコンテント要素の幅600px 高さ400px（メインコンテンツ）フッター要素の高さ100px各要素の空き10px各要素の背景色は適宜a要素をホバーした際に...
オンラインツール Google keepを使ってお気に入りサイトをキープする
オンラインツールGoogleの「GoogleKeep」は、ホワイトボードに付箋紙を貼っていくような感覚で、手軽にメモやアイディアなどを記録できるメモアプリですが、chromeに拡張機能を入れる事でさらに使い易くなります。この拡張機能を使って...
Photoshop Photoshopによるスライスとコーディング
Photoshopwebサイト制作既存のサイトを真似してコーディングしてみるのは、非常に良い練習なので、積極的にやりましょう。ただ、練習に向いているサイトとそうでないサイトがあるので、注意が必要です。作業手順1. 既存のサイトのキャプチャー...
CSS基礎 複数ページの制作
CSS基礎webサイト制作最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。以下のよう...
CSS基礎 CSS演習問題 回答
CSS基礎<body>style要素style elementHTML文書内にまとめて設定します。</body>解答例<!doctype html><html lang="ja"><head><meta charset="utf-8"><t...