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

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

【jQuery】 jQueryを使っていく

jQueryはJavaScriptのライブラリーの一つです。要素に対してアニメーションで表示したり、ポップアップを表示することができます。プログラム的には、フォームのエラーチェックもできます。jQueryの書き方jQueryは以下のように読み込ませます。jQueryのバー…

【JavaScript】 演習1

Javascriptの演習をしました。 入力された数字から、条件で結果を表示する。問題:8以上が合格 var num = prompt('半角数字で入力してください',''); num = parseInt(num); if(num >= 8){ document.write(num + 'は合です'); } else{ document.write(num + …

【Photoshop】 ブラシツールで点線を描く

Photoshopのブラシツールで点線を描きます。やり方 ブラシツールを選択肢、「ブラシパネルの切り替え」をクリック ブラシタブを選び、間隔を100%以上にします。

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

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

【Photoshop】顔を修正する

人の顔を修正していきます。 顔を明るくする 肌の色を明るくして、血色を良くします。 「選択範囲」から「色域指定」を選びます。 選択を「スキントーン」にします。 「レベル補正」で明るさを調整する。 顔の白さを引き立てる(アンシャープマスク) 白い部…

【Photoshop】余計なものを消す

Photoshopを使い、任意の場所をなるべく自然に消すことができます。加工前 加工後 やり方 消したいところを選択ツールで選択。 「編集」から「塗りつぶし」 「コンテンツに応じる」を選択した状態でOK

【Photoshop】 レイヤーマスクの応用「逆光を入れる」

レイヤーマスクを使うことで、逆行をいれることができます。 加工後: 加工前: やり方 元の画像レイヤーを2レイヤー複製。 1レイヤー目をレイヤーマスクにする。 2レイヤー目に「フィルター」から「描画」「逆光」で、任意の場所に逆光を入れる。 1レイヤ…

【JavaScript】 クロスフェード(jQueryのプラグイン)

jQueryのプラグインクロスフェードを使うことで、フェードして置換する事ができます。 jQueryの適応方法jQueryをヘッドで読み込ませます。 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> クロスフェードプラグインを使う。CSS Crossfader 上記のリンクからcrossfaderをダウンロードする。htmlにプラグイ…

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

【Photoshop】GIFアニメーションを作る

Photoshopを使って、GIFアニメを作ります。 やり方 IllustratorかPhotoshopで絵を描きます。この時、レイヤー1枚につき1フレームです。 PSDファイルに書き出して、Photoshopで読み込みます。 「ウィンドウ」メニューから「アニメーション」を選択。 「アニ…

【CSS】Webフォント

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

【JavaScript】ランダム関数

ランダム関数は、予測できない不規則な数値を表示させる関数です。 ランダム関数で乱数を表示する。ランダム関数で乱数を表示します。乱数を表示させるためには「random()」を使います。実行例 var num =Math.random(); document.write(num); 結果結果は0~0.…

【JavaScript】DOM

DOMはHTML文章をオブジェクトとして情報の取得する仕組みです。 DOMの操作を行うことで、HTMLの中身を変更することもできます。前提として、以下のHTMLを使います。 <html lang="ja"> <head> <meta charset="utf-8"> <title>プログラム実行テスト</title> </head> <body> <h1>プログラム実行テスト</h1> <p>第1段落</p> <p>第2段落</p> <p>第3段落</p> <script></script> </body> </html> 要素の内容…

【Illustrator】丸いロゴを描く(スタバ風)

ポイント 文字のラインを、パスにあわせるために「パス上文字ツール」を使う。 パスの内側に文字を表示させたい場合は、選択ツールを持ったときに表示される長い棒を内側へ引っ張る。

【JavaScript】組み込みオブジェクト

組み込みオブジェクトはJavaScriptにもともと含まれているオブジェクトです。それを指定することで、様々な値を取得することができます。時間を取得する時間取得する組み込みオブジェクトを使って、現在時刻を表示します。 実行例(ソース) var d = new Dat…

【JavaScript】関数を呼び出して、イベントハンドラを操作する

関数を呼び出して、イベントハンドラを操作することができます。実行例(ソース)ヘッド <script> function func(){ window.alert('画像をクリックしました'); } </script> ボディ <body> <p> <img alt="" src="img/#.jpg" onclick="func()"> </p></body>

【Illustrator】ブレンドツールで線を使ったグラデーションデザインをつくる

ブレンドツールを使い、虹色のグラデーションデザインを作ります。作り方 120mmの正方形を長方形ツールで作り、黒で塗ります 赤色で適当にラインを左側に書きます。 そのラインを右側にコピーして、紫色に変えます。 ブレンドツールをダブルクリックして「ス…

【Illustrator】 複合パスとクリッピングマスクでドットモザイク風の写真を作る

複合パスとクリッピングマスクで、ドットモザイク風の写真を作ります。 楕円ツールを使い、以下のような感じにドットを並べる。 並べたドットだけを選択し、「オブジェクト」から「複合パス」 全部選択して「オブジェクト」から「クリッピングマスク」「作成…

【Illustrator】 ライブトレースを使って、イラスト風の処理をする

ライブトレース(画像トレース)を利用して、画像をイラスト風にします。やり方 「ファイル」から「配置」で画像を置く 「ウィンドウ」から「画像トレース」を選択 各パラメーターをいじる。このときプレビューを切るとスムーズに編集ができる

【JavaScript】サムネイルを押すと、その画像に切り替える画像一覧

サムネイルにマウスポンタをのせるとと、下の大きな画像を切り替える画像一覧をつくります。 name属性を使い下の画像だけを変える画像の置換の方法は前回の記事の方法を使います。大きな画像の中にname属性を入れることで、imgタグに指定してある画像を切り…

【JavaScript】 イベントハイドラを使い、CSSを使わないで、画像置換を行う

イベントハンドラを使うことで、CSSの擬似要素を使わずに画像置換を行います。 イベントハンドラの書き方 <img src="#.png" alt="" on...="'JavaScript'"> 「on...」はhtmlの要素で、onmouseoverやonclickなどがあり、その要素にJavaScriptを設定して書き込むことができます。 インハンドラで画像置換を行…

【JavaScript】 サイコロの奇数だけ表示する

サイコロの奇数だけを表示するには、for文、if文、剰余を利用します。ソース for ( var i = 1 ; i <=6 ; i++){ if(i%2 === 1){ document.write('<img src="img/d' + i + '.jpg">'); } } 「i」の値が奇数だけをif文の中で処理できるように書いています。

【Javascript】 九九掛算表をつくる

JavaScriptを用いて九九掛算表をつくります 実行例(ソース) <html lang="ja"> <head> <meta charset="UTF-8"> <title>九九</title> <style> table{ border-collapse:collapse; } th,td{ border: solid 1px #666; width: 50px; } td{ text-align: center; } th{ background: #CCC; } </style> </head> <body> <table> <tr> <th></th></tr></table></body></html>

【Javascript】 関数

関数は一連の処理をひとまとめにして、名前をつけたものです。 書き方関数のつけ方 function 関数名(引数を入れる変数){処理;} 関数の呼び出し方 関数名(引数を入れる変数); 引数を書く場合は括弧の中に。また書かなくても使えます。 関数の呼び出しは基本的…