WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

CSS3アニメーション・transition

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

transformプロパティ

CSS3のtransformプロパティを使うことで要素に2D変形、または3D変形を適用する事が出来ます。 transformプロパティでは 移動(translate) 縮尺(scale) 回転(rotate) 傾斜(skew) 遠近効果(perspective) の5つの動きがありますが、このうち移動、縮尺…

写真家 中村年孝 | photographer Toshitaka Nakamura

写真家中村年孝 写真家・中村年孝のオフィシャルウェブサイトtoshitaka-nakamura.com

豊島園駅から徒歩5分にある Bakery Old Kitchen Organic

豊島園駅から徒歩5分にある、おいしいパン屋オールドキッチン 豊島園駅から徒歩5分程にあるおいしいパン屋オールドキッチン。オールドキッチンではオーガニック素材を使用して体にやさしいパンを提供します。季節によっていろいろな種類のメニューをお出しし…

巣鴨にある焼き菓子屋さん | petits bonheurs story

巣鴨にある焼き菓子屋さん「petits bonheurs story」 何気ない日常の中にある幸せをお菓子とともに http://petitsbonheursstory.com/

かばんのなかみ|807日間34カ国に及ぶ世界一周の旅

かばんのなかみ 807日間34カ国に及ぶ世界一周の旅で撮った写真を言葉と共に日々更新しています。いろんな景色を見たいとき、ほっと一息つきたいとき、一緒に「かばんの中身」を見ませんか? http://kazuyukisakuma.com/

目黒 一人飲み・二次会ならカラオケバー OZ (オズ)

目黒 一人飲み・二次会ならカラオケバーOZ (オズ) 目黒で一人飲み&二次会ならカラオケバーのOZ(オズ)。目黒駅西口徒歩8分・大鳥神社徒歩2分。目黒区下目黒に1994年創業。映画・演劇・音楽好きのマスターが居るカラオケBAR。お一人飲みはもちろん、結婚式の…

新井薬師の定食屋 7seki

新井薬師 手づくり定食のお店 7seki|新井薬師の定食屋7seki|新井薬師駅(中野区、西武新宿線)南口すぐにある定食屋7seki。ボリューム満点の山盛り唐揚げ定食やとんかつ定食をご提供しています。ご飯大盛り無料。ランチにも夕ご飯にも。看板犬がいます。7sek…

PDFでの書き出し

知ってるようで、知らずに損してるAcrobatとPDFのアレコレ(3)キモは「PDFプリセット」。IllustratorからのPDF書き出しを極める https://blogs.adobe.com/creativestation/dtp-acrobat-pdf-kihon-03 知ってるようで、知らずに損してるAcrobatとPDFのアレコ…

タッチアイコンの設定方法

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…

.htaccessの作成

「.htaccessファイル」を使った自動振り分け スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、…

Positionレイアウト

GoogleMapのカスタマイズ

今回はGoogleMapをカスタマイズする方法です。 GoogleMapのピンを会社やお店のロゴ画像に変え、さらに通常のGoogleMapでは色が多く少しうるさいので、カラーをグレースケールにしてみましょう。 今回は「document.getElementById」を使って表示させるので、…

TwitterやFacebookなどのSNSをサイトに埋め込む

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…

バナーの制作

Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合も…

画像の作成

header画像の作成 photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。 使用するテキストCafé Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café It…

floatと2カラムレイアウト

divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。 しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。 floatを使う事でHTML内の文章構造を変える事なく比較的自…

Googleフォームに自動返信機能を付ける

Googleフォームに自動返信機能を付ける 作ったフォームをカスタマイズして、フォームを記入してくれた人に自動でメール返信が出来る機能を追加します。 自動返信機能を付ける事でフォームを利用したユーザーにタスクの進行状況を伝える事が出来るので、結果…

SVGを使ったアニメーション

carlphilippebrenner.comtympanus.netgardenstudio.com.brjakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、…

webサイトにGoogleAPIを導入する

Googleが提供しているGoogleAPIを使うことで簡単に様々な便利な機能をwebサイトに導入する事が出来ます。 Webサイトにスケジュール表やメールフォームを追加したい場合、PHPで作成する事が可能ですが、「Googleカレンダー」と「Googleフォーム」を使うのも選…

1カラムレイアウトの作成

divタグ ・・ひとかたまりの範囲として定義する divタグはそれ自身は特に意味を持っていませんが、DIVで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。 カラムと…

画像の補正

トーンカーブを使った補正 トーンカーブはデータの劣化をおこさずに細やかな補正ができます。 トーンカーブを使えば「明るさ・コントラスト」、「レベル補正」でできることはもちろん、最大で14個のポイント(制御点)を作成しより微妙な部分の調整をおこな…

Photoshopでのマスク処理

画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという2つの「マスク機能」があります。この2つのマスク機能を使い分ける…

Webサイトを見る、知る、そして作る

Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…

道具の使い方を覚える

PCの使い方 物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター(PC)は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。 今までのよう…

フルスクリーンレイアウトのレスポンシブデザイン

スマホレイアウト 今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。全面レイアウトの場合、そのような考えで画像…

Traversingメソッドを使ったタブパネル

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

田園都市線青葉台駅から徒歩5分の美容室 Hair Salon Re

田園都市線青葉台駅から徒歩5分の実力派美容室。Hair Salon Reが2017年5月にオープンしました。人気メニューと最新技術で大人気の美容室Re。lisalisa.webcrow.jp

CSS3によるアニメーション・animation

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

Google画像検索風のjQuery

Google画像検索っぽいスライドにするjQuery(レスポンシブ対応) Googleで画像検索した際に表示される、サムネイルをクリックすると詳細エリアが広がり画像の情報が出てくるやつです。一応、レスポンシブ対応にもなっていますが、しっかり対応させるには画像処…