web制作 | 夜間飛行 備忘録

web制作講座で教わったあれこれを書き留めていきます

2015-05-01から1ヶ月間の記事一覧

66日目 | web制作

本日は…■企業サイト制作の続き・今日やったこと ボタンわかりにくい→リンクがマウスオーバーで変化するように 商品一覧にしてほしい→画像さしかえ 商品一覧ページにギフトを加える→ギフト写真加工&リンク作成 PNGファイルの圧縮作業→バナーとナビゲーション…

65日目 | web制作

本日は…■企業サイト制作の続き 終わったこと… fullpage.jsを導入 各ページとのCSSの整理 商品詳細ページのメニューのコーディング IE対応残っていること 焼き方ページの画像と動画 トップページ社長の顔入れ、見出しつけ(こだわり、社長あいさつ) 商品詳細ペ…

64日目 | web制作

本日は…■ファビコンの設定 サイズは一応16、32、144で作る■企業サイト制作の続き 本日終わったこと ・焼き方ページのコーディング ・商品詳細ページのトップメニュー 残っていること ・焼き方の画像入れ ・商品詳細ページのスクロールjs再検討 ・お店…

63日目 | web制作

本日は…■企業サイト制作の続き終了した作業・ヘッダーを170pxにしたことによる調整 →ロゴと社名については再検討の余地 →メニューの二番目三番目テレコ・こだわりページのコーディングとアコーディオン設置 →アコーディオン内画像、番号につき再検討 →こだわ…

62日目 | web制作

本日は…■企業サイト制作の続き・予定のスライダー画像はまだ製作中(新たな画像が来ると差し替えの可能性有り、ペンディング)・商品詳細ページのフルページについても現在検討中 (fullpage.jsにしてももう少し調整が必要) →ヘッダーフッターをつけるのでそ…

自習13 | web制作

本日は…■自習 企業サイト制作の続き○トップページについて 終わったもの ・トップページのHTML、CSS、jQuery ・スライダーの導入 今後残っているもの ・スライダーに入れる画像 ○他のページについての予定 月曜日:トップページのスライダー画像制作&商品詳…

61日目 | web制作

本日は…■企業サイト制作トップの素材制作がほぼ完了先生にカンプを見せてOKをもらう→歌舞伎のイラストについては真面目に考える→ボディの色、Containerの色について再考の余地あり←視線の拡散の虞ヘッダーにh1をあえて書き足すことも考えるヘッダーはfixedに…

60日目 | web制作

本日は…■職業能力基礎講習で履歴書の書き方や面接での受け答えについて特に…志望動機は ・仕事自体について →経験に基づいたものなのか、興味があるからなのか ・会社自体(モットー理念などをHPでみる) ・条件・待遇 と言った順に書いていく紙に書くのと面…

59日目 | web制作

