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

ねっとぱんだ

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

【模写】タイポグラフィ模写 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…

【トライアル】ソシャゲ風バナー 1day1banner (1日1つバナー制作18日目)

1日1つバナーを作っていきます。 ソシャゲ風バナー ターゲット 男性(20代から30代 クリエイター) tool Photoshop time 20min

【模写】ソシャゲのバナー模写 1day1banner (1日1つバナー制作17日目)

1日1つバナーを作っていきます。 ソシャゲのバナー ターゲット 男性(20代から30代) tool Photoshop time 10min 感想 2つの選択肢を考えさせる、ソシャゲに多いコピーのバナーです。シンプルながらゲームの雰囲気に合わせたコピーの装飾で目を引きます。中央…

【模写】アジア雑貨のバナー 1day1banner (1日1つバナー制作16日目)

1日1つバナーを作っていきます。 アジア雑貨のバナー 模写 ターゲット 女性(20代から30代) ナチュラルな雑貨が好き アジア雑貨が好き tool Photoshop time 10min 感想 アジア雑貨のバナーは背景にテクスチャを使ったりしていて、手間をかけずに雰囲気を出す…

【HTML5,CSS3】floatと回り込み

たまに分からなくなってしまうfloatについて、ここでしっかり把握しておこうと思い改めて検証しました。 float 通常の流し込みから外れて、要素を左右どちらかに移動させ、他の要素を回り込ませる処理。 他のfloatした要素の辺に触れると左右への移動が止ま…

【javascript】cssスプライトを再現

javascriptでcssスプライトを再現 後からもっとスマートなやり方に改変していきたいと思います。・4/7時点でのDEMOhtml <ul> <li><a href="#"><img src="img/js_sp1.jpg" onmouseover="this.src='img\/js_sp6.jpg';" onmouseout="this.src='img\/js_sp1.jpg';" name="a">HOME</li> <li> <a href="#"></a></li></ul>

【模写】ソシャゲのバナー 1day1banner (1日1つバナー制作15日目)

1日1つバナーを作っていきます。 RPGのバナーの模写 retrobanner.net ターゲット 若者(20代後半から30代男性 何方かと言えば硬派) tool Photoshop time 20min 反省・感想 イラスト、飾り部分は良いフリー素材がなかったので除外しました。 操作画面をgifで見…

【コンペ出品】1day1banner (1日1つバナー制作15日目)

1日1つバナーを作っていきます。 GIFバナーcrowdworks.jp ターゲット 20後半~30代の本格的な英会話を学びたいけど高くて躊躇していた人・学生やキャリアウーマンなど女性中心素材 支給tool Photoshoptime 1.5h反省・感想 コンセプトとデザインはリンク先で確…

【模写】ソシャゲのバナー 1day1banner (1日1つバナー制作14日目)

1日1つバナーを作っていきます。 RPGのバナーの模写 retrobanner.net ターゲット 若者(10代後半から30代までの少し高めの層・男性向け) tool Photoshop time 1h 反省・感想 アニメ・ゲーム系のコンテンツでのタイポグラフィやデザインを知りたいので模写して…

【javascript】Dateオブジェクト【随時更新】

日付、時刻を扱う Date 日付、時刻を扱う為のオブジェクト。 日時を1970年1月1日0:00からの経過時間をミリ秒で保持している。 ブログの内容も復習 Dateオブジェクトを生成 var a = new Date();//現在の日付と時刻を生成 var b = new Date(1000);//1000ミリ秒…

【javascript】画像置換、for文での表組み作成

onmouseoverによる画像置換 DEMOhtml <li><img src="img/photoS1.jpg" alt="1" onmouseover="change(1);" onmouseout="end();"></li> <li><img src="img/photoS2.jpg" alt="2" onmouseover="change(2);" onmouseout="end();"></li> <li><img src="img/photoS3.jpg" alt="3" onmouseover="change(3);" onmouseout="end();"></li>

【コンペ出品】1day1banner (1日1つバナー制作13日目)

1日1つバナーを作っていきます。 英会話教室のバナー crowdworks.jp ターゲット 20後半~30代の本格的な英会話を学びたいけど高くて躊躇していた人・学生やキャリアウーマンなど女性中心 素材 支給 tool Photoshop time 1h 反省・感想 コンセプトはリンクペー…

【javascript】オブジェクトについてとビルトインオブジェクト【随時更新】

オブジェクトとは プログラムで扱う情報を部品化して管理 オブジェクトの種類 ビルトインオブジェクト webブラウザのオブジェクト DOM(Document Of Model) ユーザー定義オブジェクト ビルトインオブジェクト javascriptに組み込まれているオブジェクト。 ECM…

【javascript】 break、continue

