ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

website002 いい感じのウェブサイト〜Color〜

いい感じのウェブサイト〜Color〜 色使いの観点で印象に残ったものを記載していきます。■Color www.postable.com ・カラーバランス、アクセントカラー(黄色)の使い方が綺麗。 ・文字もコントラストがしっかりしていて視認性が高い。finesseatelier.com ・HOM…

web018 スキルレベル確認(html,css)

スキルレベルの確認(html,css)現在のレベル:2.8位 ノーマル (基礎的な知識があり,ある程度の画面を作れるようになった段階) 次のレベル:3 中級者 (Webアプリの開発プロジェクトで1人月としてカウントできる水準)■参考 HTMLとスタイルシート(CSS)の業…

web017 transitionプロパティ(時間的変化の過程)

css

transitionプロパティ(時間的変化の過程) 主に:hover時の動きに時間的変化をつける。■ポイント ・ショートハンドである。 ・各プロパティのざっくり説明 transition-property:どこを(背景色を) transition-duration:どれくらい(1.5秒位で) transition-…

web016 上位表示(SEO)の考慮ポイント

SEO

上位表示(SEO)の考慮ポイント 随時更新■大きな点 ・アウトラインが正しい文書構造になっていること ・文法エラーが存在しないこと ・レスポンシブ対応がされていること ※いずれもツールチェックを必ず行う。■細かい点 ・直下(囲むdivやsectionはよい)に「h1,…

アイカツの曲で打線組んだ

アイカツの曲で打線組んだ アイカツスターズは含んでいません。 いい曲順ではなくチームとしての打線組みです。■アイカツ打線 1 中 ダイヤモンドハッピー www.youtube.com2 二 Stranger alien www.youtube.com3 遊 Friend www.youtube.com4 左 Move on Now w…

JavaScript008 画像マウスオーバー時にメイン画像を切り替える

画像マウスオーバー時にメイン画像を切り替える <script> function myChgPic(myPicURL){ document.getElementById('myBigImage').src = myPicURL; } function myRtnPic(rtnPicURL){ document.getElementById('myBigImage').src = rtnPicURL; } </script></head> <body> <div class="container"> <h1>サムネールにマウ</h1></div></body>…

JavaScript007 Imageオブジェクト

Imageオブジェクト 画像に関する情報を提供したり,画像を操作したりするオブジェクト。■使用例 JavaScript006 画像クリック時に順番にループするよう切り替える - ねこきっくぱんちのメモ帳■参考 Image() - Web APIs | MDN JavaScriptリファレンス - Image…

JavaScript006 画像クリック時に順番にループするよう切り替える

画像クリック時に順番にループするよう切り替える html <script> //配列準備 var Images = new Array(); Images[0] = new Image(); Images[0].src = "img/p1_300.jpg"; Images[1] = new Image(); Images[1].src = "img/p2_300.jpg"; Images[2] = new Image(); Image…

Photoshop005 カスタムシェイプでロゴ作成

カスタムシェイプでロゴ作成 ■手番 1.カスタムシェイプツールを選択肢、それっぽい絵柄を選択する。 2.レイヤーからグラデーションオーバーレイなどで色をつける。 3.パス選択ツールで形を変形させる。 ※PNG書き出しで背景がつかないロゴのみを出力可できあ…

web015 コーディング規約 (個人)

コーディング規約 (個人) 悩まず迷わず効率的な開発ができるよう、 考えて決めた事に関するコーディング規約を記載していきます。 ※随時更新0.心得的なところ ・htmlは「文書構造」を作る。 ・htmlの文法及びアウトラインチェックが完了後、css記述にうつる…

JavaScript005 スキルレベルの確認

スキルレベルの確認 現在のレベル:1.6位(初学者) 次のレベル:2(ノーマル)■参考サイト JavaScriptの業務スキルレベル 判別表 (5段階) - 主に言語とシステム開発に関して JavaScript講座 | 無料オンライン学習・講座で資格取得・スキルアップするなら…

JavaScript004 インクリメンタル検索の実装(incsearch.js)

