読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【模写】1day1banner (1日1つバナー制作33日目)

1日1つバナーを作っていきます。 模写リサイズ サイズ300*250/10min 728*90/5min 160*600/5min Toolphotoshop

【模写】1day1banner (1日1つバナー制作32日目)

1日1つバナーを作っていきます。 模写リサイズ サイズ300*250/10min 728*90/5min 160*600/5min Toolphotoshop

【webデザイン】サイト作成時のヒアリング

サイト制作の為のヒアリング クライアントワークに取り掛かるに当たって、いろいろなサイトを参考にヒアリング時に必須な項目を割り出しました。 参考サイト1 Webデザイン制作のために、絶対に質問すべき64のコト | WebサイトやアプリのUI/UXデザイン会社 コ…

【jQuery】toggleをmigrateで有効にした画像置換

DEMO <html> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </head> <body> <p id="imgChange"><img src="../img/buta.jpg"></p> <script> $(function(){ $('#imgChan…</body></html>

【jQuery】バージョンの差異を解決 jQuery Migrate

引用元 jQuery Migrate pluginを使ってみる。 | バシャログ。 廃止されたAPIを使おうとしたり、挙動が変わった機能を使おうとした際に、ブラウザのコンソールに警告を出力する。 +廃止されたAPIを復元する例えばtoggleメソッドは1.9では排除されているが jQu…

【jQuery】jQueryの高速化

バージョンを分ける 引用元 jQuery高速化!処理速度を10倍上げるテクニック20選 jQuery 2.x 系 モダンブラウザに最適化されたバージョン(IE6/7/8はサポート対象外) jQuery 1.x 系 古いブラウザにも対応したバージョン IE9以上ならなら2.x系をIE9以下なら1.…

【jQuery】readyイベント

javascriptはHTML,CSSの読み込みが全て終わってから読み込まれる必要がある。 jQueryでの記述 以下は全てjQueryをHTML,CSSの読み込みが全て終わってから読み込ませる書き方。 $( document ).ready( function() { }); $( document ).on( 'ready', function() …

【jQuery】thisセレクター

メソッドを指定するときは$(this)と記述する (jQUeryのオブジェクトではなくDOM要素なので) $(this).css('color','red'); イベントハンドラ内のthisはイベントの対象が指定される 親、先祖要素を指定 親要素を指定 $(this).parent() 親or先祖要素を指定 $(…

【jQuery】ライブラリ読み込み時の注意(https対応、コンクリフトを避ける)

httpとhttpsへ対応する ライブラリを読み込む際は、次のように記述し「http」か「https」かを分ける。 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> $のコンクリフトの回避 ライブラリ同士が、$関数に対してそれぞれ違う定義をしている場合、正しい動作をしない。 回避法1 $をjQuery内で無効にして他の…

【基礎知識】httpとhttps、URIとURL、TCPとUDP等【随時更新】

httpとhttps(SSL)の違い http (Hypertext Transfer Protocol) HTMLなどのコンテンツの送受信に用いられる通信プロトコル https (Hypertext Transfer Protocol Secure) HTTPによる通信を安全に(セキュアに)行うためのプロトコルおよびURIスキーム。 HTTPS…

【HTML,CSS】画像のレスポンシブ、retina対応

DEMO ①imgタグのレスポンシブ 横幅のみ%等指定。 ②background-imageのレスポンシブ heightはpaddingでとる。background:url(300.jpg) no-repeat center/cover; ③解像度によって画像を置換 高解像度の画面で見た場合、mediaqueryで条件分岐させ画像を解像度の…

【PHP】基礎知識・基本的な記述

PHP

php基礎 phpブログやSNSなどで使われたりする。 動くものを作るときにはお勧めの言語 echo 文字列を書き出す。 コメントアウト // 一行 /* 複数行 */ ・htmlと共存できる。phpの変数 $をつけて格納 $を付けて呼び出す。

【基礎知識】ITエンジニア

ITエンジニアについて SE(systems engineer) コンピューター-システムの分析と設計に携わる人。情報処理技術者。技術を中心とした業務がメイン。 SIer 読み方:エスアイアー,エスアイヤー。システムインテグレーション(system integration)を行う人。 シス…

【模写】1day1banner (1日1つバナー制作31日目)

1日1つバナーを作っていきます。 模写リサイズ サイズ300*250/60min Toolphotoshop

【模写】1day1banner (1日1つバナー制作30日目)

1日1つバナーを作っていきます。 模写リサイズ サイズ300*250/30min 728*90/10min 160*600/10min Toolphotoshop

【jQuery】アコーディオンメニュー、thisセレクターを使う

DEMO <ul class="box"> <li class="button">&#x25BC;おはよう <ul class="inner"> <li>早上好</li> <li>good morning</li> </ul> </li> <li class="button">&#x25BC;こんにちは <ul class="inner"> <li>你好</li> <li>hello</li> </ul> </li> <li class="button">&#x25BC;こんばんは <ul class="inner"> <li>晚上好</li> <li>good night</li> </ul></li></ul>

【VirtualBox,Vagrant】ローカル開発環境【随時更新】

最終更新日:4/23 1 インストール VirtualBox 手元のPCでローカルサーバーをいくつも作れる。 Oracle VM VirtualBoxの「Downloads」ページへ 「Windows hosts」か「OS X hosts 」をクリックしてダンロード Vagrant VirtualBoxをわかりやすいコマンドで使える…

【模写】1day1banner (1日1つバナー制作29日目)

1日1つバナーを作っていきます。 模写リサイズ サイズ300*250/60min 728*90/15min 160*600/15min Toolphotoshop

【模写】1day1banner (1日1つバナー制作26~27日目)

1日1つバナーを作っていきます。 模写リサイズ1 サイズ300*250/60min 728*90/15min 160*600/15min Toolphotoshop 模写リサイズ2 サイズ300*250/30min 728*90/15min 160*600/15min Toolphotoshop

【HTML,CSS】レスポンシブルwebデザイン

授業のメモ RWD (Responsive Web Design) 同じhtmlの見え方を、デヴァイスや横幅別にスタイルシートで分けていくこと。基本的にHTMLは変えない。 動的な配信 pcと sp フォルダに分けられる。それぞれ別のHTMLで製作。.htaccessというファイルを作りスマホで…

【javascript】DOMの操作・参照など【随時更新】

最終更新:2017/4/22 DOMの操作 要素の参照 getElementById idを参照 <div id="test"></div> <script> var test = document.getElementById('test'); test.textContent=('hello.'); </script> getElementsByClassName classを参照 document.getElementsByClassName('class'); getElementsByTagName …

【webデザイン】サイト製作の手順メモ【随時更新】

全体像 製作自体の流れ クライアントワークの流れ 1.製作自体の流れ step1 競合調査 ターゲットユーザーの選定 ニーズの調査 ターゲットユーザーがどんな情報を欲しているのか 目標設定 作るサイトの目標はどこにあるのか step2 どんなコンテンツを盛り込む…

【jQuery】基礎知識の復習と画像置換(訓練校授業分)

最終更新:2017//4/22 授業のメモ セレクタ等は基本的にチートシートを使う。 マウスのイベントはonで統一される。 変数のデバッグはconsole.log( 変数名 ) で行う。 公式サイトからダウンロードするときは基本的にはcompressedw使う jQuery直リンクで読み込…

【コンペ】メッセンジャーバックのバナー 1day1banner (1日1つバナー制作28日目)

1day1banner (1日1つバナー制作27日目)1日1つバナーを作っていきます。 メッセンジャーバックのバナー(通販サイト内) サイズ 960*190 Time 30min Tool photoshop

webサイト無料で製作します!

現在東京の職業訓練校でwebデザインを勉強中の学生です。授業の一環としてwebサイトを無料で製作させていただける企業、店舗様を探しております。検索した際に、ページの上位に表示する事がほぼ確実に可能です。 集客や利益増に成功した事例も多数なので興味…

【模写】目薬のキャンペーンバナー 1day1banner (1日1つバナー制作27日目)

1日1つバナーを作っていきます。 目薬のキャンペーンバナー サイズ 960*360 782*90 Time 60min Tool photoshop

【webデザイン】ラーメン屋サイトのカンプ作成

クライアントワークの見本として、地元密着型の飲食店のウェブサイトカンプを作成しました。 全体像 横幅 960 Time 3h Tool photoshop cc できそうならtopの画像に煙のアニメーションを出したりして見たいです。

【コンペ】整骨院のバナー 1day1banner (1日1つバナー制作26日目)

1日1つバナーを作っていきます。 和風調味料のバナー サイズ 960*360 Time 60min Tool photoshop

【コンペ】和風調味料のバナー 1day1banner (1日1つバナー制作25日目)

1日1つバナーを作っていきます。 和風調味料のバナー サイズ 300*250(600*500) 728*90 Time 60min 15min Tool photoshop

【design】配色について【随時更新】

「色」の基礎知識 大まかな分別 3つの要素 webdesignでの配色 目的で考える 色相から考える 1.「色」の基礎知識 大まかな分別 物体色 光の反射によって受け取る色。 光源色 光を放つ光源自体から受け取る色。 3つの要素 Hue(色相) 色の相違(赤、青、黄など) …

【模写・アレンジ】保湿化粧品のバナー 1day1banner (1日1つバナー制作24日目)

1日1つバナーを作っていきます。 専門学校バナー模写 模写元 模写 サイズ 300*250(600*500) Time 30min Tool photoshop Memo 高級感を意識して配色などを決めなおしました。 クリックボタンは元のデザインの方が目立ちやすかったかもしれません。

【javascript】タイマー処理を使った画像のフェイドイン・アウト

DEMO html <p><img src="img/img1.jpg" alt="photo" id="img"></p> <ul> <li id="f_out"> フェードアウト </li> <li id="org"> 元の画像 </li> <li id="f_in"> フェードイン </li> </ul> </html> javascript var f_out = document.getElementById('f_out'); var f_in = document.getElementById('f_in'); var img = document.getElementById(…

【javascript】タイマー処理をつかったスライドショー

DEMO html <html> <head> <meta charset="UTF-8"> </head> <body> <p> <img id="gazou" src="img/img1.jpg" alt="potato"> </p> <button id="play">play</button> <button id="stop">stop</button> <script type="text/javascript" src="script/slide1.js"></script> </body> </html> javascript var play_…

【javascript】タイマー処理【随時更新】

タイマー処理 setInterval 一定時間ごとにある処理を繰り返す。 前の処理が終わったかどうかを"判断せず"に繰り返す。 setInterval(function, 時間指定,functionの引数1, functionの引数2,…) 例 指定した関数を指定時間ごとに繰り返す。 var i = 0; function…

【模写・アレンジ】専門学校バナー模写 1day1banner (1日1つバナー制作23日目)

1日1つバナーを作っていきます。 専門学校バナー模写 模写元 模写 サイズ 300*250(600*500) Time 30min Tool photoshop Memo 背景レイアウトはもっと目線を意識する。「今すぐ診断」の文字装飾は目立ちやすさとかクリックされやすさをもっと考える。。

【javascript】連想配列【随時更新】

連想配列 オブジェクトとして扱われる。 連想配列のキーになるシンボルの事をプロパティという Objectコンストラクタ 生成 //Objectコンストラクタ var obj = new Object(); Arrayコンストラクタ var arr = new Array(); </script> 書き方 var obj = { a: 'あ',b: 'か…

【javascript】DOMの操作・イベント【随時更新】

HTMLイベントハンドラ属性 HTMLタグに記入できる <div onclick="alert('クリックされました。')">button</div> 関数の呼び出し <div onclick="hello();">button</div> <script> function hello(){alert('hello');}; </script> イベントリスナー addEventListener Nodeが持つメソッド。引数が3つある test.addEventListener('イベント名','イベントリスナー(呼び…

【基礎知識】インターネットの仕組み、DNSの仕組み【随時更新】

インターネットの仕組み インターネット ケーブルや無線などを使ってつなぎ、お互いに情報をやりとりできるようにした仕組み サーバー 情報やサービスを他のコンピュータに提供するコンピューター。インターネット上には多数の役割の異なるサーバが設置され…

【模写】イラスト風バナー模写 1day1banner (1日1つバナー制作22日目)

1日1つバナーを作っていきます。 イラスト風バナー模写 プチプラで女子力を上げよう。minimo | バナーデザイン専門ギャラリーサイト | レトロバナー サイズ 300*250(600*500) Tool イラストレーター Point イラスト部分は内側に白線を入れると塗り残しを表現…

【javascript】正規表現を扱うオブジェクト【随時更新】

正規表現とは? 特定のパターンを文字列で指定して一致する文字列を検索する方法。 柔軟に検索できる。 数値や文字列などを指定できる。 webサービスではエラーの検出等で使う。 正規表現の使いどころ https://webnaut.jp/markup/606.html RegExp var 変数 =…

【javascript】関数やMath,Numberを使った復習

関数を使って練習したコードを上げていきます。 引数に入力した半径を元に円の面積をpxで表す /*-----css-----*/ #b{ width:20px; height:20px; margin:0 auto; background:linear-gradient(-45deg,#f33,#33f); color:#fff; text-align:center; } /*-----jav…

【模写】タイポグラフィ模写 1day1banner (1日1つバナー制作21日目)

1日1つバナーを作っていきます。 飲食系バナーのタイポグラフィ retrobanner.net バランスを調整してエンベロープをかけるだけでわりとすぐ作れました。これは使えそうです。

【javascript】数値を扱うオブジェクト(Number,Math)【随時更新】

Numberオブジェクト 数値や浮動小数点を扱うことができる。 無限大や非数などを表すプロパティがある。変数に数値を代入したり、数値を扱った計算をすると自動的で作成される。Numbeobjectの生成 //変数numに1を生成 var num = new Number([1]); //変数numに…

【javascript】関数(ユーザー定義関数)【随時更新】

関数の定義と呼び出し //関数の定義 function 関数名{ } //関数の呼び出し 関数名(); 引き数の指定。 function 関数名(引数1 引数2){ 実行する処理。 } 引き数は変数も指定できる。 function add(a,b){ var c = a + b; document.write( a + '+' + b + "=" + …

【模写】キャンペーンバナーとソシャゲの文字装飾 1day1banner (1日1つバナー制作19~20日目)

1日1つバナーを作っていきます。 キャンペーンバナー お父さんヌードルプレゼント!SoftBank | バナーデザイン専門ギャラリーサイト | レトロバナー ソシャゲの文字装飾 初回限定ガチャ 10連召喚×2 輝星のREBELLION | バナーデザイン専門ギャラリーサイト | …

【HTML5】セクショニング・コンテンツ【随時更新】

セクショニング・コンテンツとは コンテンツの塊をグループ化する。 HTMLのアウトラインを作る。 アウトライン 輪郭、HTMLのツリー構造の骨組み。 h1~h6は自動でアウトラインを作る。 HTML4まではh1~h6だけでアウトラインを作っていたため、閉じタグがなかっ…

【デザイン分析】ファッションブランドのブランドサイト

ファッションブランドのブランドサイト http://kolor.jp/ 種類 ブランドサイト 概要 日本のファッションブランド ターゲット 企業?業界向け ページ構成 TOP>・MEN・WOMEN・ARCHIVES・VIDEOS・各ニュース・各コンタクト width/breakPoint 1240px(右のバーを…

【javascript】document.writeを使わずに九九の計算表

前にdocument.writeを使って100 x 100の表を作りましたが今回はinnerHTMLで指定して作りました。DEMOhtml + javascript <body> <div id="btn">100 x 100</div> <table id="table"> </table> <p> </p> <script> var btn = document.getElementById('btn') btn.onclick = cl; var table = document.getElementById('table'); var nu</body>…

【コンペ未応募】マッサージ店とドレスレンタルのバナー 1day1banner (1日1つバナー制作19~20日目)

1日1つバナーを作っていきます。 あまりにも出来がひどかったためコンペには応募しませんでした… マッサージ店バナー ドレスレンタル店バナー 反省 マッサージ店では魅せるアイディアが、ドレスのレンタルではレイアウトや文字組が全然ダメでした。模写など…

【デザイン分析】全国規模のパン屋さん

パン製造・販売会社 4/29 種類 コーポレートサイト 概要 愛知に本社のある全国規模のパン屋さん ターゲット 顧客 >女性>若い女性・センスの高い女性 ページ構成 TOP>・ABOUT ANTIQUE(concept)・ITEMS・SHOP・ANTIQUE AORLD・COLMUN・BLOG width/breakPoint 1…