初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

初心者のWEBデザイン

WordPress 仮想環境からデータをバックアップする。

WordPressをバックアップする場合に必要なファイルは3つです。 1、xmlファイル (記事データ、投稿ページ、画像データ、) ダッシュボード上で編集したデータWordpressのアカウントでログイン後、 ダッシュボード→ツール→エキスポート→全てのコンテンツ ダウ…

CSS CSS3でグラデーションをかけてみる

以前作成した切り抜き画像を使ってCSS3でグラデーションのように 光らせてみます。http://bellsmarket.hatenablog.com/entry/2015/04/13/194100bellsmarket.hatenablog.com CSS3での「animation」はかなり重くなるのでスマートフォンだと 動かなくなる可能性…

Flash 文字が徐々に表示されるアニメーションを作成する

Illustratorで作成したブラシ風文字をFlashでアニメーションにします。 文字の作り方はこの記事を参照してください。http://bellsmarket.hatenablog.com/entry/2015/05/09/144418bellsmarket.hatenablog.com Illustratorで作成したオブジェクトを全て選択し…

Illustrator 文字をブラシ風に仕上げる

下記の画像のように文字をブラシ風にする方法を記述します。 Illustrator 新規作成→プリント→作成 550px × 400pxテキストで任意の文字を記述します。 文字のままだと編集が出来ないので全て入力が終わったら メニュー→書式→アウトラインを作成を実行します。…

PHP wordpressをDreamweaverと連携させる

wordpressとDreamweaverの連携について記述します。wordpressで記事の編集をする場合にダッシュボードから 行うのはとても手間がかかります。Dreamweaverから編集することでミスの発見やコーディングを 手早く行うことができます。連携する前にwordpressの設…

HTML 「.htaccessファイル」を使った自動振り分け

PC用とスマフォ用のサイトをそれぞれ作成したときに、 ユーザーを各デバイス用のサイトに誘導出来るように したものが「.htaccessファイル」です。これはユーザーエージェントを読み取りPCで見た場合にはPC用サイト、 スマフォで見た場合にはスマフォ用サイ…

HTML CSS バックグラウンドに動画を使用する

最近動画がバックグラウンドに流れていてなおかつコンテンツを 見せるサイトが多々あるかと思います。その作り方を記述します。HTML5のvideoタグを使用します。動画を用意します。 下記が無料でクオリティーが高い動画が ダウンロードできます。poster属性は…

Flash FlashでjQuery風スライドショーを作成する

jQueryでも作成できますが今回はあえてFlashに慣れる為に Flashでスライドショーを作成してみます。まずPhotoshopで複数の写真を同じファイルにまとめます。 サイズはFlashのデフォルトサイズの550px × 400pxで作成しておきます。画像をまとめる方法はこちら…

SQL UPDATE文

SQLの UPDATE文を記述します。これもその名の通り更新するSQL文になります。元々値がある場合は上書きされ、値の登録がない場合には 新たに入力したら値を登録します。構文は下記になります。 UPDATE "テーブル名" SET カラム名 = '入力したい值' WHERE カラ…

SQL INSERT文

SELECT文に続いてINSERT文を記述します。INSERT文はテーブルにあるカラムに新たな値を追加したい場合に 使用するSQL文です。記述方法はつぎになります。 INSERT INTO テーブル名 (カラム名1,カラム名1......)VALUES ([value-1],[value-2]......); animal_d…

CSS 高さを%で指定する

幅はCSSで簡単に%で指定できますが高さは普通に%で指定してもうまくいきません。そこでうまく%表示する方法を記述します。 html,body { height:100%; } この記述を加えるとブラウザで表示されている高さを100%と 認識してくれます。 これでこの後に記述する…

Photoshop 画像を紙の質感にする

画像を紙に印刷した質感にする方法を記載します。まず画像と紙テクスチャを用意します。 紙のレイヤーの上に画像レイヤーを乗せます。レイヤーパレット→乗算を選びます。 紙のレイヤーに画像が透き通ります。 このままだと紙以外の部分にも画像が写りこんで…

SQL SELECT文

SQLのSELECT文について記述します。名前の通りデータを選択する言語です。1つもしくは複数のテーブルからデータを抽出する事ができます。 SELECT カラム名 FROM テーブル名; animal_data_baseのcat_tableからCAT_NAMEとCAT_HAIR_COLORだけを抽出したい場合に…

SQL SQL文の使い方

