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

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

HTML

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

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

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

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

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

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

【HTML】フォームを作る

HTMLでフォームを作ります。PHPなども絡んでくるところですが、とりあえずHTMLのみで組みます。 基本 formタグの中に、methodとactionを必ず付け加えます。 methodはやりたい動作に応じて帰る必要があります。 <form method="URI" action="送信方法"> </form> 1行テキストフォーム 1行のテキストフォーム…

【HTML】メモ6 UIから見るデザイン

ナビゲーションバーはホームに戻るボタン意外、ほぼ意味がない。押されない。押されるようなボタンを別に用意しておく必要がある。

【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…

【HTML】メモ5 SEOの話とか

自サイトへのフルパスリンクは検索エンジンが嫌う。 内部リンクは1ページに100個まで(そんなにリンクがあっても便宜性がない) バランスのよいサイトが好まれる。画像ばかりなページはあまりよくない。 Descriptionは毎ページ同じだって言うことはありえな…

【HTML5】HTML5とは

HTML5 は、WHATWG およびW3CがHTML4に代わる次世代のHTMLとして策定を進めているHTML仕様。 新しい仕様ではありますが、まだ宣言されていないので、仕様はまちまちです。HTML5は過去のHTMLも許容しているので、HTML4やXHTM1.0などの記述方法で書いても表示し…

【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>

【RWD】レスポンシブWEBデザインの始め方

レスポンシブWEBデザインに対応するために、viewportを利用して、画面幅に合わせて読み込むCSSを変更する記述をします。 <meta name="viewport" content="width=device=width"> 上記の書き方で画面幅一杯に表示しますという宣言になります。 記述例 <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device=width"> <title>メディアクエリ</title> </meta></meta></head></html></meta>

【RWD】レスポンシブWEBデザインの勉強

現在、スマートフォン・タブレット対応のホームページが主流なので、レスポンシブWEBデザインを勉強していきます。 レスポンシブWEBデザインの考え方 一つのソースで、複数のデバイス表示を可能にすること。 今までの携帯サイトみたいに、別々にソースを用意…

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

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

【HTML】メモ4 SEOの話とか

検索エンジンは、ページの構文エラーがなければ、metaタグの内容よりも、pタグ内に書いてある事柄が検索結果に出てくる。 より検索されたいワードを前に出す。タイトルにする。会社名とかは後ででも大丈夫 すべての見出しにテキストをつけようにする(untitl…

【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を使っています。これで…

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

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

【HTML】メモ2 検索エンジンの話とか

UTF-8は1文字3バイトあるが、世界中のあらゆる言語を表示できる。 人間の瞬間記憶の限界は平均して7個。なので、グローバルナビゲーションなどは7項目を基準に、二つ減らしたり増やしたりすると見やすい。日本人は5とか7が好き。 検索エンジンはh4まで…

【HTML】ヘッダーにあるh1の重要性。

ヘッダーにあるh1はそのページの中で一番重要なものなので、特に文法に従って書くことが望ましい。 一番望ましい形は以下の通り、h1とpのセットが望ましいです。 <h1>一番重要なキーワード | 会社名</h1> <p>h1の概要、会社名などは後のほう</p> 人々が検索するときに、会社…

【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>…

【HTML】テーブルを作る

HTMLでテーブル(表)を作ります。 ソース <table border="1" width="300"> <caption>キャプション</caption> <tr><th>月</th><th>火</th><th>水</th></tr> <tr><td>○</td><td>×</td><td>○</td></tr> <tr><td>○</td><td>×</td><td>○</td></tr> </table> タグの説明 table テーブルの範囲 caption テーブルの題名 tr 行 th テーブルヘッダー td テーブルセル

【HTML】練習中のHTMLの基本

現在勉強中のHTMLの基本 <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <h1>大見出し</h1> <p>本文</p> <ul> <li>順序なしリスト</li> <li>順序なしリスト</li> <li>順序なしリスト</li> </ul> <p><img src="/img/test.jpg" alt="ここは画像に関係のあることを書く" /></p> <table> <tr><th>テーブルヘッド</th><th>テーブルヘッド</th>…</tr></table></body></html>

【HTML】 HTMLの基本文章構造

HTMLでの基本的な文章の構造を書きます。 HTMLではアウトライン構造が重要になります。 書き方 例: <h1>一番重要な見出し<h1> <p>h1に関する概要</p> <h2>次に重要な見出し</h2> <p>h2に関する概要</p> ポイント 必ず見出し(h1)と段落(p)をセットにする。そのセットだけで題名と文章と</h1></h1>…

【HTML】メモ1

meta charsetはタイトルの前に書く。タイトルに文字が含まれているから、先に文字コードをブラウザに認識してもらう 1行(row)40字程度、1段落(paragraph)4行程度。それ以上だと字が詰まって見えて、読み飛ばしてしまう。 Webは最初に結論を持ってく…