break swich文を抜ける。 break文がない場合、それ以下のcaseも実行される。 var x = 20; switch(x){ case 10: document.write(x + 'は十です。'); break; case 20: document.write(x + 'は二十です。'); break; case 30: document.write(x + 'は三十です。'…

【コンペ出品】1day1banner (1日1つバナー制作12日目)

1日1つバナーを作っていきます。 結婚相談所のバナー crowdworks.jp ターゲット 20後半~30代の結婚に繋がる出会いを求める女性 素材 支給 tool Photoshop time 全1h30min 反省・感想 初めてのバナーリサイズです。 2つめのレイアウトが詰まり過ぎてしまった…

【コンペ出品】1day1banner (1日1つバナー制作11日目)

1日1つバナーを作っていきます。 東京の不動産屋のバナー crowdworks.jp ターゲット 20後半~40代 素材 支給 tool Photoshop time 各15min 反省・感想 今回は要点を抑えてから製作できた為、時間効率はかなり良かったです。 デザインのバリエーションが今まで…

【コンペ出品】1day1banner (1日1つバナー制作10日目)

1日1つバナーを作っていきます。 ブランド時計販売サイトのバナー crowdworks.jp ターゲット 30~40代 素材 支給 tool Photoshop time 各60min 反省・感想 シンプルによりすぎたかもしれません。 コンセプトをもう少し掘り下げればデザインに反映できた気がし…

【Wordpress】テーマの作成の初歩②

wordpressテーマ作成の初歩的な部分を勉強しました。 WordPressのテンプレートタグ やでタイトルや記事本文を出力できるがこれらを、 WordPressのテンプレートタグと呼ぶ。 <h1></h1> /*上の記述は以下のように省略できる ','</h1>'); ?> 上の例でのthe_title部分をタグ、(…

【コンペ出品】1day1banner (1日1つバナー制作9日目)

1日1つバナーを作っていきます。 和風結婚式のバナー crowdworks.jp ターゲット シンプルな結婚式や和風な結婚式に興味のある20代の若者 素材 支給 tool Photoshop time 各60min 反省・感想 クラウドソーシングのコンペに出したものです。 格安ですが高級感…

【javascript】for構文で元号と西暦を表示

javascriptで元号から西暦を計算してtable内に書き出します。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>review</title> <style> table{ text-align:center; font-family:Arial; border-collapse:collapse; width:200px; margin:0 auto; } th,td{ border:1px solid #000; } </style> </head> <body> <table> <tr> …</tr></table></body></html>

1day1banner (1日1つバナー制作8日目)

1日1つバナーを作っていきます。 システム開発会社のホームページバナー ターゲット 企業担当者 素材 フリー tool Photoshop time 60min 反省・感想 クラウドソーシングのコンペに出そうと思って辞めたものです。

【Wordpress】テーマの作成の初歩①

wordpressで自作テーマを作成する方法を勉強してまとめていきます。 自作テーマ作成の準備 「mytheme」というフォルダを作る。 フォルダの中に「index.php」という空のphpファイルを作る。 「style.css」というcssファイルを作り以下のように記述する。 これ…

1day1banner (1日1つバナー制作7日目)

1日1つバナーを作っていきます。 ジムのキャンペーンバナー ターゲット 健康が気になりだした20~30代男性 素材 フリー tool Photoshop time 30min

【javascript】switch構文~setTimeout等

swich構文の復習 var x = 1; switch(x){ case 1: console.log('1です。') ; break;//必須 case 2: console.log('2です。'); break; default: console.log('1と2以外の値です。'); break; } caseは並べてかける。 switch(x){ case 1: console.log('1です。') …

【javascript】 配列【随時更新】

基本的な書き方 配列の定義 var 配列名 = new Arry(要素数=最初の空きの数) var a = new Arry(6) //中が空でも.lengthで6が返される。 //一般的には要素数指定しない。 配列の初期化 var 配列名 = []; var 配列名 = [1,2,3,4,5]; 値の参照など var arr = [2,…

1day1banner (1日1つバナー制作6日目)

1日1つバナーを作っていきます。 通販サイトのキャンペーンバナー ターゲット 主婦>20代~30代女性 素材 フリー tool Photoshop time 60min 反省・感想 文字組のマージンが不自然なので注意して行きたいです。 物寂しい気がするので、次にグリッドレイアウト…

【javascript】関数の練習

関数の復習javascriptの関数を改めて復習します。関数を作る //関数aを作成 function a(){ console.log(333); } //aを呼び出し a(); 引数を指定 function a(x,y){ console.log(x + y); } //xとyにそれぞれ引数4と5を指定 a(4,5); callback関数関数の引数に関…

【javascript】論理演算子、数値・文字列・真偽値への変換、三項演算子

新しく学んだことや復習をまとめて行きます。論理演算子論理AND演算子両辺がtrueならtrue x=7; y=2; if(x === 7 && y === 2){ console.log('xは7でyは2'); } 論理OR演算子両辺どちらかがtrueならtrue x=7; y=2; if(x === 7 || y === 2){ console.log('xは7で…

【javascrip】 分岐とparseIntで平均体重をもとめる

男女別に平均体重を男女別に求める※数値は適当です var heigth; var weight; var man; man = confirm('あなたは男性ですか?',''); height = window.prompt('あなたの身長を半角英数字でかいてね',''); height = parseInt(height,10); //man がtrueかどうか…

1day1banner (1日1つバナー制作5日目)

1日1つバナーを作っていきます。 大豆の健康飲料バナー ターゲット 30代~40代女性 素材 フリー tool Photoshop time 40min 反省・感想 ボタン部分をグラデーションや立体的にしてもう少し目立たせればよかったかと思います。 要素間の空きを情報の関連性ごと…

【HTML,CSS】要素を横並びにする基本的な方法を復習

floatを使うfloatでliがそれぞれ左寄せになるため横に並びます。 li{ llist-style-type:none; margin:50px auto; width:310px; } li{ float:left; } a{ display:block; background:#faa; height:40px; width:100px; } ul li:nth-of-type(2) a{ background:#a…

1day1banner (1日1つバナー制作4日目)

1日1つバナーを作っていきます。 化粧品のバナー ターゲット 20代~30代女性 素材 フリー tool Photoshop time 60min

1day1banner (1日1つバナー制作3日目)

30分以内でバナーを作っていきます。 大人の女性向けファッションブランドのセールバナー ターゲット 30代~40代女性 目的 ECサイトへの誘導 素材 フリー tool Photoshop time 20min

【javascript】 ランダム関数と条件分岐の練習

新しく学んだことや復習をまとめて行きます。random関数とif構文を使ったおみくじ var omikuji =parseInt(Math.random() * 10) + 1; console.log(omikuji); if (omikuji == 1){ console.log('大吉'); }else if(omikuji ==2){ console.log('中吉'); }else if(…

【デザイン分析】仙台のwebdesign会社

1day1site(1日1つ、おすすめのサイトを紹介していきます。) 仙台の制作会社のコーポレートサイト 3/23 種類 コーポレートサイト 概要 仙台のweb制作会社のコーポレートサイト ターゲット 顧客 >企業・同業者 (海外向け?) ページ構成 TOP(各作品ページへ)>・…

【1日1つデザイン分析】海外の制作会社のコーポレートサイト

1day1site(1日1つ、おすすめのサイトを紹介していきます。) ドイツの制作会社のコーポレートサイト 3/22 種類 コーポレートサイト 概要 ドイツの制作会社のコーポレートサイト ターゲット 顧客 >企業 ページ構成 Startseite>・Leistungen(サービス)・Projekt…

【1日1つデザイン分析】地方遊園地のブランディングサイト

1day1site(1日1つ、おすすめのサイトを紹介していきます。) 地方遊園地のブランディングサイト 3/21 種類 ランディングページ 概要 仙台の遊園地のブランディングサイト ターゲット 既存顧客、新規顧客 >昔遊園地に来たことのある大人、家族づれ >20,30~50代…

【CSS】CSS3でアニメーションに関係するプロパティ(animation , transition , transform)

animation transition transform についてまとめます。 animation animation-nameで指定した名前を@keyframesで呼び出して使う。 div.box { /*animeを指定*/ animation-name:anime; } @keyframes anime{ ここにanimeの動きを記述していく } @keyframesの書き…

【1日1つデザイン分析】アートサイエンスのポータルサイト

1day1site(1日1つ、おすすめのサイトを紹介していきます。) メディアアートのポータルサイト 3/20 種類 ポータルサイト 概要 ターゲット 新規入学者 >若者・サイエンスアートに興味のある人 >20~30代 ページ構成 TOP(最新記事ページへつながる)>・WORLD TOPI…

【javascript】ポップアップウィンドウを作る

javascriptでフラットなポップアップウィンドウを作りました。画像ごとに値を取得して違う画像を表示します。 ボタンのホバーアニメーションも少し練習しました。ポップアップウィンドウ DemoHTML(top page) <html lang="ja"> <head> <meta charset="UTF-8"> <title>lightbox</title> <link rel="stylesheet" href="style.css"> </link></meta></head></html>

【1日1つデザイン分析】旅行者向けの総合ブランドサイト

1day1site(1日1つ、おすすめのサイトを紹介していきます。) 旅行者向けの総合ブランドサイト 3/19 種類 EC・ブランディングサイト 概要 ターゲット 顧客 >新規顧客 >若者 >旅に興味のある若者(20~30) ページ構成 TOP>・PRODUCT(>各商品ページ) ・ABOUT ・NEW…

【1日1つデザイン分析】女性向けセレクトショップのブランディングサイト

1day1site(1日1つ、おすすめのサイトを紹介していきます。) 女性向けセレクトショップのブランディングサイト 3/18 種類 ブランディングサイト 概要 ストライプインターナショナルの新しいブランド ターゲット 顧客 >新規顧客 >大人の女性 ページ構成 全7ペ…