中国語に翻訳したデータtranslate.google.com 自身のサイトのURLをパラメーターにつける https://translate.google.com/translate?sl=ja&tl=zh-CN&u=http://felica29.starfree.jp/season2020-07/ slにサイトで使用している言語tlに翻訳したい言語uに翻訳した…
www.sikaku.gr.jp felica29.starfree.jp
felica-web.hatenablog.jp 前回、cssで色々な形で画像をマスクしてみましたが、今回はcssアニメーションを追加する事でさらに自由度の高い表現が出来るようになります。 aquall.jp erikamoreira.co mask-imageはベンダープレフィックスが必要 chromeにベンダ…
cssのみで「マウスに追従するホバーアニメーション」を作るには少し工夫が必要です。追従して動く要素が並列になっている要素（今回でいうli要素）からみて、下の兄弟要素か子孫要素でなければ動かす事が出来ない為、追従する要素をli要素にする必要がありま…
固定部分にフレームを作成し、その中に「ロゴや店舗名、タグライン」などを入れましょう。 stock.adobe.com sozaino.site
スマホ特化・モバイルファーストサイトではbody要素が固定になっている場合がほとんどなので、body要素の背景がサイトの印象を大きく左右します。今回はbodyの背景にパターンやアブストラクトなどのテクスチャ素材を使ってみましょう。 https://pixabay.com/…
必要なテキスト 店舗名 タグライン 場所 お店の特徴（コンセプト） メインコピー リード文 商品について（こだわりなど） 質問と答え（３つ） 店長・マネージャーのあいさつ 必要な画像素材 商品・サービス画像（9枚）600x400以上（商品名と価格も必要です）…
bard.google.com Google Bard は、Google AI の大規模な言語モデル（LLM）であり、テキストとコードの大規模なデータセットでトレーニングされています。テキストの生成、言語の翻訳、さまざまな種類のクリエイティブコンテンツの作成、質問への有益な回答を…
パターンの作成 helpx.adobe.com パスファインダーの使い方 uxmilk.jp design-trekker.jp バナーの作成 https://blog.digimerce.jp/2018/01/15/3750/blog.digimerce.jp イベントポスターの作り方 helpx.adobe.com チュートリアルまとめ note.mu アイデア探し…
提出フォーム forms.gle
自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう…
Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…
Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 www.uniad.co.jp バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイズ…
最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。 URLの正規化 例えば、キリンのwebサ…
www.ditjapan.com まずはhtmnl5のvideoタグのプロパティを覚えましょう src="" (URL)ファイルのURLheight="" 数値 要素の高さwidth="" 数値 要素の幅autoplay="" autoplay 自動的に再生を行います。controls="" controls 動画再生をコントロールするUIを表示…
使用するテキスト Net Smart よりスマートなインターネットライフを HOME CONCEPT SERVICE ACCESS 必要なものは、 ビジネスの価値を届けるデザインの力。 Net Smartは、ビジネスとユーザーを理解し、 関係性を構築するためのストーリーの設計とUXデザインを…
制作したデータをインターネット上で表示させるためには作ったデータをサーバーにアップロードする必要があります。サーバーには無料のものと有料のものがありますが、授業では無料サーバーを使用していきます。webサイト制作においてサーバーは必須のもので…
Flexbox（Flexible Box Layout Module）はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わった…
uxtools.co
カラムレイアウトwww.weblab.co.jp divタグ ・・ひとかたまりの範囲として定義する divタグはそれ自身は特に意味を持っていませんが、divで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 今回はh1やpをdivの中に入れ、カラムレイ…
演習１ <body> style要素 style element HTML文書内にまとめて設定します。 </body> 演習２ <body> About wine Chianti Classico Riserva 1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあり</body>…
Web広告とは、「インターネットの媒体上に掲載される広告」のことです。広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。 dentsu-ho.com …
今までの授業で色々なツールを使用してきましたが、中でもレイヤーマスクは非常に便利で使用頻度の高いツールなので、使い方をしっかりと理解しましょう。 helpx.adobe.com
htmlの要素（タグ）はh1など特別な物以外は基本的には複数使用する事が出来ます。例えばpタグが4つある場合、それぞれのp要素に名前を付ける事で判別する事が出来るようになります。 idの使い方 idには「ファイル内で同じidは2回使えない」と「1つの要素に付…
CSS（Cascading Style Sheets） CSSとは、HTMLの要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。 h1やpなどの意味付け…
近接の法則 近接の法則は、距離が近いもの同士が同じグループだと考えるという法則です。 それぞれの要素数が異なっていても同じグループと認識します。適切な余白を設定することでユーザーが情報を適切にグループ分け出来るようします。 bulan.co margin ma…
header画像の作成 photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。 使用するテキスト Café Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café I…
HTMLで１番大事なのは正しい文章構造にマークアップ出来るか、です。まずは文章をしっかりと読み、理解してからマークアップをし始めましょう。 アウトライン構造 アウトラインとは階層構造のことで、HTMLでのマークアップでは、このアウトラインを意識する…
画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分ける…
テーブル table要素を使うことで、表を作成することができます。表内の行とセルは、table要素内に配置するtr要素とtd要素（th要素）で示します。caption要素は、表のキャプション（タイトルや説明）を表します。 table要素＝表全体を示す要素です。表の大き…
