2024-07-25

レストランサイトの作業データ

index.html

html

レストランサイトの作成

Ristorante Felicità

幸せのひとときを本場の味と真心で

洗練された空間で、至福のひとときを。

伝統と革新が織りなす、本格イタリアン

洗練された空間で、特別な時間を過ごせるリストランテ、Ristorante Felicità

伝統的なレシピを守りつつ革新的な技術を取り入れた、本格イタリア料理をご提供いたします。

旬の食材を活かした繊細な味わいと、美しい盛り付けは五感を魅了します。大切な方との記念日や自分へのご褒美に、ぜひお越しください。

お知らせ

動画

店舗情報

171-0022: 東京都豊島区南池袋
Tel: 03.1111.2222
Mail: example@gmail.com

Open: 11：00 — 22：00
定休日: 年末年始
駐車場: 無

よくある質問

Q予約は必須ですか？

Aはい、ディナータイムは全席予約制となっております。ランチタイムはご予約なしでもご入店いただけますが、混雑状況によってはお待ちいただく場合がございます。

Qドレスコードはありますか？

A特にございませんが、スマートカジュアルな服装でのお越しをおすすめしております。

Q個室はありますか？

Aはい、ございます。個室は完全予約制となっておりますので、ご希望の場合は事前にご予約をお願いいたします。

Qアレルギーや苦手食材はありますか？

Aご注文時にスタッフにお申し付けください。可能な限り対応させていただきます。ただし、食材によっては対応できない場合もございますので、ご了承ください。

2024-07-25

mixitup を使ってフィルタリング機能を実装

2024年4月クラス

多くのコンテンツを見せる際にフィルタリング機能やソート機能などを付けて、ユーザーの利便性を向上させましょう。
さらにモーダルウィンドウを追加して、ページ遷移することなく、動線をそのページで完結出来るようにしましょう。

github.com

高機能モーダルウィンドウ「Fancybox」のCDN

今回はモーダルウィンドウにLightboxの代わりに「Fancybox3」を使用してみます。
fancybox CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

fancybox JS

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

obu.edu

参考サイト
chiyo-katsumasa.com

<header>
<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".red">赤色</button>
<button type="button" data-filter=".green">緑色</button>
<button type="button" data-filter=".blue">青色</button>
<button type="button" data-filter=".even">偶数</button>
<button type="button" data-filter=".youtube">動画</button>
<button type="button" data-sort="order:asc">番号順</button>
<button type="button" data-sort="order:descending">逆番号順</button>
<button type="button" data-sort="random">ランダム</button>
</header>



<div class="container">

<div class="mix red" data-order="1">
<a data-fancybox="gallery" href="img/1-2.jpg">
<img src="img/1.jpg" alt="">
</a>
</div>


</div>

クリエイティブ・コモンズ・ライセンス

また、フリー素材の使い方だけでなく、画像素材等の著作物の権利についてもしっかりと覚えましょう。
creativecommons.jp

2024-07-19

Figmaについて

Figmaとは、ブラウザ上で動作するUI/UXデザインツールです。2016年にリリースされて以降、その使いやすさや豊富な機能から、多くのデザイナーに愛用されています。

Figma の特徴

ブラウザ上で動作する: インストール不要で、どこからでも作業可能です。
リアルタイムコラボレーション: 複数人で同時に同じファイル編集できます。
豊富な機能: ベクターグラフィック編集、プロトタイピング、デザインシステム構築など、幅広い機能が搭載されています。

www.figma.com

Figmaの仕様について

Figmaの構造は、大きく分けるとTeamとDraftsの2つのスペースに分かれています。

Team

Teamの中には「Project」さらにProjectの中に「File」が入っている仕組みです。Team内であれば複数人で共有することが出来ます。無料プランの場合、1つの「Project」、3つの「File」までという制限がついています。
Team自体は用途に応じて複数作成する事が可能です。

Drafts

Teamが複数のメンバーで利用できるスペースであるのに対して、Draftは自分だけが編集できる作業スペースです。Draftとは「下書き」という意味を持つ言葉である通り、作成したデザインを下書きとして保存できます。下書きを共同で編集したい場合には、Projectに移動させることで、共同編集できるようになります。

