2016-03-01から1ヶ月間の記事一覧
ガントチャート記入例 Cacooを使って簡易フレームワークの作成ができるLogin - Cacoo 無料スマートフォン作成サイト smart4me.net
キレイ系 or 本格系 アテスウェイ パティスリー･サダハル･アオキ･パリ | patisserie Sadaharu AOKI paris マテリエル PATISSIER eS KOYAMA パティシエエスコヤマ ピエール・エルメ・パリ | PIERRE HERMÉ PARIS サイトホームページ パティスリー | Patisserie…
backgroundのwidthに対するレスポンシブ対応（P315～） background-size: の値 yachin29.hatenablog.com設定はbackground-sizeでする。background-sizeのサンプル 「contain」縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小す…
サイト制作の全体の流れ ①ヒアリング（クライアントとの打ち合わせなど）②サイト設計（ヒアリングを元にサイトを作る目的や、サイト全体の企画・立案、ページ構成など）③第一回プレゼンテーション④ラフデザインの作成（カラー構成、大まかなレイアウト）⑤カ…
<html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>レスポンシブデザイン カラムレイアウト</title> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/> </link></meta></link></meta></head></html>
先週の土曜日にクライアントワークを担当することになったケーキ屋さんにどんなデザインのサイトを希望を伺い、ケーキや内装の写真を撮らせていただきました。わかったこと ・店の名前は以前経営者夫婦が飼っていた猫の名前であること。 ・クライアントの希…
※レスポンシブデザイン カラムレイアウト yachin29.hatenablog.com今日の授業の概要 ・３カラムレイアウト（グリッドレイアウト）をPC、スマホ、タブレット用にする。 ・カラム落ちする画像の設定方法 ・タブレット用のfooterの設定 ・ファビコン（favicon）…
写真の撮り方 http://www.mori-camera.com/situation/food.htm#n1 https://withphoto.jp/feel/010/ http://www.camera-girls.net/howto/know_how/cafe-2/ クライアントワーク参考ポートフォリオ yachin29.hatenablog.com yachin29.hatenablog.com ★スマホ用…
03_23※ｊQueryのプラグイン yachin29.hatenablog.comcoliss.comemiac-works.com プラグイン手順 jqueryui.com ①demoでそれぞれの機能がどのようなものかを確認する。→download→今回は1.11.4(Stable, for jQuery1.6+にチェックを入れ、toggle allのチェックを…
※タブパネルd.hatena.ne.jp プレスホルダー Placehold.it - Quick and simple image placeholders 講師のscript記述方法 教科書１８１〜の記述方法 <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/tabpanel-1.css"> <title>タブパネルP１７９～</title> <script src="../jquery-2.2.1.min.js"></script> </link></meta></head></html>
ワイヤーフレーム ワイヤーフレームの作り方 ⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩ d.hatena.ne.jpd.hatena.ne.jp www.wireframeshowcase.com ・イラストレーター ①サイトから全体のスクリーンショットをとり保存する。chromeを使う場合awsome screenshotで次の流れでサイト全体を保…
・google console www.google.com ・XML sitemaps.comで書き換えたものをGoogle Consoleで載せたほうが上位表示できる。 www.xml-sitemaps.com 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。ECサイト サイトを作る時は以下の３通…
使ったツール：パス上文字ツール、直線ツールもしくはペンツール 使ったツール：ペンツール、パス上文字ツール 線の形状に丸みをつけたい時は、効果→スタイライズ 写真をもとにしてイラストの作成（人の顔などによく使われているらしい） 使っている機能： …
アコーディオンメニュー d.hatena.ne.jp ※dispaly:none;をddに設定した時の書き方 <html lang="ja"> <head> <meta charset="utf-8"> <title>クリックする度に画像が換わる(開閉パネル)display:none;の時の書き方</title> <style> dl { width: 300px; margin: 50px auto; } dt{ background: #7CADB6; padding: 10px; cursor: poi</meta></head></html>…
キャラクターを使ったロゴマーク d.hatena.ne.jp＊今回使ったツール 選択ツール ダイレクト選択ツール アンカーポイントツール：眉毛を書くときにアンカーポイントの追加 アンカーポイント追加ツール：眉毛や口の尖りを出すのに使った 楕円形ツール：真円、…
※jQueryのバブリング functionで要素セレクターとしてPやaを指定すると、他の場所にある同じ種類のセレクターーにも機能してしまうこと。 idやclassで限定して指定するとバブリングが解決できる。www.tam-tam.co.jp <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryのバブリング防止、one()</title> <style> ul,l</style></meta></head></html>…
d.hatena.ne.jpP５５〜P７４ ascii.jp※return false mof25.hatenablog.com 練習問題 ⇩ <html lang="ja"> <head> <meta charset="utf-8"> <title>背景色を変える</title> <style> body{background-color:#cae4ff;} </style> <script src="../jquery-1.12.1.min.js"></script> <script> $(document).ready(function(){ $('but…</meta></head></html>
＊今回は個人的に特に覚えておく必要があるもののみ載せます。 ①onmouseover,onmouseoutについて d.hatena.ne.jp d.hatena.ne.jp ②onclickして画像を順番に変える方法(特に複雑な記述なしでする方法) <html lang="ja"> <head> <meta charset="UTF-8"> <title>onclickで順番に５枚の写真を画像置換</title> </head> <body> <script> var i=1; v</body></html>…
d.hatena.ne.jp d.hatena.ne.jp d.hatena.ne.jp d.hatena.ne.jp paris1204.hatenablog.com d.hatena.ne.jp d.hatena.ne.jp d.hatena.ne.jpd.hatena.ne.jp paris1204.hatenablog.com paris1204.hatenablog.com paris1204.hatenablog.com paris1204.hatenablog…
＊サイト制作のワークフローの説明 d.hatena.ne.jp。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 ※まとめ-演習 d.hatena.ne.jp <html lang="ja"> <head> <meta charset="utf-8"> <title>演習</title> </head> <body> <script> var num; var cal; function ans(){ num=prompt…</body></html>
d.hatena.ne.jpDOM（インターネット上で動的なものを作るのに使う）※DOMのidは変数の上に書かないと反映されないので注意！！ <html lang="ja"> <head> <meta charset="utf-8"> <title>DOMの記述</title> </head> <body> <div id="box">this is box</div> <script> window.onload=function(){ var box=docu…</body></html>
Array（コンストラクタ） d.hatena.ne.jp <html lang="ja"> <head> <meta charset="utf-8"> <title>Arrayコンストラクタ</title> <style> html,body,h1,h2,h3,table,tr,th,td{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; padding:0…</meta></head></html>
＊flashでおみくじ機能の作成 ①photoshopでトップ画面、小吉、中吉、大吉、大凶の画像をひとつのファイルで作成し、 新規で開く→ファイル→読み込み→ステージへ読み込むをする（キーフレームの挿入をする） 新規レイヤー(action)を開き、top画面のマス部分（…
<html lang="ja"> <head> <meta charset="utf-8"> <title>昨日の復習及び配列を使って曜日に変換</title> </head> <body> <script> var today=new Date; var y=today.getFullYear(); var m=today.getMonth() + 1; var date=today.getDate(); var day=today.getDay(); //http://d.hatena.ne.jp/web-0818/20160502/p1 var w=['日…</body></html>
＊タイムラインコントロール-クロスフェード d.hatena.ne.jp※キーフレームの挿入はalt + ドラッグでできる＊トゥーイーンを作成した後 ↓ ①ボタンレイヤーを作成し、背景を真っ白に塗る。それを選択し、シンボルに変換する。＊ctrl + enterで選択表示になって…
d.hatena.ne.jp ↓arrayの中は下記 <html lang="ja"> <head> <meta charset="utf-8"> <title>配列</title> </head> <body> <script> var num=[10,100,1000,10000];//配列に関する数値は必ず[]←ブラッケトで囲む console.log(num[2]);//０番目が一番初めの順序なので１０００が２番目の値として表示される </script> <script> var fruits=['りんご','みかん','も</body></html>…
d.hatena.ne.jp <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>JavaScriptによる画像置換</title> </head> <body> <div class="imgbox"> <h1>おいしそうなケーキ</h1> <div class="thumnail"> <img src="img/s1.jpg" alt=""><img src="img/s2.jpg" alt=""></div></div></body></html>
d.hatena.ne.jp <html lang="ja"> <head> <meta charset="utf-8"> <title>while文で繰り返し</title> </head> <body> <script> var a=1; while(a<=100){ a*=2;//与えられた変数の値ｘ２という意味。100まで繰り返す console.log(a);//console.logの位置をa*=2;の上に入力すると計算の順序が変わるため結果が変わるので注意。 } console.log('</body></html>…
＊この自習内容は下記の講師のブログを参考に授業で入力してないかなと思う内容のものを自習しただけですので、総合的な内容は講師の方のブログを参考にされた方が良いと思います。d.hatena.ne.jp <html lang="ja"> <head> <meta charset="UTF-8"> <title>if分の利用</title> </head> <body> <script> var color='青'; if(color==='青'){conso</script></body></html>…
＊photoshopで同じサイズの画像（５枚）をレイヤー別々に分け、psdでweb用保存したものをスライド形式で→で切り替えられるものを作ります。 flashの基本の操作と考え方※ d.hatena.ne.jp d.hatena.ne.jp ①新規作成 ②ファイル→読み込み→ステージに読み込む を…
