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

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

HTML/CSS

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

display: inline-block で要素を横並びにした際にできてしまう隙間を、なくす方法を紹介します。Flexbox とか Grid とか便利なCSSプロパティが出ていますが、IE9の対応をする以上 display: inline-block も現役です。私個人としては横並びにする場合であれば…

はてなブログのはてな記法、Markdown記法で画像にリンクをつける方法(2017/11/10更新)

はてなブログではてな記法、Markdown記法で画像にリンクをつける方法を探しても見つからなかったので備忘録。 (2017/11/10…はてな記法、Markdown記法それぞれのちゃんとした記述方法があったので追記)

DELETE文

DELETE文でデータを消去します。書き方: DELETE FROM 'テーブル名' WHERE 例: DELETE FROM aaa WHERE code =0 上記はテーブルaaa のcode 0 の行データをすべて削除します。

UPDATE文

UPDATE文を使い、データを修正・上書きをすることができます。書き方: UPDATE テーブル名 SET カラム名1 = 値 WHERE WHERE は必須です。設定しなければ、一括でデータ修正が起きます。例: UPDATE aaa SET bbb = 'しーしーしー' WHERE code=0 上記は、aaaテ…

INSERT文

INSERT文を使い、挿入を行います。書き方: INSERT INTO テーブル名(カラム名) VALUES(値); 例: INSERT INTO aaa(bbb) VALUES('ccc'); 上記では、aaaテーブルの bbbカラムに ccc を挿入すると言う意味です。すると code 0 に ccc というデータが挿入されて…

SELECT文

SQL文を使い、データベースを操作してみます。SQL文には以下のようなものがあります。 SELECT文 INSERT文 DELETE文 UPDATE文 データベースを選択し呼び出す SELECT文を使い、データベースを呼び出します。書き方: SELECT カラム名 FROM `テーブル名` WHERE …

データベース

今年は初めはデータベースからやっていきます。 ローカルサーバーを作るために必須ツールの「xampp」ってどういう意味か xamppはX(Cross Platform) Apache MySQL PHP Perl(もしくは Python)の頭文字を取ったものです。 これはもともと LAMP というものでし…

【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

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

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

【CSS】 position

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

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

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