Figmaの料金プラン

Figmaには4つの料金プランが用意されています。
まずは無料の「スタータープラン」で充分です。

www.youtube.com

プラグインの追加

豊富なプラグインがあるのもFigmaのメリットの1つです。その中でもよく使うプラグインを実際に入れてみましょう。

画像フリー素材集

https://www.figma.com/community/plugin/738454987945972471www.figma.com

アイコン素材

https://www.figma.com/community/plugin/1144676345861942963www.figma.com

日本語フォント管理

https://www.figma.com/community/plugin/1222407847928087305www.figma.com

一部有料

画像の背景を自動で切り取る

www.remove.bg

1クリックでWebページをFigmaに変換

https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed?hl=ja

2024-07-19

ポートフォリオの制作

ポートフォリオ

ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。
次にwebのポートフォリオを何で作るかを決めましょう。選択肢としては、htmlとcssで制作するか、wordpressを使って作るか、またテンプレートを上手く使う事も視野に入れておきましょう。
ポートフォリオ自体の仕様が決まってきたら、次に中に入れるコンテンツの見せ方を考えてみましょう。もちろん色々な見せ方がありますが、授業でやった「作品のサムネイル」→「作品の詳細ページ」→「自身で制作した作品」という順に見せていく方法は有効な方法の1つです。また、ディレクター志望の場合、photoshop、illustratorだけで無く、パワーポイントやエクセルといったoffice系のソフトを使ってポートフォリオを作っても良いと思います。
次にポートフォリオ全体のデザインイメージとファーストビューのデザインを決めていきましょう。既存のサイトなどを参考にツカミのあるファーストビューを作ってみましょう。また面接等で「なぜこのファーストビューにしたのか？」と質問された時に答えられるように答えを準備しておきましょう。

kashiwasato.com

webdesigner-go.com

www.creativevillage.ne.jp

tomoyukiarasuna.com

ポートフォリオのフォーマット

ポートフォリオを作るに当たって、Bootstrapなどのフレームワークを使用する事も視野に入れておきましょう。
それぞれのメリット・デメリットを理解し、自身にとって最も有効だと思う物を選択する事が大事です。

モックアップを使って自身の作品を載せる

2024年01月クラス

https://www.anthonyboyd.graphics/mockups/simple-coffee-cup-mockup/www.anthonyboyd.graphics

https://photoshopvip.net/freebies/mockupphotoshopvip.net

www.youtube.com

自身の制作したサイトをモックアップで見せる

Gif画像でアニメーションで見せる

chromewebstore.google.com

https://yachin29.jp/school/Simple-Coffee-Cup-Mockup.zip

2024-07-19

Cookie（クッキー）とは

Cookie（クッキー）とは？

Cookie（クッキー）とは、ホームページを訪問したユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などがユーザー情報として保存されます。これによって再訪問したときにユーザーを特定し、情報を入力する手間が省けます。ショッピングサイトに訪問したとき、すでにログイン状態になっている、以前カートに入れた商品がそのまま残っているのは、Cookie機能がはたらいているからです。

似たような機能でSessionという機能がありますが、Cookieはクライアント側にデータを保存するのに対して、Sessionはサーバー側に保存されてるため機密性の高いデータを扱う場合はSessionを使った方が良いでしょう。

Cookie（クッキー）とキャッシュの違い

キャッシュとは、ブラウザで一度表示したページのデータ（HTMLや画像）を一時的に保存しておく機能になります。何度も頻繁に訪れるページなどは、キャッシュが保存されているおかげで素早く表示することが可能です。
ただ、一時的に保存されているページのデータが最新のものとは限らないので、アップロードの作業時には注意が必要です。特にWordpressはブラウザのキャッシュが強力で、更新前の古いデータが読み込まれて表示される事が多いので、そういった場合はキャッシュの消去を行って下さい。

・IDやパスワードなどの個人情報やサイトの閲覧情報を保存。
・削除するとログインする時に再入力する必要がある。
・IDやパスワードなどの個人情報が漏洩する危険性がある。

キャッシュ

・サイトのHTMLや画像データを保存。
・データはスマホやPC内に保存される。
・キャッシュのデータが増えることでメモリの空き容量がなくなり動作不良の原因になる。

