divタグ ・・ひとかたまりの範囲として定義する divタグはそれ自身は特に意味を持っていませんが、divで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。 カラムと…
画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分ける…
Web広告とは、「インターネットの媒体上に掲載される広告」のことです。 広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。 dentsu-ho.com…
www.ditjapan.com html5からhtmlに直接動画データを埋め込むことが出来るようになりました。 htmlで扱える動画データはmp-4とweb-mの2種類です。 <video src=""></video> html5ではvideoタグを使うことで簡単にページに動画データを埋め込む事が出来ますが、スマートフォンで見た場…
web広告 Web広告とは、「インターネットの媒体上に掲載される広告」のことです。 広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。 dents…
最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。 URLの正規化 例えば、キリンのwebサ…
レイヤーマスクは非常に便利で使用頻度の高いツールなので、使い方をしっかりと復習しましょう。 helpx.adobe.com
CSS（Cascading Style Sheets） CSSとは、HTMLの要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。 h1やpなどの意味付け…
「余白」はデザインする上でもっとも重要な役割を果たします。 近接の法則 近接の法則とは「ゲシュタルトの法則」の１つで、距離が近いもの同士が同じグループだと考えるという法則です。 それぞれの要素数が異なっていても同じグループと認識します。studyh…
Photoshopの基本的な使い方 Photoshopで行う作業は大きく別けると以下の３つ 画像を作る。 画像を補正する。 画像を加工する。 ・選択範囲を取る 選択ツール 自動選択ツール マグネット選択ツール などで選択範囲を取る。 微調整はクイックマスクモードで作…
検索の仕方を覚える、というのもサイト制作の習得の為に必要なスキルです。 「AND」検索 例（池袋 カフェ） 一番使われている方法で２つ以上のキーワードを入力して検索精度を上げることができます。 キーワード間に一文字分のスペース （半角、全角どちらで…
Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…
header画像の作成 photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。 使用するテキストCafé Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café It…
CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。 margin marginとは要素の外側に出来る隙間の事です。 padding paddingとは要素の内側に出来る隙間です。言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトで…
https://codepen.io/ CODEPENとは？ 「CODEPEN」とは、HTML・CSS・JSなどのソースコードを保存・公開・共有できるWEBサービスです。他の人が作ったソースをその場で編集できたり、プレビューで確認出来、動作確認などにも使えて非常に便利です。ソースをブロ…
carlphilippebrenner.comtympanus.netgardenstudio.com.brjakearchibald.com SVGとは？ SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、…
ホテルフェリカ 池袋駅東口より徒歩3分と絶好のロケーション。世界のトップアーティストが数々の公演を繰り広げる「東京芸術劇場」など新しく生まれかわった文化の街池袋、東京の城北地区唯一のグランドホテルです。 シングル・スタンダードルーム 最上階12…
Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…
作例 yachin29.php.xdomain.jp 制作メモ 作成するサイト ・シングルページのカフェサイト ページ構成 １、ヒーローヘッダー ２、ナビゲーション（PCからSPまでずっとハンバーガー） ３、お知らせ（ajaxを使って、外部データをお知らせ部分に呼び出す） ４、…
http://tomoyukiarasuna.com/data/arasuna_portforio.pdf www.concentinc.jp
www.anthonyboyd.graphics photoshopvip.net www.youtube.com Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートTVのモックアップとして使えるビットマップ…
ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…
ファビコンの設定 ブラウザーによって微妙に記述が異なりますが、IE11以上であれば、.icoの場合 <link rel="icon" href="favicon.ico"> .pngの場合 <link rel="icon" href="favicon.png" type="image/png"> でOKです、 サイトのルートディレクトリに「favicon.ico」という名前でファイルを配置しておけば、下層ページでも上記の記述が無くてもファビコン</link></link>…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>シングルページのカフェサイト</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>
プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>
Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…
制作のポイント ・ヒーローヘッダーの導入（画像のサイズの決定） ・Ajaxを使用した箇所とメリットを丁寧に説明 ・APIを使うメリットと注意点 ・レスポンシブに対応（モバイルフレンドリーテストにかけ、確認） ・img要素にobject-fitを使い、自由にトリミン…
最近、よく見かける「１枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー（Hero Header）とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="100~120文字くらいでサイトの説明文を入れる(想定している検索キーワードを文の最初に入れる)"> <title>Portfolio…</meta></meta></meta></meta></head></html>
画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ O-DAN (オーダン）- 無料写真素材・フリーフォト検索 stock.adobe.com イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com www.opendoodles.com en…