2013-01-01から1年間の記事一覧

鏡面反射

久しぶりの更新です。9月に無事Web制作会社に就職が決まり、バタバタしていたのも少しだけ落ち着きました。久しぶりにPhotoshopを使うと、忘れていることが沢山あってアセアセ。。 とりあえず、忘れないように書留めておきます。 ◆このアイコンに鏡面反射を…

色彩・配色

webサイトを制作するにあたって、大切な色の決め方。Illustratorを使った色の決め方。ウィンドウ→スウォッチライブラリ この中から自分の探しているイメージを探す明るいポップな感じのものを探している場合は、 スウォッチ(明)の中から(cs2を使用) 使用…

プラグインを使ってパン屑リストを表示させる(追記)

5/18日の記事で、Prime Strategy Bread Crumbを導入した件について書いたのですが今回portfolioを作成している時に引っかかった事があったので書き留めておきます。前回の記事で、下記のコードを貼付けるとパン屑リストが表示できて、トップページにはパン屑…

RSSフィードではてなブログの情報を出力する。

functions.phpに下記のコードを記述。 http://d.hatena.ne.jp/ユーザー名/rss がrssのアドレスなので、 自分のユーザー名を入れたurlをウィジェットメニューのurlに入力するだけ。そうすると、サイドバーにちゃんと反映されました。

gifアニメを作成。

まずはIllustraterでイラストを書く。 ファイル→書き出し→ファイルの種類をphotoshop(psd)にする。 Photoshopを開く。 開く→イラレで作ったpsdデータを開く。ウィンドウ→アニメーション(CS5) をクリック。CS6の場合はタイムライン。秒数を指定する。web及…

[]スクリーンキャプチャを撮る便利拡張機能

Chromeの拡張機能 web page screen shot どのようなwebページでも素早くシンプルな操作でJPEGファイルに保存できます。webページを丸ごとキャプチャ出来る初めての拡張機能です!!優れもの!! https://chrome.google.com/webstore/detail/webpage-webcam-s…

クライアントさんのレンタルサーバー

現在、ローカル環境でwordpressサイトを製作中なのですが、そろそろ本サーバーで動作確認しながらやっていかなきゃなー。と思い、どんな方法でクライアントさんに提出しようか考えていた。 クライアントさん的には、サーバー料金があまりかからないものを希…

Jqueryのスライドショー(レスポンシブ対応)を導入

現在制作しているサイトのTOPページに、jqueryのスライドショーを入れたいと思い、探してみたところ良さそうなプラグインを発見した。 ResponsiveSlides.js こんな感じで動きます http://responsiveslides.com/ <特徴> ○軽量 ○レスポンシブデザイン対応 ○コ…

プラグインを使ってパン屑リストを表示させる

サイト制作を進めていくにあたって、パン屑リストはやっぱり必要だなーと思い、 プラグインを探してみた。はじめ、Breadcrumb NavXTというプラグインを使おうと思ったのだけど、 もうちょっとシンプルなのないかなー。と探してみたら良いプラグインを発見!P…

2作目のサイト

2作目のサイトのクライアントさんが決定しました。マッサージサロンと美骨矯正をメインに行っているTunas therapy さん。サイトは自分で更新できるようにwordpress で作成して欲しい。との依頼。こちらは、実はまだ本格的に活動している訳ではなく、月に数…

Dreamwaverを使ってサイト管理

サイト管理 ↓ 新規作成 ↓ サイト名(wp) ローカルサイトフォルダ(C:\xampp\htdocs\wp\) リモートのチェックを外して、テストにチェックを入れる DWの左下の ローカルビューをテストビューに変更すると、 フォルダの色がピンク色になる。とりあえずこれ…

ローカル環境でwordpressを使用する一連の流れ

XAMPPでローカルにテストサーバを作成するところから始める。 XAMPPが既にインストールされている場合Webブラウザで「http://localhost/」と入力するとXAMPPの初期画面になります。 php My Adminをクリック ↓ ログインする。 ↓データベースを作成する。…

基本

スマホサイトを作成するにあたって必要になるのがHTML5とCSS3。HTML5セマンティックコーディングhtmlのタグを見たときに、文書構造がわかるもの。 昔は、CSSがなかったためhtmlで見え方も指定していた。(テーブルを使用) 現在は、htmlでは文…