SQLを習いましたので記述します。SQLとはStructured Query Languageの略で主にデータの操作や定義を行う為の言語です。データベースというデータを整理した箱を編集したりする事のできる言語です。データベースの一例ですが載せておきます。データベース名(…

Mac フォルダのアイコンを変更する方法

フォルダのアイコンを手軽に変更できる方法を記述します。PNG・icons形式のファイルをプレビューというソフトで開きます。 画像をコピーしてプレビューは終了します。 貼付けたいフォルダなりファイルを右クリック→「情報を見る」を選択します。 ウインドウ…

Photoshop 画像からオリジナルのカスタムシェイプツールを作成する

Photoshopでフリーのカスタムシェイプツールの素材は沢山あります。 でも自分でこんなのが欲しいというときに思い通りの素材が見つからないこともあります。そんなときに自分で思い通りのカスタムシェイプツールを作成してしまいましょう。 まず画像の素材を…

Photoshop 切り抜き画像を作成する

通常は背景にテキストやオブジェクトを置いて画像やバナーなどを作成することがあります。 今回は背景の上に乗せるテイストやオブジェクトの形に沿って切り取る画像を作成します。 今回は画像の素材を使います。 Photoshopのファイルを新規作成し、背景の上…

Flash スロットを作成する

Flashでスロットを作成します。 まずIllustratorで二種類で良いのでボタンを作成します。 ボタンが作成できたらコピーしFlashに切り替えペーストします。 AIファイルインポーター環境設定を使用してペーストを選択します。 それぞれのボタンをメニューから修…

Flash 写真のフェードイン、フェードアウトの動画を作成する

タイトル通りFlashで動画を作ります。今回はAction Script 2.0で作成します。 どんな写真でも良いので複数画像をPhotoshopで作成します。 見本は600×400で作成しました。 Photoshopで複数の画像を同じファイル内で別レイヤーにしておきます。 更にpsdファイ…

参考資料の健忘録

忘れそうなのでメモです。頼られるWeb担当者になる! Googleウェブマスターツールの教科書 Amazon.co.jp: 頼られるWeb担当者になる! Googleウェブマスターツールの教科書: 大本 あかね, 菊池 崇: 本 Photoshop 10年使える逆引き手帖 Amazon.co.jp: Photosho…

PHP メールフォームを作ってみる 5 htmlspecialchars

前回までにindex.phpで入力した値をPOSTを使ってcheck.phpに渡しました。もしユーザーが誤った値を入力して、index.phpに戻ると値は消えてしまいます。 それを防ぐために今度はcheck.phpに値がある場合のみindex.phpに値を 渡す記述をします。がその前にセキ…

HTML Atom 縦の線を消す方法

こんな線がAtomにはデフォルトで入っています。 これを消すにはデフォルトで導入されているPackageの 「Wrap Guide」を無効化すればOKです。線が邪魔だと思っている方は是非試してみてください

PHP メールフォームを作ってみる 3

前回はindex.phpで値を入力できるフォームを作成しました。 index.phpで値を入力して送信を押した際にcheck.phpで実際に値を受け取ってみます。 index.phpでPOSTで送信した値が正常に受け取れているかを 確認するにはcheck.phpで下記の記述が分かりやすいで…

CSS3 文字や画像を拡大する

文字や画像にhoverした時にその対象物を拡大する方法を記述します。 <body> <div id="box1"></div> </body> </html> 拡大する #box1{ width:200px; height:200px; margin:50px auto; background:blue; -moz-transition: -moz-transform 0.3s linear; -webkit-transition: -webkit-transform 0.3s linea…

HTML スマフォで閲覧される際の記述方法

作成したPC用のホームページがスマフォで閲覧される可能性がある場合には 必ず下記の記述をHTMLで記述します。 閲覧されるデバイスの画面の幅によって自動で対応する記述になります。initial-scale=1.0 この記述は作成したページの幅が100%だとするとそれを…

Illustrator グラデーションメッシュで色を付けながら立体的にする

前回書いたグラデーションメッシュは色を指定できませんでした。今回記述する内容は立体的にして更に、適宜の色を設定できる方法になります。今回はチェリーを立体的にしてみます。まず平面でチェリーを作成します。次に好みの色をカラーパレットやスポイト…

Illustrator グラデーションメッシュで立体的にする

Illustratorで作成した平面のオブジェクトを グラデーションメッシュ使って立体的に見せる方法を作ります。 楕円形ツールを引いている時に↑↓を押すと角の丸みを 設定できます。 CSSでいうborder-radiusの設定のようなものです。 メニューからオブジェクト→グ…

Illustrator ブレンドツールを使って図形を変形させる

ブレンドツールを使うと図形や色を徐々に変化させる事ができます。 その方法を記述します。まず適当に複数図形を描きます。これに適宜で色をつけます。全ての図形を選択ツールで選択し、メニューからオブジェクト→ブレンド→作成をクリックします。 図形から…

HTML Dreamweaverでクリッカブルマップの作成する

画像のある部分をリンクを貼る方法をクリッカブルマップと言います。 その方法を記述します。 まずhtmlファイル内にimgタグで画像を用意します。 コードビューを分割かデザインビューに切り替えます。 メニューからウィンドウ→プロパティを選択します。 HTML…

Illustrator デコボコした線を滑らかにする

フリーハンドやペンツールを使って線を描いた時に 凸凹している場合があります。 そんな線を滑らかに修正する方法をいくつか記述します。 [ツールボックス] の [鉛筆ツール] を長押し。 表示されたメニューから [スムーズツール] を選択します。 修正したい…

topへ戻る