web制作講座
本日は…■モバイルファーストのレスポンシブサイトを制作する fontのショートハンド＞サイズ/line-height font-familyスマホ版データ ここを見本に後日制作。＜ポイント＞ ・display tableを使って横並びにしてやる方法がある →ulに対して指定してやる （disp…
本日は…■google noto font ＜webフォントとフリーフォント＞ 印刷には使えないwebフォント（true type） フリーフォントはオープンタイプであることが多い。 マルチプルマスター：ウェイトを自分で変えられる（trueだとできる。例：googleフォント）→今はも…
本日は…■先日の卒業生のポートフォリオサイト講評 ＜ポートフォリオ制作の上で大事なこと＞ ・企業サイト制作については詳しく、別立てでやるくらいのことをしてもアピールすべき ・制作時間と使用ツールくらいはクリックしなくても一覧から見られるようにし…
本日は…■講師ブログピックアップ その① CSSだけでロールオーバー（8/3の記事）ロールオーバー - Webデザインの勉強 風姿花伝 | 2月20日開講クラスd.hatena.ne.jpその②RSSリーダーでよそのブログを自分のサイトで読み込ませる（9/8の記事）RSSを取得：simplex…
本日は…■css3のanimationを使おうの回・バナーを回転させて、二枚の画像を交互に表示する ・ニュースティッカーで文字表示 ・ボタンを光ってる雰囲気にする アニメーションを使うの3パターン。 基本の形式は、 #front { animation: flipFront 5s infinite al…
本日は…■wpをローカル環境からサーバーへアップする方法基本的には ・ローカルの記事をエクスポート ・サーバーにwpのデータベースを作る ・ローカルサーバーに置いてある uploadsとmythemeを、 wp設置予定のアドレスにフォルダごとFTP接続でアップ ・ローカ…
本日は…■スマホ対応続き※スライダーの画像が重いので要圧縮。 画像のサイズはまだ検討中（下がはみ出ている。。。） スマホのフル画面表示の比率？？●ドロワーメニュー 参考サイトJSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニ…
本日は…■スマホサイト化継続 進捗としてはテキスト導入、背景の上に乗せる、など順調？＜色々参考サイト備忘録＞スマートフォンデザインまとめサイト | Clotilde Bistrot | thinkthingthinkthing.net梅花酵母 | 石見銀山の梅から授かった自然酵母www.umehana…
本日は…■レスポンシブサイト制作■WPで企業サイトを作る■ポートフォリオサイト制作上から…レスポンシブサイト化は餃子のサイト。 トップページの画像を作成&配置、今後テキストを入れていく作業 今日はスライダーとバナー作成。明日にはトップは完成予定。WP…
本日は…■PHPでニュースを表示する が、途中で企業サイトのレイアウト崩れを発見し、至急対応の後ドロップアウト。ということでPHPのお勉強はここまで…。 中途半端。 以下覚書■WPの本を一冊献本で頂いたのでWPサイトをもう一つ作ってみることに ・ｗｐサイト…
本日は…■上位表示対策の話 titleとh1と最初のpは一致させると上位になる。 機械的に一致させるほうが上位になる可能性が高い。■ツリー構造 h1--h2 -h2 -h2 -h3 -h3 親テーマに対する子テーマがちゃんと入っているか。⇒当たり前の文書構造がちゃんと出来てい…
本日は…■前に作ったサイトのレスポンシブ化①石垣島観光ガイド 基本的に背景画像の指定と、文字サイズの指定が大事。font-sizeは html {font-size: 62.5%;} を基準とする。 これによって基本のフォントサイズが10pxになるので、後の指定が楽。 以下 body{ fon…
本日は… ■午前中はwordpressの自習 本日8章b1まで■午後はポートフォリオに使えそうなjQueryプラグインの話などIsotopeisotope.metafizzy.co 一世を風靡したソートするjQuery。 これの簡易版Creating a “Filterable” Portfolio with jQuery - Tuts+ Code Tuto…
本日は…■メディアクエリ <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRING} !mode=pc RewriteRule ^$ /pc/sp/ [R,L] Header set Vary User-Agent </IfModule> ■詳しい解説 RewriteCond %{HT…
本日は…■午前中はwordpressでテンプレートを編集■午後はポートフォリオの作り方 …の前に週かつをするうえでの話。 これからはbootstrapを使う方向にシフトしていっている。（仕事的に） wordpressは若干衰退傾向に…。（イニシャルコストもかかる） ●sassの話…
本日は…■基礎講習 対人スキルについては思い当たる節が多すぎて要反省。■自習内容 午後は自習だったので、htaccessのためのPC用ページを作成。 4月に製作した多肉のサイトをリニューアルして、jQueryなどを導入して制作予定。 SPサイトはほぼ完成済み 週末予…
本日は…■wordpressのテンプレートをいじる教科書に沿って記事のphpとcssデザインをしていく <body <?php body_class(); ?>> phpで記事ごとにclass名をつける <article <?php post_class(); ?>> articleも同じ→後に呼び出すときのために名前をつける ※投稿画面で記事を投稿する際の注意 改行をEnterで行うと、段落＝Pで形</article></body>…
本日は…■午前中は先生のありがたいお話 ・web業界的にディレクター不足である ・勉強し続けない人間は業界に入るな…。■ワードプレスのセッティング dwとの関連付けなども。自分で一冊やることもできるはず。 ■リンクまとめたサイトのアドレス 覚書 ritzstar7…
本日は…■午前中はスマホサイトを作成後日追記■午後は… 背景画像をanimationでアニメーションさせる ⇒夕暮れから夜、朝焼けへと変化させたりできるここも後日追記■Psで文字をくりぬいて、上記のアニメーションした背景を透過する… http://ritzstar777.chips.j…
本日は…■お休みなのでポートフォリオ（カンプ兼紙）制作■スマホサイトのための写真撮影■餃子サイトのちょっとした更新
本日は…■昨日の復習 ＜用語解説＞ ベンダープレフィックス…ベンダー（販売元）＋プレフィックス（接頭詞） つまり命令の頭に、メーカーごとにつけてやる言葉（詞）のこと。 -moz- /* Firefox */ -webkit- /* chromeとsafari */ -o- /* Opera* -ms- /* IE */ …
本日は…■レスポンシブ デザイン続き 楽しいおかずのサイトのmサイズについて、可変にしてみる #container { max-width: 96.875%;/*content imgにかけた隙間を100から引いたもの*/ margin: 0 auto; overflow: hidden; } .content { max-width: 33.33%;/*conta…
本日は…■データベースの続き こんな感じのものを生成していきたい。昨日はタイトルと日付が一気に入ってくるところまで。本日はその続きで、セキュリティをかけつつ。 index.php
本日は…■PHPテスト■データベース 配列 公式：foreach(配列名 as 値){} '; } ※$vは関数の中で初めて定義されている ※$vのさすものは、配列の値★forは繰り返し的な意味
本日は…■phpによるフォームのテスト index.php（送信フォーム）とcheck.php（受け手）についてのテスト index.phpで大事なこと⇒action（どこに飛ばすか） <form action="飛ばし先.php" method="post"> <p><label for="name">名前</label><input type="text" id="name" name="name"></p> 中略 <p><label for="opinion">ご意見</label><textarea id="opinion" name="opinion"></textarea></p></form>
本日は…■PHP復習index.phpにフォームを作成 <form action="post_resieve.php"method="post"> <table> <tr> <th><label for="name">お名前</label></th> <td><input type="text" id="name" name="name"></td> </tr> <tr> <th><label for="message">お問い合わせ内容</th> <td><textarea id="message" name="message"></textarea></td> </tr> </table>…</form>
本日は…■講義が休みなので自習…の覚書ポートフォリオサイトのための素材選び 同じくサイト構成を考える…サイト100選記事のアップ
本日は…■レスポンシブデザイン メディアクエリ（前日参照）以外の方法 ①2カラムで片方だけ固定値にする場合… 1400pxだとこんなかんじに 980px以下でも写真のサイズは変わらない ⇨残したいカラムは常に固定値(写真では300px) 残っている部分を１００％、マイ…
本日は…■サイトに色々なSEO対策を施す ●前提として… <meta name="description" content="ここに説明文を載せていく"> descriotionは、各ページきちんと変えてあげたほうが効果が高い <title>にキーワード <h1>にもキーワード このあたりははずせない。 ※h1に画像を持ってきたい場合も、テキストを書いて100%ずらしなどで対応 ●モバイ</h1></meta>…
本日は…■昨日の残りを解説 check.phpで というシリーズを各項目分作成して、エラーメッセージをセッションに格納していく。 ⇒エラーのときindex.phpにこれを呼び出すようにしてやる で、関数を作る。 あとはエラーを表示したいところに$error_nameを代入し…
