くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[インターン]POP制作

インターンでの制作事例 第2段です。 イベントでの試食販売商品のPOP制作をしました。 前回のショップカードと同じ店舗のもので、ショップカラーの青を使用し、高級感を出すのが前提条件です。 採用していただいたものはこれ↓ ↓ 使用ソフト:Adobe Illustra…

[インターン]ショップカード制作

ご無沙汰しております。 この2ヶ月弱で、ポートフォリオサイト制作や、インターンに行き始めたりと色々ありました。 インターンの内容はWeb制作メインではないのですが、バナーやポスターを作ったりもして、イラストレーターとPhotoshopをフル活用していま…

[HTML5]ルビ付き・縦書きテキスト

HTMLでルビをつける <ruby>香水<rt>こうすい</rt></ruby>縦書きにする ※webkit系とIEのみ Safariは非対応 -webkit-writing-mode: vertical-rl;vertical-rl は右から左への順番 vertical-lr は左から右テキスト <p><ruby>君<rt>きみ</rt></ruby>が<ruby>行<rt>ゆ</rt></ruby>く<br> <ruby>道<rt>みち</rt></ruby>の<ruby>長手<rt>ながて</rt></ruby>を<br> <ruby>繰<rt>く</rt></ruby>り<ruby>畳…</ruby></p>

[Photoshop]備忘録・ペンツールの描画に色をつけるには

Photoshopの操作についての備忘録。 ペンツールの描画に色をつけるには アウトラインに色を塗る等するには、一手間必要。 ①ペンツールでアウトラインを書き、閉じておく → パスの状態になる ②パスの状態では何もできないため、選択範囲にすることが必要。 「…

[RWD][CSS3]レスポンシブデザインのサイト制作・animationで画像を動かす

今日の授業 レスポンシブwebデザインのサイトの作成(テスト) CSS3のアニメーション レスポンシブwebデザインのサイトは3時間半で完成した。期限より1時間オーバー。レスポンシブデザインのサイト(CASA BLANCA) CSS3のアニメーション アニメーションの…

[Photoshop]カスタムシェイプによる切り抜き

以前のおさらい。 カスタムシェイプやテキストの形に他のレイヤーを切り抜く方法 ①背景レイヤー、カスタムシェイプツールで描いたレイヤーを用意する ②カスタムシェイプのサムネイルにカーソルを当て、CTRL+クリックする そうすると、カスタムシェイプの輪…

[CSS3]animationをつかった様々な動き

授業では、CSS3のアニメーションを3種類使ったページの制作。①回転するバナー ②入れ替わり表示されるテキスト ③シャドウが変化して光っているように見えるボタン ①回転するバナー1)2枚の同じサイズの画像をli要素で並べ、position等でピッタリ重ねる ul#f…

7月13日 サイト100選の制作

・サイト100選の制作 ギャラリー自体の掲載は4分の1終了。 一昨日から引き続き、framework.jsとgoogleImgSearch.jsの両立を試行錯誤中。 なかなかうまくいかない。 プラグインの変更を検討中。

7月11日

今日やれたこと クライアントのサイト制作・・・トップページがほぼ完成 サイト100選ページの制作 framework.js とGoogleImgSearch.jsを合体させたギャラリー風ページ。 選んでいないカテゴリーの画像が出てきてしまうので、スクリプトを修正する必要があ…

[その他]Webアイコンフォント「Font Awesome」

