2015-01-01から1年間の記事一覧
インターンでの制作事例 第２段です。 イベントでの試食販売商品のPOP制作をしました。 前回のショップカードと同じ店舗のもので、ショップカラーの青を使用し、高級感を出すのが前提条件です。 採用していただいたものはこれ↓ ↓ 使用ソフト：Adobe Illustra…
ご無沙汰しております。 この２ヶ月弱で、ポートフォリオサイト制作や、インターンに行き始めたりと色々ありました。 インターンの内容はWeb制作メインではないのですが、バナーやポスターを作ったりもして、イラストレーターとPhotoshopをフル活用していま…
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の操作についての備忘録。 ペンツールの描画に色をつけるには アウトラインに色を塗る等するには、一手間必要。 ①ペンツールでアウトラインを書き、閉じておく → パスの状態になる ②パスの状態では何もできないため、選択範囲にすることが必要。 「…
今日の授業 レスポンシブwebデザインのサイトの作成（テスト） CSS3のアニメーション レスポンシブwebデザインのサイトは３時間半で完成した。期限より１時間オーバー。レスポンシブデザインのサイト（CASA BLANCA） CSS3のアニメーション アニメーションの…
以前のおさらい。 カスタムシェイプやテキストの形に他のレイヤーを切り抜く方法 ①背景レイヤー、カスタムシェイプツールで描いたレイヤーを用意する ②カスタムシェイプのサムネイルにカーソルを当て、CTRL＋クリックする そうすると、カスタムシェイプの輪…
授業では、CSS3のアニメーションを3種類使ったページの制作。①回転するバナー ②入れ替わり表示されるテキスト ③シャドウが変化して光っているように見えるボタン ①回転するバナー１）２枚の同じサイズの画像をli要素で並べ、position等でピッタリ重ねる ul#f…
・サイト１００選の制作 ギャラリー自体の掲載は４分の１終了。 一昨日から引き続き、framework.jsとgoogleImgSearch.jsの両立を試行錯誤中。 なかなかうまくいかない。 プラグインの変更を検討中。
今日やれたこと クライアントのサイト制作・・・トップページがほぼ完成 サイト１００選ページの制作 framework.js とGoogleImgSearch.jsを合体させたギャラリー風ページ。 選んでいないカテゴリーの画像が出てきてしまうので、スクリプトを修正する必要があ…
.htaccessを使用したスマートフォン対応サイトで使ったwebアイコンフォントの使用方法について。Font Awesome, the iconic font and CSS toolkitfortawesome.github.io １．CDNを利用する場合 内に以下のCDNのリンクを埋め込む（現在の最新バージョンの場合…
以前作った、.htaccessを使ったスマートフォン対応サイトの改修が終わりました。 ＜修正点＞ PC用のサイトのレイアウトを完成 iframeでYou Tube動画の埋め込み（PC・スマートフォン用） audioタグを使って音声ファイルを埋め込み（PC用） IE８以下でHTML5対…
□□SEOについて□□ Google Search Engineを入れて検索エンジンを呼び込む 「タイトル」「meta descriptionの１文め」「h1」「最初のp」は同一にすると検索に効果的 上位表示は、コンテンツの質を上げること以外に方法はない ちなみに、「コンテンツの質」とは…
□□本日の授業□□ レスポンシブウェブデザインでのフォントの設定について ３月上旬に作った１カラムの課題をレスポンシブ対応に改造。 石垣島観光ガイド ガラスの靴を探しています レスポンシブウェブデザインでのフォントの設定について レスポンシブウェブ…
□□本日の授業□□ WordPressのページ作成 framework.jsを使ったギャラリー風ページ framework.jsを使ったギャラリー風ページの特徴 カテゴリー毎に画像を絞って表示できる カテゴリーを複数設定できる http://kuropanther.html.xdomain.jp/framework/ 昨日のGo…
本日の授業内容 .htaccessでスマートフォン専用サイトをサーバーにアップ Google画像検索ページ風のギャラリーを作成 １.「.htaccess」によるデバイス毎の自動振り分け ＊デバイスによって閲覧するページを振り分ける 今回はスマートフォン用（SP）とPC・タ…
今日は、２件目のサイト制作を継続。 イラストレーターでのワイヤーフレームを完成し、Photoshopでカンプづくりに入る。 バナーなどのパーツを作成したのみで終了。
今日の先生のお話は主に、レスポンシブwebデザインとポートフォリオ制作のことについてだった。 レスポンシブwebデザイン WordPressで会社HPを作った後、更新できないとやめてしまう企業が増えている。WPの全盛期は終わった。 一方、スマートフォン対応にす…
投稿記事が表示されるまで投稿記事のタイトルをh1で表示する <h1></h1>投稿記事の本文を表示する <h1></h1> bodyにクラス名をつける ・・・bodyに自動でクラス名が付く <body <?php body_class(); ?>>記事ごとに区別するために、タイトル・本文をarti…</body>
テキストに沿ってWPを作っていく。 記事のインポートの方法 ・テキストのサンプルデータで用意されている記事のデータ（posts.xml）を取り込む。管理画面のツール ⇒ WordPress ⇒ WordPress Importerをインストール ⇒ プラグインを有効化 ⇒ 「ファイルを選択…
今日の授業のまとめ WPにはツリー構造がある テンプレート階層 - WordPress Codex 日本語版 WPのバックアップ方法 ①エクスポート機能 「すべてのコンテンツ」を選択すると、記事などがXMLファイルで書き出される。 そのファイルをインポートすれば同じ状態に…
昨日の授業の復習。 CSS３のanimationで背景色を変化させる画像はPhotoshopで用意。文字や太陽のシェイプの部分をくり抜き、 背景色が見えるようにする． サーバーにアップしたのはこのアドレスから見られます http://webtre.ikidane.com/css3/CSS div { ani…
今日行ったこと CSS3のアニメーションで背景を動かす スマートフォンサイトの制作 ポートフォリオ制作（動物病院のサイトのポートフォリオ）
昨日行ったこと スマートフォンサイトの制作 2件目のクライアントワークのワイヤーフレーム制作 4ページまでほぼ完成。 のこり2ページ
スマートフォン用サイトのサイズについて ２つのサイズがある CSSピクセル（csspx） ：ディスプレイのサイズ デバイスピクセル（dpx）：解像度のサイズ Retinaディスプレイ登場以前はこの２つは同じだった。＜iPhone3と、Retinaディスプレイ搭載iPhone4の比…
6月19日 今日のWORKスマートフォン専用サイトＨＴＭＬ <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件目のクライアントが決まり、制作を開始した 昨日はサイト構成案に了承して頂いたところである。 今日からワイヤーフレーム制作に入る。 目安として1ヶ月（7月20日までに）で完成させたい。
フォームを送信後に入力フォームをクリアにする 以下のコードによって、送信完了すると、セッションファイルに保存されていたデータが破棄されるようになる。 【send.php】 $_SESSION = array();unset($_SESSION['name']);unset($_SESSION['email']);unset($…
XAMPP、MAMPでPHPを始める前にやっておくべきなのですが、php.iniファイルのデフォルトの設定変更があります。 主に、文字コード設定とタイムゾーンの設定です。 設定を変更する際にはXAMPP、MAMPを一旦停止しておきましょう Windows・XAMPP編 （v3.2.1） ○X…
今回やるのは、入力が終わって確認画面で入力ミスに気づいたときのための２つのこと。 １．「入力画面に戻る」ボタンを追加する ２．入力画面で入れた値を表示させておく １．「入力画面に戻る」ボタンを追加する メールアドレス間違えちゃった・・・ だけど…
フォームが送信されたらメールが届くようにする メールを送る関数mb_send_mail() mb_send_mail(’①メールアドレス’，’②メールの表題’，’③メールの内容’) ①通知してほしいメールアドレス。 ②お知らせメールの件名 ③お知らせメールの本文。ここに入力したものが…
