css3 カンプ作成の練習
css3webサイト制作１、cssファイルは外部リンクでリンクさせ、適切なリセットをかける事２、ロゴ画像をSVG形式で作成し、h1の背景画像で表示。この際、h1のテキストはcssで隠すように。３、webアイコン（FontAwesome）を使...
web-design
css3 css3 Flexboxの使い方
css3レスポンシブデザインFlexbox（Flexible Box Layout Module）はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった...
レスポンシブデザイン レスポンシブデザイン実践１
レスポンシブデザイン今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。今回のブレイクポイントはPCサイズ 960px以上タブレットサイズ 768px～95...
css3 高解像度ディスプレイへの対応
レスポンシブデザインcss3RetinaディスプレイRetinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって...
レスポンシブデザイン グリッドレイアウト
レスポンシブデザイングリッドレイアウトとはグリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webで...
css3 レスポンシブデザイン基礎
レスポンシブデザインcss3レスポンシブデザインとは？レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制...
css3 画像をレスポンシブに対応させる（可変にする）
css3画像をレスポンシブに対応させる為にはたった２種類のやり方しかありません。img画像であればフルードイメージ化させる。background画像であれば、background-sizeの指定をする。この２種類の使い方と特徴を覚えれば、画...
webデザイン ボタン画像の変遷
webデザイングラデーションツールを使う前に、なぜわざわざグラデーションツールを使って色を塗るのかを理解しましょう。グラデーション＝光と影ディスプレイという平面の世界に、立体感や質感を出すために光の当たっている部分とそうでない部分（影の部分...
CSS基礎 ２カラムレイアウトの演習
CSS基礎演習１使用するテキスト卵料理カフェ CockeyollyHomeニュースメニュー今月のおすすめオリジナル雑貨マップメール今月のおすすめきのこのオムライスふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレ...
CSS基礎 第1回実技試験の内容
webサイト制作CSS基礎作例今回の実技試験の概要フォルダー名を「自分の名前_test01」として、試験終了後、講師に提出する事画像は各自で用意し指定されたサイズにトリミングする事headerの幅960px高さは350px。背景画像に「CA...