PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザインの勉強と備忘録。Webサイト制作系の職業訓練を受けてます。

CSS

【RWD】 固定+可変レイアウト演習

以下のテキストを使い、レスポンシブウェブデザインの固定+可変レイアウトの演習を行いました。スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)作者: エ・ビスコム・テック・ラボ出版社/メーカー: マイナビ発売日: 2012/08/31メディア: 単行…

【RWD】固定レイアウト演習

以下のテキストを使い、レスポンシブウェブデザインの固定レイアウトの演習を行いました。スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)作者: エ・ビスコム・テック・ラボ出版社/メーカー: マイナビ発売日: 2012/08/31メディア: 単行本(ソ…

【RWD】 グリッドデザインの演習

グリッドデザインの演習です。 レスポンシブWEBデザインに対応させるために、メディアクエリーを使ってます。2カラム目に表示させるときは一番最後のカラムが広がるようにしています。3番目のカラムを3カラム目に表示させるときは、2カラム目の表示のプロパ…

【RWD】CSS3で自動的にカラム分けする

CSS

CSS3を使うことで自動的にカラムわけ表示をする事が可能です。 使い方 @media screenとcolumn-countを使用します。ブラウザ間で対応がまちまちなので必ずベンダープレフィックスを使うこと。 @media screen and (min-width:文字数em)文字指定。1行に○文字以…

【RWD】可変レイアウトの演習2

可変レイアウトの演習をまたやりました。 今回はASCII.jp:ゼロから始めるレスポンシブWebデザイン入門を参考に行いました。今回はモバイルファーストの考えでレイアウトが構成されています。 ブラウザレビュー 1024px以上 それ以下 ソース html <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>豆はカ</title></meta></meta></head></html>…

【RWD】 ディスプレイの大きさごとに分けたCSSを一つにまとめる

CSSの中media screenを入れることで、ディスプレイの大きさごとに読み込ませるCSSを変えることができます。 1つのCSSの中にまとめるので、ページ読み込み高速化に繋がります。 例: /* 768px */ @media screen and (min-width: 768px){ #content{ text-align…

【RWD】可変レイアウトの演習

可変レイアウトの演習を行いました。 ソース HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>可変レスポンシブWEBデザイン</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style-reset.css"> <link rel="stylesheet" href="css/style-l.css"> </link></link></meta></meta></head></html>

【CSS】Webフォント

CSS

Webフォントはサーバー上にあるフォントファイルを利用してページの書体設定をする事ができます。 利点 ブラウザ間での表示誤差がなくなる。 様々なフォントを使うことができる。 欠点 フォントをダウンロードするため、ページ読み込みが遅くなる可能性があ…

【HTML】企業系のWebサイト制作演習

企業系のWebサイト制作演習をしました。今回はその備忘録とソースです。 演習方法 上記のWEBページを参考にトレースしていく。 各寸法は「Web Developer」ツールで測定。 用意された画像以外は、Photoshop・Illustratorで素材を作成。 演習結果 制作時間:7時…

【HTML/CSS】 DIVをあまり使わない文章構造に書き直す。

DIVタグを使わなくても、他のブロック要素でスタイルを指定できる場合、DIVを使わないように構文を書き直すこととができます。 DIVを使うときは、フロートさせたり、レイアウト上必要な場合のみ囲むと良い。今回書き直しに使ったソース: http://game-web-de…

【HTML/CSS】ホームページの解析

ホームページの解析を通して、ホームページの作りを学びます。 アウトラインを見る ホームページのアウトラインを確認するにはChromeのアドオンであるHTM5 Outlinerを使う。 HTML5 Outliner HTML5 Outliner - Chrome ウェブストア URLバー右端のHTML5 Outlin…

【HTML】2カラムレイアウトのページを作る

課題であがっていた2カラムレイアウトを参考に、作って見ました。 ブラウザレビュー(演習結果) ポイント 必要のないDIVを使わない。 画像を右側へフロートさせている。 フロートさせた画像の高さを保持したいので、overflow:hiddenを使っています。これで…

【CSS】 position

CSS

positionを使って、HTML内でレイヤーのような構造を作る事ができます。 posisionの書き方 positionはabsolute(絶対的な)を指定した上で、ブラウザの左上からの距離を指定する。 CSS #wrapper { width: 760px; /* レイアウト全体の幅を指定 */ overflow: hi…

【CSS】CSS Spritesで横並びナビゲーションを作る。

CSS

http://game-web-design.hatenadiary.com/entry/2014/09/09/151244 上記でやったのと同じように、横並びのナビゲーションを作っていきます。 ブラウザプレビュー: 使用したソース 用意した画像: HTML <div id="nav"> <ul> <li id="home"><a href="#">ホーム</a></li> <li id="food"><a href="#">カフェフード</a></li> <li id="drink"><a href="#">カフェドリンク</a></li> <li id="info"></li></ul></div>

【CSS】 CSS Spritesでナビゲーションを作る

CSS

CSS Spritesを利用して、1枚の画像からたくさんの画像(例:ナビゲーション)などを表示する。ブラウザがWebサーバーに要求する画像の量が減り、Webページ表示高速化に繋がる利点がある。 ブラウザプレビュー: ポイント: CSS Sprites等でテキストを隠す場…

【CSS】横並びのナビゲーションを作る

CSS

CSSを使って横並びのナビゲーションを作ります。 ブラウザプレビュー ポイント #nav liをフロートさせるために、その親要素の#nav ulにoverflow: hidden;を指定する。すると横並びになる。 ソース HTML <div id="nav"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">カフェフード</a></li> <li><a href="#">カフェドリンク</a></li> <li><a href="#">インフォメーシ</a></li></ul></div>…

【CSS】擬似クラスとナビゲーション

CSS

CSSで、擬似クラスをうまく使い、ナビゲーションを作っていきます。 擬似クラス 擬似クラスは、閲覧者が起こしたアクションによって、ページに変化が起こせるようにしたものです。aタグに良く使われます。a:link、a:visited、a:hover、a:activeなどがありま…

【CSS】font-familyを利用したフォントの指定の仕方

CSS

CSSでのフォントの指定には、そのフォントを表示する環境が少ない順から指定していきます フォントの指定 Mac→Windows→両方共通のように書いていきます。フォント名にスペースが含まれるものはダブルクウォーツで囲います。 ゴシック体 通常であれば、これら…

【HTML/CSS】1カラムレイアウトの演習

HTMLにもCSSにも慣れてきたので、1カラムレイアウトの演習をしました。 演習結果(ブラウザプレビュー) ポイント ヘッダーの画像の上にテキスト(h1)を表示するために、imgタグではなくCSSでdiv#headerにbackgroundで背景画像を設定。 画像上のテキストの…

【Color】 RGBカラー

RGBカラーは色相・明度・彩度で構成されている。 RGBカラーの基本 色相・・・色の違い 明度・・・明るさ 彩度・・・色の鮮やかさ CSSでの書き方。 CSSでは"#"の後にR(Red)G(Grean)B(Blue)の数値を入れてあげる。数値には16進数(0~F)を使う。0が一番濃く、Fが一番薄…

【CSS】 CSSでのスタイル指定方法

CSS

CSSでのスタイルの指定方法です。 指定の方法 セレクタ{ プロパティ:値;}です。セレクタはh1などのタグやID(#)、class(.)を指定します。 "{}"(波括弧、カーリーブラケット)は宣言です。この中にプロパティと値を書きます。各プロパティの最後は必ず";"…

【CSS】CSSの書き方

CSS

CSSを用いてのHTMLをスタイリングしていきます。 CSSを書く場所 CSSは一般的に外部ファイルとしてHTMLに読み込ませます。 その場合headの中に、以下のように記述します。 <link rel="stylesheet" href="style.css"> また、直接CSSをheadの中に書き込むこともできます。 <head> <meta charset="UTF-8"> <title>CSSの練習</title> <style> h1 { color: red;</style></meta></head></link>…

【CSS】 CSSの演習

CSS

CSSにも慣れてきたので、CSSを使った簡単なレイアウトを書いていきます。 01 ソース <html lang="ja"> <head> <meta charset="utf-8"> <title>01</title> <style> body{ font-family: "HIragino Kaku Gothic ProN", Meiryo, sans-serif; } h1{ color: #108889; } h2{ background: #355584; color: #fff; padding: 5px 0 5px 0; </meta></head></html>…

【CSS】背景画像の設定

CSS

CSSで背景画像を設定するには「background: url(#);」を使います。 背景画像を全面に敷き詰める。 背景画像を全面に敷き詰めるには、「background: url(#);」をそのまま使います。 ソース body{ background:url(img/01.gif); } 背景画像を横や縦に並べる 背…

【CSS】ボーダー(境界線)をつける

CSS

HTMLの要素に「border」を指定していすることで、ボーダー(境界線)をつけることができます。 ボーダーの種類 ボーダーには、solid(実線)、dashed(破線)、double(二重線)、dotted(点線)があります。他にも種類がありますが、あまり使われません。 …

【CSS】 CSSを演習(2)

CSS

今まで学んだことを踏まえて、簡単なCSSレイアウトを演習します。 CSSのみでスタイリング borderとbackgroundでレイアウトしました。 ブラウザレビュー ソース <html lang="ja"> <head> <meta charset="utf-8"> <title>ページタイトル</title> <style> html, body, div, h1, h2, p{ padding:0; margin:0; line-height:1.0; } bo</meta></head></html>…

【CSS】 Floatを使ったレイアウト

CSS

Floatを使ったレイアウトを使うことで、横並びのページを作ることができます。 Floatを使い場合は、floatさせた要素が他のスタイルに潜り込まないように、overflow:hidden;(はみ出した要素を隠す)を設定するのが一般的です。 2カラムレイアウト 2カラム…

【HTML/CSS】 レイアウトの宿題

CSSを使ったレイアウトの宿題が出ていたので、さまざまなレイアウトをトレースしました。 01 サイト概要風 ソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>Spread Experiment Web Site</title> <style> html, body, div, h1, h2, p{ margin: 0; padding: 0; line-height: 1.0; } body{ font-family: "Hiragino </meta></head></html>…