インクリメンタル検索の実装 隙を見て以下サイト参考にサンプル実装したい。(備忘) incsearch.js を利用して、インクリメンタルサーチを試してみる - Qiita

Lifehack001 健康でない時に見直すポイント

健康でない時に見直すポイント 1.食べる 2.寝る 3.筋トレ 4.風呂 5.笑う ■具体的な対策 1.食事 ・食事を3-4時間おきにする。(血糖値の安定化) ・食後1時間後が一番血糖値が高い ・間食にビーフジャーキーがおすすめ(おいしい) ・食事の最初は、納豆、野…

Design002 キービジュアルで考える事

キービジュアルで考える事 まずは本やプロのデザイナーから教わったことを記載していきます。■重要なこと 1.色のコントラスト(白黒) ・まず第一に「文字が読める」状態であること。 ※薄緑に補色を使うの際には注意が必要。 ・背景色を強くしすぎない(商品…

Design001 いいデザインをするために考える事

いいデザインをするために考える事 ■いいデザインの定義 自分の言葉で記述していき、随時アップデートします。 ・目的がはっきりしている。(コンセプト、ターゲット、何がやりたいのか) ・目的に沿った(根拠のある)デザイン(フレーム、色使いなど)になって…

Illustrator002 ブレンドツールの使い方

■結果 ■手番 1.多角形ツールでオブジェクトを2つつくる。 2.最初と最後の位置にオブジェクトを配置する。 この時グラデーションの色も最初と最後の色に変更しておく。 3.ブレンドツールで最初を選択(1クリック)し、次に最後を選択(1クリック)す…

JavaScript003 Dateオブジェクト

■結果 ■コード <html lang="ja"> <head> <meta charset="utf-8"> <title>Date();</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> </head> <body> <h1>日付を取得するプログラム</h1> <p><button onClick="getDate()">生成する</button></p> <h2 id="ans">"Answer will be r…</h2></body></html>

JavaScript002 掛算表を作成する

掛算表を作成する ■コード <style> html,body,h1,h2,h3,p,ul,li,img { margin: 0; padding: 10px; line-height: 1.0; font-size: 16px; font-family: 'Hiragino Kaku Gothic ProN','Meiryo',sans-serif; } li { list-style: none; } table{ border-collapse: collap…

web013 RWD(Responsive Web Design)の考慮ポイント

RWDの考慮ポイント グリッド、リキッド、複合など、状況により判断する。■考慮ポイント ・viewportの設定(html:head) ・Fruid Imageの設定(css:reset) ・Media Queriesの設定(css) ※1 ーfloatの解除 ーfont-sizeの調整 ーbackground-imageのサイズ調整 ーナ…

JavaScript001 Mathオブジェクト

Mathオブジェクトの使用例 Mathオブジェクトは、数学的な操作を行うメソッドや、 円周率などの定数などのプロパティをもっている。Math.random(); [0,1) 、……つまり、0 以上 1 未満の範囲で疑似乱数を返します。 var r = Math.random(); console.log(r); // …

web014 HTML・CSSのテンプレート(スニペット)

HTML・CSSのテンプレート(スニペット) 新規サイトを作成する場合のテンプレートに使用しているものです。■コード <html lang="ja"> <head> <meta charset="utf-8"> <title>TEMPLATE</title> <meta name="Description" content="title,h1,pなどのキーワードを含めての紹介文"> <meta name="viewport" content="width=device-width"> </meta></meta></meta></head></html>

website001 いい感じのウェブサイト〜Responsive〜

いい感じのウェブサイト〜Responsive〜 レスポンシブの観点で印象に残ったものを記載していきます。■Responsive relation.main.jp・fluidImageのポジショニングが絶妙だと感じました。 1050pxのブレークポイントで、メインキャラの顔のアップから入り、 だん…

web012 Web表示速度の理想値

Web表示速度の理想値 Performanceタグでは改善の手助けとなる観点や技術を記載していきます。■理想値 目標:2秒以内とする。 理由:根拠となるデータ(要約) ・3秒以上かかるページからは40%が離脱する ・1秒の遅れが16%の顧客満足度を低下させる ・52%ペ…

Illustrator001 文字を加工・変形する方法

1.テキストツールで文字を入力 2.右クリック(コンテキストメニュー)から「アウトラインを作成」する。※文字を図形化 3.変形した文字を選択し、右クリック(コンテキストメニュー)から「グループ解除」 以上 ※以降はアウトラインモード(cmd+Y)、ダイレクト…

webめも011 ナビゲーションの中央寄せ(2パターン)

css

サンプル1.ボタン間に余白をつくる場合 liをインライン要素化してtext-align:center;で中央寄せ。※ブロック要素の中央寄せは「margin: Xpx auto;」 ※この方法で余白をなくすテク ・htmlのliの改行を無くし1行で記述すると余白を詰めることは可。可読性下が…

web005 各種参考サイト

■チェッカー HTML 5 Outliner The W3C Markup Validation Service The W3C CSS Validation Service ■色 カラーリング Sphere: Color Theory Visualizerグラデーション Ultimate CSS Gradient Generator - ColorZilla.com shade 日本の伝統食 NIPPON COLORS -…

webめも009 text-shadow,box-shadowによる装飾

css

■結果(text-shadow) ■コード html <section class="textShadow"> <h3>text-shadow: x軸 y軸 ぼかし幅 色 ;</h3> <ul class="sample font"> <li>Drop Shadow</li> <li>Grow</li> <li>Bevel</li> <li>Embos</li> <li>Stroke</li> <li>Neon</li> </ul> </section> css h3 { padding: 20px; } .sample>li { margin: 5px; padding: 5px; bord…

web002 CSS Sprite

CSSスプライトの1事例■手番 ※Illustratorで作成したスプライト用の画像サイズ980x110 ※1ボタンは140x50 ・ナビゲーションとしてリスト作成(html) ・background-imageで画像を指定(css) ・bakcground-positionで画像の位置指定(css)■コード html <div class="header"> <h1><img src="img/h1-logo.png" alt="hatena"></h1> <ul class="nav"> <li id="top"><a href="#">トップペ</a></li></ul></div>…

web001 動画の埋め込み

■手番 ***サービスの貼り付け ・Youtube,GoogleMapから貼りたい動画までいく。 ・共有>埋め込みコード>コードをコピペ。 <iframe width="560" height="315"src="対象のURL" frameborder="0" allowfullscreen></iframe> ※height,widthは変更可 ・htmlに貼り付ける。 ***動画ファイルの貼り付け <video autoplay controls width="320" height="240"> <source src="pastaSauce.mp4"></source></video>

Photoshop004 クリッピングマスク

■手番 ・背景レイヤーを上に、テキストレイヤーを下に移動 ・背景レイヤーを選択し、[cmd + alt + G] ※クリッピングマスクだけだと視認性が低いので、 エフェクトなどで適宜文字枠などを入れる。■レイヤー ■結果

Photoshop003 ぼかしの入れ方(ぼかしガウス)

■手番 ・対象レイヤーを複製 ・レイヤーマスクを追加 ・レイヤーサムネイルを選択し、「フィルター>ぼかし>ぼかし(ガウス)」 ・レイヤーマスクサムネイルを選択し、対象をブラシツールで"黒"塗り ※選択範囲を綺麗に指定するやり方はここでは考慮しない。…

Photoshop002 ショートカット(Mac)

1.トラッキング(カーニング) alt + ← [→]2.行間調整 alt + ↓ [↑]3.ベースラインシフト alt + shift + ↓ [↑]4.フォントサイズ cmd + shift + ]※Windowsの場合 cmd → Ctrl option → Alt

Photoshop001 外枠の作り方(境界線)

■手番 ・新規レイヤー作成 ・[cmd+delete]で背景色を塗りつぶし ※[option+delete]は描画色 ・レイヤーの描画モードを「除算」 ・レイヤースタイル(fx:エフェクト)で「境界線」■レイヤー