変数と定数の大きな違い

○変数はプログラム内で入っているデータ(値)を変えることができる。 ○定数はプログラム内でデータ(値)を変えることができない。

定数とは??

定数も同じくデータ(値)を入れる箱のようなもの。 定数に名前をつける時は「$」は使わない 一般的には大文字を使って表す。 定数のルール 1、定数は、先頭に『$』記号が必要ない。 2、定数を定義することができるのはdifine関数のみ。 (単なる代入(=)…

変数には既に定義されているものがある。

$this $GLOBALS $SERVER $GET $POST $COOKIE $FILES $SESSION など。これらは既に定義されているものなので、同じ名前はつけられない。

変数とは?〜追記〜

プログラムの中でデータ(値)を入れておく箱のようなもの。「$」から始まる、「$a」とみたら、$aという名前のついた箱をイメージする。 変数のルール 1、変数は、ドル記号「$」から始まる。 2、変数名は大文字と小文字を区別する。 3、変数名に使える…

◆ダブルクォーテーションとシングルの違い

my name is Tatsuomy name is Tatsuostring(17) "my name is Tatsuo"きちんと反映される。シングルを使うと反映しない。

◆数字をつなげる

654654int(654)

◆文字列を繋げる

PHPで数字を使うときには、文字列なのか、数字なのかを意識して書くこと!!!!

PHP 基礎

HTML、CSS、javascript(jquery) は、ブラウザで動く。 HTML→webサイトを見た人から意見をもらったり、会員登録したりすることができない。 ユーザの入力に対して応答するやり取りができない。 PHPは、サーバで動く。 PHP→ユーザの入力に対して応答するやり取…

Youtubeを添付する

(パスワードがかかっているもの以外は添付可能。) 1.share this videoの横にある項目をクリック2,videoサイズを変更すると、アスペクト比が崩れるので注意が必要。3,コード内でサイズの変更ができる。(widthとheight)

GoogleマップをWebサイトに添付する

1,googleのサイトに住所を入力2,左側にあるリンクマーク(鎖マーク)をクリック3,下のほうのコードをコピー4,コードに貼り付け。とを変更することによってマップのサイズを指定することができる。

Photoshopでカンプを作成する。

手書きのラフスケッチをもとに、Photoshopを使ってカンプを制作した。 今回気をつけたことは以下。○和風っぽい感じに。 ○黒を使用。 ○ファーストビューに必要な情報をおく。 ○興味を持ってもらえるような見出し。 カンプを作成したらよりサイトが現実的な感…

カンプを作成

初めてのHP作りということで手探り状態の毎日です。HPを制作する流れの中で重要なのが「カンプ」というもの。カンプって何??カンプとは、HP制作において、制作物の仕上がりを具体的に示すために作られる見本のこと。 写真や、色、デザインなど、実際のHPと…

HP制作

前回HP作成のためにまとめた情報を、 Cacooを使用して、 「要件定義書」 「ページ構造設計」 「サイト構造設計」を作成。 こんな感じで作成したものを、クライアントさんに見て頂き修正点や希望をヒアリングする。これを元にPhotoshopでカンプを作成する。

HP作成の為の情報をまとめる

今回作るサイトは居酒屋のPRホームページ ホームページの目的;お店のPRをして新規顧客をGETしたい。 (現在、広告宣伝していないので店の前を通ったお客さんがメイン。) 検索ワード;蒲田 串焼き 始発まで お店の売り;始発まで営業しており、年中無休。 …

HTMLの中にCSSを書くテンプレート

<html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの中にCSSを書き込む</title> <style type= "text/css"> /* css reset */ body { font-family:"メイリオ","MS Pゴシック", Tahoma, Arial, sans-serif; line-height: 1.7; color: #333; font-size: 12px; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, …</meta></head></html>

CSSのみ作成する場合のテンプレート

@charset "utf-8";/* css reset */ body { font-family:"メイリオ","MS Pゴシック", Tahoma, Arial, sans-serif; line-height: 1.7; color: #333; font-size: 12px; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p…

HTMLのみ作成する場合のテンプレート

<html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLのテンプレート</title> <link rel="stylesheet" href="css/style.css" media="all"> </head></html>