index.html html レストランサイトの作成 Ristorante Felicità幸せのひとときを本場の味と真心で トップ お知らせ メニュー 動画 店舗情報 よくある質問 Instagram Facebook Line X ご予約はこちらから 洗練された空間で、至福のひとときを。 伝統と革新が織…
多くのコンテンツを見せる際にフィルタリング機能やソート機能などを付けて、ユーザーの利便性を向上させましょう。 さらにモーダルウィンドウを追加して、ページ遷移することなく、動線をそのページで完結出来るようにしましょう。 github.com 高機能モーダ…
Figmaとは、ブラウザ上で動作するUI/UXデザインツールです。2016年にリリースされて以降、その使いやすさや豊富な機能から、多くのデザイナーに愛用されています。 Figma の特徴 ブラウザ上で動作する: インストール不要で、どこからでも作業可能です。 リア…
ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…
https://www.anthonyboyd.graphics/mockups/simple-coffee-cup-mockup/www.anthonyboyd.graphics https://photoshopvip.net/freebies/mockupphotoshopvip.net www.youtube.com 自身の制作したサイトをモックアップで見せる Gif画像でアニメーションで見せる …
Cookie（クッキー）とは？ Cookie（クッキー）とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…
See the Pen q-chan by yachin29 (@yachin29) on CodePen. tympanus.nethttp://gardenstudio.com.br/gardenstudio.com.brjakearchibald.com SVGとは？ SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として…
ファビコンの設定 ブラウザーによって微妙に記述が異なりますが、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 name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイト|予約ページ</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイトの作成</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>…</link></link></meta></meta></head></html>
配色には色々なルールがありますが、まずはこの3つを覚えましょう 1、コントラスに気を付ける 2、色数を抑える 3、トーンを合わせる HSBを使った配色 photoshopではRGB以外にもHSBやLabといった数値でも色の調整が出来ます。特にHSBは配色時によく使うので是…
background-attachmentをfixedにすると簡単にパララックス（視差効果）を使ったスクロールが実装出来ます。 ただ、iOSはどういった理由か、この「background-attachment:fixed;」を頑なに対応させない為（ベンダープレフィックスを付けてもダメ）、iOSでは別…
CSSリセットとは、デフォルトでブラウザに付いているスタイルを打ち消す（リセットする）CSSのことです。 すべてのブラウザには、すべてのWebページに適用される「user agent stylesheet」と呼ばれるデフォルトのスタイルが付属しています。CSSリセットはブ…
webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…
GeminiはGoogleが開発した大規模言語生成 AIです。大規模言語モデル（Large Language Models、LLM）とは、非常に巨大なデータセットとディープラーニング技術を用いて構築された言語モデルです。 どういった事が出来るか本人に聞いてみました。 Google AIの…
プログラムとは？いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。 プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解し…
「 new Date()」を使う事で、現在の時間を取得することが出来ます。 <script> let date = new Date(); document.write(date); </script>実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。 このままでは使いづらいので「 new …
作例 使用テキスト Net Smart よりスマートなインターネットライフを HOME CONCEPT SERVICE ACCESS 必要なものは、ビジネスの価値を届ける>デザインの力。 Net Smartは、ビジネスとユーザーを理解し、関係性を構築するためのストーリーの設計とUXデザインを…
linecorp.com qiita.com レスポンシブデザインとは？ レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサ…
Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…
トップページ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>日本の四季｜トップページ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>日本の四季</h1> </header> <nav class="g-nav"> <ul> <li></li></ul></nav></body></html>
最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。 URLの正規化 例えば、キリンのwebサ…
www.ditjapan.com jam-cf.com html5からhtmlに直接動画データを埋め込むことが出来るようになりました。 htmlで扱える動画データはmp-4とweb-mの2種類です。 <video src=""></video> html5ではvideoタグを使うことで簡単にページに動画データを埋め込む事が出来ますが、スマートフ…
Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイズを用意する場合も…
レイアウトを考える時に常に独創的でユニークなレイアウトである必要はありません。それどころか訪問者の多いサイトを見れば、多くのサイトで似たようなレイアウトが採用されています。それは偶然でも手抜きでもありません。そこには次のような利点があるの…
画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分ける…
Web広告とは、「インターネットの媒体上に掲載される広告」のことです。 広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。 dentsu-ho.com…
header画像の作成 photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。 使用するテキストCafé Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café It…
近接の法則 近接の法則は、距離が近いもの同士が同じグループだと考えるという法則です。 それぞれの要素数が異なっていても同じグループと認識します。 適切な余白を設定することでユーザーが情報を適切にグループ分け出来るようします。 bulan.co cssをリ…
ホテルフェリカ 池袋駅東口より徒歩3分と絶好のロケーション。世界のトップアーティストが数々の公演を繰り広げる「東京芸術劇場」など新しく生まれかわった文化の街池袋、東京の城北地区唯一のグランドホテルです。 シングル・スタンダードルーム 最上階12…