jquery-cookie.jsを使ってみる

github.com

if($.cookie('access')){
//既にアクセス済みの場合はカーテンを非表示
$('#curtain').hide();
}else{
//初アクセスの場合はカーテンをfadeOutさせる
$('#curtain').delay(4000).fadeOut(400);
}

$.cookie('access',$('body').addClass('access'),{
 expires: 1 //指定しない場合は現在のセッションのみ保持される(ブラウザを閉じると消える)。
});

});

2024-07-12

svgを使ったドローイングアニメーション

See the Pen
q-chan by yachin29 (@yachin29)
on CodePen.

tympanus.net

http://gardenstudio.com.br/gardenstudio.com.br

jakearchibald.com

SVGとは？

SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGはXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。

SVGに対応しているブラウザー

Internet Explorer 9以上
Firefox 3.0以上
Chrome 4.0以上
Mac OS X Safari 3.2以上
Opera 9.0以上
iOS Safari 3.2以上
Androidブラウザ 3.0以上

blog.codecamp.jp

svgで使用するタグの分類

svgで使用するタグは大きく分けると３種類に分ける事が出来ます。

基本図形(rect, circle, ellipse, line, polyline, polygon)
パス(path)
テキスト(text)

今回の授業ではSVGを単独で使用するだけでなく、HTMLファイルの中に記述し、css3アニメーションを併用します。
こうする事でブラウザー上で色々な表現方法が可能になります。
※ただしIEとOperaは、全てのSVG要素でCSSアニメーションを受け入れないという問題があります。

変化させる方法は主に以下の3つがあります。

CSSプロパティ（transitionやanimation）を使う→簡単だけどIE未対応
setTimeout()を使う→IEも動くけど面倒
JavaScriptライブラリを使う→簡単&IEでも動くけどサイズが膨大
それぞれ、長所・短所があるので、状況に応じて使い分けると良いかと思います（ちなみにjQueryはSVGの要素を扱えないので使えません）。

SVGのパスは、以下のようなプロパティを使って、スタイルを指定出来ます。

stroke：線の色
stroke-width：線の太さ
fill：塗りつぶしの色
stroke-dasharray：破線の間隔
stroke-dashoffset：破線の開始位置

今回は破線のプロパティである、stroke-dasharrayとstroke-dashoffsetを使い、線を引くアニメーションを作成します。

また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。

none（初期値）

キーフレームで指定されたスタイルは、アニメーションの前後には適用されません。

forwards

アニメーションの実行後にキーフレームの最後の指定が適用されます。

backwards

アニメーションの実行後、即座にキーフレームの最初のスタイル指定を適用します。

both

forwards と backwards の両方が適用されます。アニメーション実行前には backwards が、実行後には forwards があると考えると分かりやすいと思います。

参考サイト

https://qiita.com/a-ide/items/107c9044d0f4e0354112qiita.com

animation-timing-functionについて

shu-naka-blog.com

洗練された空間で、至福のひとときを。 伝統と革新が織りなす、本格イタリアン

お知らせ

メニュー

ズッパ・ディ・ペッシェ

タリアテッレ・アル・ラグー

マルゲリータ

カルチョーフィ

ティラミス

アフォガート

動画

店舗情報

よくある質問

高機能モーダルウィンドウ「Fancybox」のCDN

クリエイティブ・コモンズ・ライセンス

Figma の特徴

Figmaの仕様について

Team

Drafts

Figmaの料金プラン

プラグインの追加

一部有料

ポートフォリオのフォーマット

bootstrapのテンプレート

HTML5&CSS3ベースのテンプレート

卒業生の作品

自身の制作したサイトをモックアップで見せる

Gif画像でアニメーションで見せる

Cookie（クッキー）とは？

Cookie（クッキー）とキャッシュの違い

キャッシュ

jquery-cookie.jsを使ってみる

SVGとは？

SVGに対応しているブラウザー

svgで使用するタグの分類

また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。

none（初期値）

forwards

backwards

both

参考サイト

animation-timing-functionについて

洗練された空間で、至福のひとときを。

伝統と革新が織りなす、本格イタリアン