本日は…■【ワイヤーフレームとは】デザイナーとクライアントの間をつなぐコミュニケーションツーール→仕事になるとお金にからんでくる(ないと駄目。チェック項目を作って、こうやっていいかと聞いてOKもらったから進めたのでお金出してねといえる。相手がや…

58日目 | web制作

本日は…■一日制作一応のワイヤーフレーム ※要再スキャン 5,6についてはもう少し練る必要有り。

自習12 | Web制作

本日は…■自習企業サイト制作のための写真撮影を行う ・背景の為にプラスチックの薄い白い板を用意 ・撮影用の小物(食器、ランチョンマット、箸)などを用意 ・マクロ撮影なので三脚を用意 ・デジタル一眼は借り物 ・食べ物の撮影なので明るいところを求めて…

57日目 | web制作

本日は…■テスト第三回jQuery■企業サイト制作 ・情報の整理 ・各頁のレイアウトをざっと決める …以下後日加筆

56日目 | web制作

本日は…■メディアクエリについて レスポンシブ対応かつ、IE対応にする → <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> ヘッダーに記入 さらに <style> article, as…

55日目 | web制作

本日は…■レスポンシブwebデザインについて →スマホで見ても見られる、というくらいのことから、スマホで見ても情報量が変わらないというレベルまで(正しくは後者)<レスポンシブwebデザインの簡単な作り方> <meta name="viewport" content="width=device-width"> ①ヘッダーのメタタグにviewportの記述 @media </meta>…

54日目 | web制作

本日は…■昨日のサイトのコーディングが終わったのでその紹介 イメージcafe 実際のページほぼカンプ通りにできあがり。文字にline-heightをつけるとmarginの計算で少し悩むなどの問題有り。 要練習。

53日目 | web制作

本日は…■カンプ制作 Illustratorを使ってカンプ制作の仕方を学ぶ ・960gridSystemを使って制作すると楽(最近はもっと横に広いサイトも多い) ・Illustratorのカンバスサイズは1200px(高さは任意) ・文字のサイズも決める ・ピクセル単位まで画像サイズを…

自習12 | web制作

本日は…■休みなので自習 企業サイト制作について参考サイトいくつかメモ書き(後日サイト100選に掲載予定)洋葱大焼売 本格餃子・シュウマイ・点心のお取り寄せ高級飲茶専門店「点心庵」www.mother-leaf.jp 食べ物の商品画像の使い方のバリエーションが豊富 …

自習11 | web制作

本日は…■休みなので自習 ○html5のアウトライン構造について <header> <h1>ヘッダーの見出し</h1> </header> <section> <h1>セクションの見出し</h1> <section> <h1>セクションの中の見出し1</h1> </section> <section> <h1>セクションの中の見出し2</h1> </section> </section> <footer> </footer> →アウトラインを表示すると 1.ヘッダーの見出し 1.セクションの見出し 1.セクションの…

52日目 | web制作

本日は…■タブ形式で表示するためのjQueryを作成 基本的に項目をそれぞれ ・見出しのul ・中身のul という形で記述して、見出しのクリックをするごとに中身のulを連動させて見えるようにする <ul class="title"> <li><a href="#tab1" class="select">1</a></li> <li><a href="#tab2">2</a></li> <li><a href="#tab3">3</a></li> <li><a href="#tab4">4</a></li> <li><a href="#tab5">5</a></li> </ul>

51日目 | web制作

本日は…■HTML5のドリル 思い出せる順に… 1.section 2.nav 3.header 4.figure 5.atlibute 6.aside 7.placeholder 8.autofocus 9.required 10.DTD こんな感じの回答だった記憶(順不同)■横型アコーディオン 縦のものより横に広がるほうが意外と使い勝手がある <div id="accordion"></div>…

自習10 | web制作

本日は…■連休なので自習HTML5を使ったフォームの作成 必須項目 <form action="#" method="post"> <input type="submit" value="送信"> </form> formとsubmit中身に合わせて 1.テキストタイプのインプット領域 <label for=""></label> <input type="text" size="" id="" name=""> 2.emailやtelのインプット領域 <input type="email" size="" id="" name="">

自習9 | web制作

本日は…■本日も休みなので自習HTML5について教科書(HTML&CSS標準デザイン講座)のp.222~p.241まで○HTML5には広義と狭義がある マークアップ言語としてのHTML5と、API(Application Program interface)としてのHTML5を狭義のHTML5と呼ぶ ※IE8以下には対応し…

自習8 | web制作

本日は…■講座は休みなので自習 ・企業サイト制作のプレゼン資料作り(内容について社長と打ち合わせ)それを受けてとりあえずのレイアウト まだまだ改稿予定■フォームの復習 ■WordPressの教科書を読む

自習7 | web制作

本日は…講座は休みなので自習・企業サイト制作の参考に食品系の通販サイト(の母体)をたくさん見る旅する丸干し|鹿児島県薩摩生まれ、世界を旅するおいしい丸干し|株式会社下園薩男商店marusatsu.jp 長野県松本市|ジャムJAMの製造、販売ならスドージャム…

50日目 | web制作

本日は…■HTML5の基礎●DTD ●section,header,nav…etc 文書構造を明確にするための要素 今までdivでid="container"としていたところを、sectionで書き換えられる ※HTML5ではDIVを文書構造のためには使わない ●blockレベルとinlineレベルの概念はナシ →divをaで…