※色や若干のデザインは変更している場合があります。 P22(Ps) P26(Ai) P28(Ai) P30(Ps) P33(Ps) P36(Ai) P41(Ai) P42(Ai) P45(Ai) P46(パターンをAiで作成、背景画像をPsで作成) P49(パターンをAiで作成、背景画像をPsで作成) P50(Ai,Ps) P55(Ai) P58(Ai) P6…
CSSで計算式を可能にするcalc()ファンクションyachin29.hatenablog.com ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 中の箱の可変しても感覚は変わらない <html> <head> <meta charset="UTF-8"> <title>CSSで計算式を可能にするcalc()ファンクション</title> <style> html,body,ul,li{font-family:"Hiragino Kaku Gothic proN", Meir</meta></head></html>…
無限スクロール http://yachin29.hatenablog.com/entry/2016/03/05/091202yachin29.hatenablog.com LazyLoad yachin29.hatenablog.com ①LazyLoadようのフォルダを作成し、imgファルダを作成してその中に５枚ほど画像を入れる。 jsファイルを作成する②以下の…
かすれ文字 必要な機能：効果→パスの変形→ラフ テキストを手書きスケッチ風に 必要な機能：効果→スタライズ→落書き グラデーションを使用したイラスト ①王冠の半分をペンツールで描きリフレクトツールで垂直軸にコピー パスが離れているので王冠の上の方は２…
基本的には教科書どうりに仕上げましたが、本来付属の背景画像と一緒に制作するところを自主制作した背景画像で仕上げました。P26 P30 P34 P40 P42 P43 P44 P48 P50 P55 P58 P63 P64 P74 P78 P82 P86 P90 P94 P98 P99 P100 P104 P118
後ほど主に使用した機能をまとめます。P22 P26 P29 P32 P34 P36 P38 P42 P46 P50 P54 P58 P62 P65 P70 P76 P82 P88 P92 P96 P100 P106 P110 P114 P120 P123 P126 P130 P134 P138 P140 P145 P148
日付の自動更新 <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> </head> <body> <p> 更新日： 2016年07月01日 </p> </body> </html> アセット（100ページ以上あるような場合においてアセットに登録したものをそれぞれのページに入れていれば、使用しているアセットの内容を変更するだけで全ての内容を記述通り更新して…
要素をグリッド状に表示してくれる(Maisonry) yachin29.hatenablog.com ★index.html内でのscriptの記述を以下のように変更すると高さの違う画像を使用していても自動調整してくれます。 変更するのは以下の３つ
yachin29.hatenablog.com Panizzon Embalagens - Frascos e Embalagens Plásticas ①イラストレーターで800 x 300 ピクセルで新規作成。②好きな文字を記入して、書式→アウトラインを作成する。（※アウトライン化後書体やフォントサイズは変更できない）③別名…
youtubeへの動画のアップロード①youtubeのアカウントにログインし、アップロードを押す。（公開、非公開を選ぶこと） ②アップロードする動画を選択し、確認後アップロードする。 埋め込み用のコードが出てくるのでもしページ内に載せる場合はこちらを使用。 …
過去の授業内容を踏まえてニューストリッカー（テロップのようなもの）を作りました。 paris1204.hatenablog.comcss3フィルターアニメーション obomemo.com ※フィルターを使用するときはCan I use でブラウザーが対応しているか確認すること。 今回はchrome…
RSSの取得 web-design-exercise.hatenablog.jp
Wordpressのカスタマイズ 授業ではこの教材を使用します。 作成については講師ブログと著者ブログ参照web-design-exercise.hatenablog.jpwebdesignrecipes.com 外部RSSの設定 「RSS」の検索結果 - Webデザインの勉強 3月22日開講クラス フェリカテクニカルア…
ピクトグラム(2014年1月8日)はてな 完成作品 ①A4サイズで新規作成する。②画像をダウンロードしイラストレーターで配置する。 ③全体的な指定 まずこの絵はすべて顔、目、鼻、口、胴体はほぼ共通なので左上の赤ちゃんの顔、目、鼻、口、胴体を描く。 胴体の部…
CSSスプライト用画像をフォトショップで作成(作成途中) 今回はPC用は幅960px,高さ300px タブレットは幅128px(タブレットの最小単位768pxの6分割),高さ300pxで画像を作成する。 ※スマホは画像ではなくcssで指定する。完成形 ①PC用サイズで新規作成し、新規レ…
フライヤー DTP(アクセス用パスワードあり) はてな使ったツール ペンツール、グラデーションツール、リフレクトツール、ダイレクト選択ツールの等間隔コピー、四角形をctrl +shift +矢印で幅を変える、 直線ツールの文字の端を丸くする、等間隔の破線の設定…
指定したグリッドの計算を自動でしてくれるツール www.kenjisugimoto.com http://yachin29.hatenablog.com/entry/2015/02/04/003131yachin29.hatenablog.com PC タブレット スマホ black-flag.net このサイトの記述と同じようにしてslide.jsとslide.cssに分…
ゲストブック-データ表示機能昨日作成したゲストブックのindex.phpから必要情報を入力しデータベースに溜め込みます。そして、データベースからデータを取り出すページ(list.php)を作成して入力内容がデータベースにきちんと保存書き込まれているかを確認し…
Biz vektor(無料) bizvektor.com 賢威(無料) www.seo-keni.jp ワードプレス無料ダウンロード 翔泳社『10日でおぼえるシリーズ』：ダウンロード テンプレートを使ってその中にリンクを指定してはめ込みます。 ↓ ①ダウンロードデータをWordpressのテンプレート…
ゲストブック作成 web-design-exercise.hatenablog.jp確認画面作成 web-design-exercise.hatenablog.jp データベースに値を挿入 web-design-exercise.hatenablog.jpindex.php
①ペンツールで丸を含む線を書く ②alt +shiftを押しながら書いたものを直線上に複製する ③オブジェクト→ブレンドオプションでステップ数（間にどれだけコピーをしてほしいかどうか）を指定する オブジェクト→ブレンド→作成でブレンドを作成する。 ④この状態だ…
データベースとの連携 web-design-exercise.hatenablog.jp '; // データベースの選択に失敗した場合 if( mysql_select_db( 'mydb', $myId …
phpのフレームワーク CakePHP v3.2 - 高速開発PHPフレームワーク Webデザインの勉強 1月20日開講クラス フェリカテクニカルアカデミー
SQLを使う Select文で検索(前回の内容も含む) web-design-exercise.hatenablog.jp※降順、昇順の並び替え データベース知識確認テスト（目を通しておく） web-design-exercise.hatenablog.jp メガドロップダウンメニュー web-design-exercise.hatenablog.jp
ホームページ設計思想 ★左側の方がシンプルに見えて余裕があるイメージ（最近の設計思想）で情報が選びやすい。 大企業のホームページに多い 右は少し前の物で余裕がないイメージ（少し前の設計思想）で中小企業のサイトで多かった
他のアプリケーションからのファイルの読み込み Adobe InDesign * 他のアプリケーションからのファイルの読み込み エクセルデータをIndesignで読み込む手順 Excel ファイルを読み込む方法 （InDesign CC）
昨日の続き SQL文で操作 web-design-exercise.hatenablog.jp ※idと絶対に入れることメロンが入っている行が全て削除される ★ ★キーワード用のカラムを追加する あいまい検索(LIKE) AND,OR
データベースを使ったプログラム web-design-exercise.hatenablog.jp ★ d.hatena.ne.jp d.hatena.ne.jp ★ ★データベースを作成する web-design-exercise.hatenablog.jp ※順序は講師のブログ通りです・A_Iは(オートインクリメント)を表し、自動的に1ずつid番…
全画面 900px以下 ※今回作成したものはmainの場所が真ん中にあるので、main,sub、thirdと並べてフロートをかけるだけではうまくいきません。 その問題を解消するのに以下の手順でコーディングしていきます。 ①div#containerを作り、その中にheader,div#wrapp…
セッション情報 web-design-exercise.hatenablog.jp フォーム実践（3）入力内容をメールで送信 web-design-exercise.hatenablog.jp クッキーのセッションが残っていると、データを盗まれる可能性があるinput check submit(session_destroyでsessionデータは…
