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

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

HTML/CSS

[はてなブログ]はてなブログを書くならMarkdownモードで書くべき3つの理由

こんにちわ!Noob Web Designer(@NoobWebDesigner)です! はてなブログでは、はてな記法モード・Markdownモード・見たままモードの三種類のブログの書き方があります。 今までずっとはてな記法で書いてきたのですが、思い切ってMarkdownモードに切り替えま…

[HTML]XHTMLからHTML5に移行するときにやっておくべき作業内容

Icon made by Freepik from www.flaticon.com こんにちわ!Noob Web Designer(@NoobWebDesigner)です!今回はXHTMLからHTML5に移行するときにやっておくべき作業内容を備忘録。 ホームページのSSL化が著しくなった近年、サイトによってはHTML5化をしなけれ…

[HTML/CSS]display: inline-block で横並びにした際にできる隙間をなくす方法

こんにちわ!Noob Web Designer(@NoobWebDesigner)です!今回は、display: inline-block で要素を横並びにした際にできてしまう隙間を、なくす方法を紹介します。Flexbox とか Grid とか便利なCSSプロパティが出ていますが、IE9の対応をする以上 display: …

【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行のテキストフォームに…

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

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

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

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

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

可変レイアウトの演習をまたやりました。 今回はゼロから始めるレスポンシブ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デザインの考え方一つのソースで、複数のデバイス表示を可能にすること。 今までの携帯サイトみたいに、別々にソースを用意す…

【CSS】Webフォント

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

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

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

【HTML】メモ4 SEOの話とか

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

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

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

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

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

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

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

【CSS】 position

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

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

【CSS】 CSS Spritesでナビゲーションを作る - PCゲーマーのWebデザイン備忘録 上記でやったのと同じように、横並びのナビゲーションを作っていきます。 ブラウザプレビュー: 使用したソース用意した画像: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"><a href="#">イン</a></li></ul></div>…

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

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

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

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

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

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

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

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

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