.htaccessを使用したスマートフォン対応サイトで使ったwebアイコンフォントの使用方法について。Font Awesome, the iconic font and CSS toolkitfortawesome.github.io 1.CDNを利用する場合 内に以下のCDNのリンクを埋め込む(現在の最新バージョンの場合…

[サイト制作]「.htaccess」を使ったサイト完成

以前作った、.htaccessを使ったスマートフォン対応サイトの改修が終わりました。 <修正点> PC用のサイトのレイアウトを完成 iframeでYou Tube動画の埋め込み(PC・スマートフォン用) audioタグを使って音声ファイルを埋め込み(PC用) IE8以下でHTML5対…

[SEO]SEO対策について

SEO

□□SEOについて□□ Google Search Engineを入れて検索エンジンを呼び込む 「タイトル」「meta descriptionの1文め」「h1」「最初のp」は同一にすると検索に効果的 上位表示は、コンテンツの質を上げること以外に方法はない ちなみに、「コンテンツの質」とは…

[RWD]レスポンシブウェブデザインのフォントの設定

□□本日の授業□□ レスポンシブウェブデザインでのフォントの設定について 3月上旬に作った1カラムの課題をレスポンシブ対応に改造。 石垣島観光ガイド ガラスの靴を探しています レスポンシブウェブデザインでのフォントの設定について レスポンシブウェブ…

framework.jsを使ったギャラリー風ページ

□□本日の授業□□ WordPressのページ作成 framework.jsを使ったギャラリー風ページ framework.jsを使ったギャラリー風ページの特徴 カテゴリー毎に画像を絞って表示できる カテゴリーを複数設定できる http://kuropanther.html.xdomain.jp/framework/ 昨日のGo…

[RWD]Google 画像検索ページ風ギャラリー

本日の授業内容 .htaccessでスマートフォン専用サイトをサーバーにアップ Google画像検索ページ風のギャラリーを作成 1.「.htaccess」によるデバイス毎の自動振り分け *デバイスによって閲覧するページを振り分ける 今回はスマートフォン用(SP)とPC・タ…

[サイト制作]クライアントワーク2件目

今日は、2件目のサイト制作を継続。 イラストレーターでのワイヤーフレームを完成し、Photoshopでカンプづくりに入る。 バナーなどのパーツを作成したのみで終了。

[サイト制作]ポートフォリオ制作について

今日の先生のお話は主に、レスポンシブwebデザインとポートフォリオ制作のことについてだった。 レスポンシブwebデザイン WordPressで会社HPを作った後、更新できないとやめてしまう企業が増えている。WPの全盛期は終わった。 一方、スマートフォン対応にす…

[WordPress]記事ページを表示させる

投稿記事が表示されるまで投稿記事のタイトルをh1で表示する <h1></h1>投稿記事の本文を表示する <h1></h1> bodyにクラス名をつける ・・・bodyに自動でクラス名が付く <body <?php body_class(); ?>>記事ごとに区別するために、タイトル・本文をarti…</body>

[WordPress]WPもろもろ

テキストに沿ってWPを作っていく。 記事のインポートの方法 ・テキストのサンプルデータで用意されている記事のデータ(posts.xml)を取り込む。管理画面のツール ⇒ WordPress ⇒ WordPress Importerをインストール ⇒ プラグインを有効化 ⇒ 「ファイルを選択…

[WordPress]

今日の授業のまとめ WPにはツリー構造がある テンプレート階層 - WordPress Codex 日本語版 WPのバックアップ方法 ①エクスポート機能 「すべてのコンテンツ」を選択すると、記事などがXMLファイルで書き出される。 そのファイルをインポートすれば同じ状態に…

[CSS3]animationで背景色を変化させる

CSS

昨日の授業の復習。 CSS3のanimationで背景色を変化させる画像はPhotoshopで用意。文字や太陽のシェイプの部分をくり抜き、 背景色が見えるようにする. サーバーにアップしたのはこのアドレスから見られます http://webtre.ikidane.com/css3/CSS div { ani…

[サイト制作]

今日行ったこと CSS3のアニメーションで背景を動かす スマートフォンサイトの制作 ポートフォリオ制作(動物病院のサイトのポートフォリオ)

[サイト制作]スマートフォンサイト制作

昨日行ったこと スマートフォンサイトの制作 2件目のクライアントワークのワイヤーフレーム制作 4ページまでほぼ完成。 のこり2ページ

[スマートフォンサイト]スマートフォンサイト制作の前提の知識

スマートフォン用サイトのサイズについて 2つのサイズがある CSSピクセル(csspx) :ディスプレイのサイズ デバイスピクセル(dpx):解像度のサイズ Retinaディスプレイ登場以前はこの2つは同じだった。<iPhone3と、Retinaディスプレイ搭載iPhone4の比…

[スマートフォンサイト]

6月19日 今日のWORKスマートフォン専用サイトHTML <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format description" content="telephone=no, email=no"> <link rel="apple-toch-icon.png" href="apple-touch-icon.png"> <…</link></meta></meta></meta></head></html>

[サイト制作]2件目webサイト制作開始しました

2件目のクライアントが決まり、制作を開始した 昨日はサイト構成案に了承して頂いたところである。 今日からワイヤーフレーム制作に入る。 目安として1ヶ月(7月20日までに)で完成させたい。

[PHP]入力フォーム⑦

PHP

フォームを送信後に入力フォームをクリアにする 以下のコードによって、送信完了すると、セッションファイルに保存されていたデータが破棄されるようになる。 【send.php】 $_SESSION = array();unset($_SESSION['name']);unset($_SESSION['email']);unset($…

[PHP]php.iniファイルの初期設定(XAMPP、MAMP)

PHP

XAMPP、MAMPでPHPを始める前にやっておくべきなのですが、php.iniファイルのデフォルトの設定変更があります。 主に、文字コード設定とタイムゾーンの設定です。 設定を変更する際にはXAMPP、MAMPを一旦停止しておきましょう Windows・XAMPP編 (v3.2.1) ○X…

[PHP]入力フォーム⑥

PHP

今回やるのは、入力が終わって確認画面で入力ミスに気づいたときのための2つのこと。 1.「入力画面に戻る」ボタンを追加する 2.入力画面で入れた値を表示させておく 1.「入力画面に戻る」ボタンを追加する メールアドレス間違えちゃった・・・ だけど…

[PHP]入力フォーム⑤ フォームが送信されたらメールが届くようにする

PHP

フォームが送信されたらメールが届くようにする メールを送る関数mb_send_mail() mb_send_mail(’①メールアドレス’,’②メールの表題’,’③メールの内容’) ①通知してほしいメールアドレス。 ②お知らせメールの件名 ③お知らせメールの本文。ここに入力したものが…

[PHP]入力フォーム④

PHP

入力フォーム2−3 送信後に表示される画面 send.phpで送信後の内容を表示する画面を作成する。 ①まずは、表示する器となるHTMLから。 【send.php】 <body><h1>メール送信画面</h1><p>以下の内容で送信されました。</p><table><tr><th>お名前:</th><td></td></tr><tr><th>メールアドレス:</th><td></td></tr><tr><th>お問い合わせ内容:</th><td></td></tr></table><p><a href="index.php">入力画面へ戻る</a></p></body> ②…

[PHP]データの送信方式

PHP

PHPでのデータの送信方法(メソッド)は3つ。 GET ブラウザーからサーバーにデータを渡すときに、内容(name属性の値など)をURLにつけて送られる。 個人情報の場合は内容が丸見えになるのでセキュリティ上データの送信には不向き $_GET変数を使う…

[PHP]入力フォーム③

PHP

入力フォーム2 名前、メールアドレス、お問い合わせ内容を記入できるフォームを作成します。 今回は入力確認画面、送信後の画面、そして指定されたアドレスへの通知メールも実装します。 使用するファイル・index.php(入力フォーム) ・check.php(確認画…

[PHP]入力フォーム②

PHP

フォーム1−4 入力フォームの中に値が入っているかどうかをチェックする isset関数を使う ① if (isset (関数名) === true) { ※「=== ture」は省略可能で echo '入力されています'; if (isset (関数名)) { 〜〜 とできる} else { echo '入力されていません';…

[PHP]入力フォーム①

PHP

HTMLの<form>で取得したデータをサーバーに送り、PHPで処理することができる。 流れ ユーザー:①HTMLフォームに書き込み、送信 ↓ サーバー:②メモリで受け取る ③Apacheで処理 ④PHPが結果を返す ※処理後、メモリからデータは消える ↓ ⑤結果をHTMLでユーザーに返す </form>…

[PHP]PHPの初歩知識②

PHP

$変数 = ’文字列’ ・PHPの変数は$マークで始まる ※Javascriptでは「var」に当たる ・変数は半角英数に限る。ただし最初の文字に数字は使えない ・= は代入演算子 連結演算子は「.」 ※Javascriptでは「+」に当たる 改行を入れる場合「”\n”」 ※Windowsで…

[PHP]テストサーバーの設定

PHPのプログラムを開発し、ローカルサーバーで実行する為の環境設定を行う。 使用するソフトウェア:Dreamwever、XAMPPまたはMAMP ※XAMPPまたはMAMPはインストール済みとします。 ①XAMPPまたはMAMPを起動し、ApacheとMySQLをOnにする 緑色に変わったらONにな…

faviconの作成方法

「favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である」(Wikipediaより) 現在鋭意作成中のウェブサイト用につくってみました。 そもそも、なぜfavic…

[PHP]PHPの初歩知識①

PHP

PHPとは? 「PHP Hypertext Preprocessor」の略 プログラミング言語 サーバー上で動作し、webページを動的に作成する ファイルの拡張子は「.php」 開発環境 PHPの開発に必要なもの ①サーバー(ApacheがPHPの動作に必要) レンタルサーバーがなくても、コンピ…

ベクトルマスクを利用した画像の合成

Photoshop CS5で、ベクトルマスクを使用した、下の2枚の画像の合成写真を作ります。 完成画像 1)ツツジの画像を配置します。レイヤーを右クリックして「スマートオブジェクト」に変換します 2)向日葵の画像を配置します。レイヤーを右クリックして「スマ…

[サイト制作]バージョン2完成

動物病院のサイト制作で、バージョン2を制作しました。 「信頼感」「優しく親しみやすい」この2つのキーワードを表現できる雰囲気を更に追求しました。 キーカラー:緑 アクセントカラー:オレンジ 昨日の先生のアドバイスでは、「背景画像も工夫の余地あ…

[サイト制作]第1号Webサイト完成

約1ヶ月取り組んでいた動物病院のサイト制作が、一旦完成しました。 コンセプト: 「いつでも親身になって相談できる、私たちの身近にある、町のお医者さん」 トップページ 2ページ目 フッター部分 <ポイント・気をつけたこと> 色・・・清潔感のある白を…

Webサイト制作

講義が3ヶ月目に入り、webサイト制作に入っています。 実在する動物病院のサイトを作ることになり、ラフスケッチからはじまって、今はコーディング段階に入っています。 最初は5ページの予定でしたが、7ページになりそうです。 今日は2ページ目、3ページ目…

[レスポンシブ]レスポンシブWebデザイン④

スマートフォン用のメインコンテンツとフッターの設定編。 設定前はこんな状態です。 メインコンテンツの設定(スマートフォン用) ①テキストと画面の空きがなく、ギリギリなので空きをつくります。 PC用を想定するならば全体の幅は一定なのでpaddingを設定…

[レスポンシブ]レスポンシブWebデザイン③

ヘッダーとナビゲーションの設定をレスポンシブWebデザイン(以下「レスポンシブ」)用に行います。 <ヘッダー> header ヘッダー部分はレスポンシブ用の設定は特になし。 ヘッダーテキストを中央揃えにする ロゴ上下の空きを24pxにする 「豆はカラダにいい…

[レスポンシブ]レスポンシブWebデザイン②

あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整するのがレスポンシブWebデザイン。 次にCSSを書いていきます。レスポンシブWebデザインでは、CSSの記述効率とファイルサイ…

[レスポンシブ]レスポンシブWebデザイン①

「レスポンシブ」とか色々な呼び方がありますが正確な名前は「レスポンシブWebデザイン」。 ASCIIさんの「ゼロから始めるレスポンシブWebデザイン入門」に沿って、基礎から学んでいきます。概念などはおいおい書いていくとして、今回はいきなりレスポンシブW…

[jQuery]タブパネル②

タブパネルのテキストだけを改変(修正・更新)したい場合、予めテキストだけのファイルを読み込むようにしておけば、HTMLを編集せずに更新ができます。 テキストファイルのみを変更すれば、更新も簡単! 1、テキストの入っていない空のタブパネルを作りま…

[jQuery]タブパネル①

Yaho!!の検索バーの真下に使われているようなタブパネルをつくります まず、HTMLとCSSを書きましょう [HTML] <div id="container"><ul class="tab"><li><a href="#tab1" class="selected">JavaScript</a></li><li><a href="#tab2">CSS</a></li><li><a href="#tab3">HTML</a></li><li><a href="#tab4">jQuery</a></li><li><a href="#tab5">PHP</a></li></ul></div>

[デザイン]デザインを既存サイトから学ぶ

GWからウェブサイトのラフデザインのスケッチを始めた。 デザイン力を上げるには有効な方法だと先生がおっしゃっていたからだ。 何気なく見ているウェブサイトにも、色々な発見がある。 ”このフォントは何だろう?webフォントかな?後で調べてみよう” ”きっ…