ねっとぱんだ-プログラミング勉強ブログ-

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

MAMPの導入

MAMPとは MAMP 「Macintosh」「Apache」「MySQL」「PHP」の頭文字をとったもの 公式サイトでダウンロードhttps://www.mamp.info/en/ MAMP起動後、「preferance」の「ports」を確認。80にする。8000だとスカイプと被る。 タイムゾーンの初期化 macでdate直す…

【Javascript】フェイドイン・アウトするスライダー

DEMO 目標 複数の画像をフェイドイン、アウトして切り替えていく 読み込んだ時、画像をランダムに表示 ボタンを押すと特定の画像を表示 画像の切り替えに合わせてボタンも切り替わる 実装 2枚の画像を重ねることで対応。z-indexとopacityをタイマー処理で増…

【php】オブジェクト、クラス、インスタンス

PHP

参考 : http://qiita.com/mpyw/items/41230bec5c02142ae691 オブジェクト、クラス、インスタンス 引用 http://wa3.i-3-i.info/word13563.html オブジェクト クラスとインスタンスを指す? クラス 「型」、「設計図」属性(プロパティ)と操作(メソッド)を…

【webデザイン】デスクトップとノートどちらが多い?

いくつかのサイトを個人的に要約しました パソコンはデスクトップ派?ノート派?レビュー比較 ※2016年のデータ 引用 : http://xn--qdktbt0ew792bce1b.xn--tckwe/2016/09/18/%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E3%81%AF%E3%83%87%E3%82%B9%E3%82%AF%E3%83…

【webデザイン】シニア向けサイト製作時の注意

いくつかのサイトを個人用に要約しました。 50以降向けサイト 引用:http://hi-posi.co.jp/tech/?p=330 大きめのフォント わかりやすいテキストリンク リンク領域の分かれ目は分かりやすく。 ボタンは大きく立体感を出す。フラットデザインのボタンは分かり…

【webデザイン】検索キーワードの決め方

いくつかのサイトを個人用に要約しました。 検索キーワードの決め方 【保存版】かんたん!「SEOキーワードの正しい選び方」 引用:https://seopack.jp/seoblog/20160502-choose-kw-easily/ キーワード候補を出す 思いつきでキーワードを出す 思いつくものを…

【javascript】キャラクターを操作して動かすアニメーション

DEMOこれが歩きます。 関数をまとめるところは今後やっていきます。。。 <html lang="ja"> <head> <meta charset="UTF-8"> <style> #img{ position:absolute; z-index:-999; top:100px; left:100px; } .controlar{ position:static; z-index:999; width:100px; height:100px; text-align:center; } .controlar s</meta></head></html>…

【webデザイン】AMPとは?対応方法記載ページなどまとめ

AMPについていくつかのサイトを個人用に要約しました。 AMPとは 引用 https://webkikaku.co.jp/blog/seo/accelerated-mobile-pages/ AMP (Accelerated Mobile Pages): Accelerated=加速される という意味。 Googleが推し進めてきたプロジェクト。 検索結果に…

【webデザイン】スマホサイトの製作とUI/UXの注意点

スマホサイト制作と注意点 スマホサイト制作とその注意点についていくつかのサイトを個人で見返す用に要約しました 引用サイト1 http://www.trive-media.com/blog/849 スマホサイトの特徴 指による操作タップ操作 指のクリック範囲はマウスより大きい 画面が…

【webデザイン】レスポンシブサイト製作と注意点まとめ

レスポンシブサイト制作について 個人的に見返す用としていくつかのサイトの要点をまとめました。 引用サイト1 https://ferret-plus.com/2614 レスポンシブの特徴 単一のHTMLの表示をmedia queriesで切り替える 最小横幅・最小縦幅にあわせてCSSを複数記述す…

【リサイズ】バナー制作 41〜42枚目

模写リサイズ サイズ ① 300*250/10min 728*90/5min 160*600/5min Toolphotoshop サイズ ② 300*250/5min

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

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

【模写・リサイズ】バナー制作 40枚目

模写リサイズ サイズ300*250/10min 728*90/5min 160*600/5min Toolphotoshop

【模写・リサイズ】バナー制作 39枚目

模写リサイズ サイズ300*250/15min 728*90/15min Toolphotoshop

【模写・リサイズ】バナー制作 38枚目

模写リサイズ サイズ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)を行う人。 シス…

【模写・リサイズ】バナー制作 37枚目

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

【模写・リサイズ】バナー制作 36枚目

模写リサイズ サイズ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をわかりやすいコマンドで使える…

【模写・リサイズ】バナー制作 35枚目

模写リサイズ サイズ300*250/60min 728*90/15min 160*600/15min Toolphotoshop

【模写・リサイズ】バナー制作 33〜34枚目

サイズ300*250/60min 728*90/15min 160*600/15min Toolphotoshop 模写リサイズ2 サイズ300*250/30min 728*90/15min 160*600/15min Toolphotoshop 模写リサイズ1

【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

【コンペ】バナー制作 32枚目

サイズ 300*250(600*500) 728*90 Time 60min 15min Tool photoshop 和風調味料のバナー

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

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

【模写・アレンジ】バナー制作 31枚目

化粧品のバナー模写 模写元 模写 サイズ 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…

【模写】バナー制作 30枚目

専門学校バナー模写 模写元 模写 サイズ 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('イベント名','イベントリスナー(呼び…