WEBサイト制作の勉強

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

レスポンシブに対応した定義型リストの制作

使用するサンプルテキスト <div class="inner news-box"> <div class="news"> <h2>ニュースリリース</h2> <dl> <dt>2018年1月4日</dt> <dd>EC限定“バレンタイン用ギフトセット”「GRAND KIRIN GRAND GIFT(グランドキリン グランドギフト)」をAmazon.co.jpおよびLOHACOにて数量限定で先行発売</dd> <dt>2017年12月27日</dt> <dd>紅茶飲料のNo.1ブランド「</dd></dl></div></div>…

レスポンシブデザイン基礎2

レスポンシブWebデザイン(RWD)の制作 レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリー…

サイト制作のワークフロー

webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…

ワイヤーフレームの作成

ワイヤーフレーム ワイヤーフレームとは 簡単に言えば「サイト設計図面」です。 つまり、制作するウェブサイトの要素や機能、情報を設計図面のように配置しておき、クライアントや制作者と認識を合わせるためのものです。 Wirify-見ているサイトを一瞬でワイ…

レスポンシブデザイン基礎1

レスポンシブデザインとは? レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…

css3を使ったドロップダウンメニュー

css3のアニメーションでフェードインなどを表現する場合、「display:none」から「display:block」ではアニメーションを効かせる事が出来ないので、代わりに「visibility:hidden;」と「visibility: visible;」を使用します。 ただ、visibilityの指定のみだと…

動画を背景にする

最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。 実例 www.joe-san.com optimo.com www.kalexiko.com poolhouse.co 作る際…

画像をレスポンシブに対応させる(可変にする)

画像をレスポンシブに対応させる為にはたった2種類のやり方しかありません。img画像であればフルードイメージ化させる。background画像であれば、background-sizeの指定をする。 この2種類の使い方と特徴を覚えれば、画像に関しては問題なくレスポンシブに…

未経験者のポートフォリオの作り方

未経験者にとってポートフォリオをどうやって作れば良いか? 非常に悩むところです。 http://katoshun.com/blog/からの抜粋です。 未経験者のポートフォリオに載っている作品は、以下のようなものがほとんどです。 スクールの課題で作った架空の会社のサイト…

header部分の制作

以前、既存のサイトをモデルにしてレスポンシブサイトを制作し、jQueryのプラグインを使いトップにスライダーを導入しましたが、モデルサイトに最も近い形のスライドショーを導入したパターンが今回のやつです。 今回のスライドショーの主なポイントブラウザ…

建築CGパースのストレート

池袋にあるCGパース、建築パースのストレート 建築CGパース制作の株式会社ストレートでは、調査・設計・提案書など様々なサービスをワンストップで提供致します。 VRなどの最先端技術やアニメーションも積極的に取り入れています。CAD教育・講習にも力を入れ…

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のアレコ…

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内の文章構造を変える事なく比較的自…

webサイトにGoogleAPIを導入する

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

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

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

画像の補正

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

Photoshopでのマスク処理

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