2023年1月クラス
トップページ <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="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…
tomoyukiarasuna.com webdesigner-go.com note.com drive.google.com
linecorp.com qiita.com レスポンシブデザインとは？ レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサ…
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="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
今回の要件定義 店舗情報 店名： Fresco Italiano（フレスコ イタリアーノ） キャッチコピー： 新鮮な素材から生まれるイタリアンの魅力を、南池袋で。 コンセプト フレッシュな素材にこだわったイタリアン 当店では、厳選された新鮮な素材を使用したイタリ…
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>Furniture-store</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>
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勧告として…
カンプとは、広告やwebサイトなどの制作において、制作物の仕上がりを具体的に示すために作られる見本のことである。 「カンプ」の名称は英語名の「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった意味が…
配色には色々なルールがありますが、まずはこの3つを覚えましょう 1、コントラスに気を付ける 2、色数を抑える 3、トーンを合わせる HSBを使った配色 photoshopではRGB以外にもHSBやLabといった数値でも色の調整が出来ます。特にHSBは配色時によく使うので是…
webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。 3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。 初心者にとって配色は難しい部分ですが、まずは既存のサイトやサ…
ワイヤーフレームとは「サイトの設計図」です。 サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有す…
webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…
www.ditjapan.com jam-cf.com html5からhtmlに直接動画データを埋め込むことが出来るようになりました。 htmlで扱える動画データはmp-4とweb-mの2種類です。 <video src=""></video> html5ではvideoタグを使うことで簡単にページに動画データを埋め込む事が出来ますが、スマートフ…
webliker.info
近接の法則 近接の法則は、距離が近いもの同士が同じグループだと考えるという法則です。 それぞれの要素数が異なっていても同じグループと認識します。 適切な余白を設定することでユーザーが情報を適切にグループ分け出来るようします。 bulan.co cssをリ…
header画像の作成 photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。 使用するテキストCafé Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café It…
画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分ける…
IDE（統合開発環境）とは IDE (Integrated Development Environment)とは、従来、コンパイラ、テキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境から利用できるようにしたものです。以下からVS Codeをダウンロードします…
Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…
PCの使い方 物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター（PC）は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。 今までのよう…