WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

2022年11月クラス

svgで手書き風のテキストアニメーション

See the Pen svgで手書き風アニメーション by yachin29 (@yachin29) on CodePen. 1.IllustratorでSVG画像を作成 まずはIllustratorでアニメーションで動かしたい文字を書きます。この時、なるべく細い筆記体のフォントを選ぶと良いでしょう。レイヤー名はtex…

バナーの作成

Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合も…

インターネット広告について

Web広告とは、「インターネットの媒体上に掲載される広告」のことです。 広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。 dentsu-ho.com…

12月27日作業データ(家具屋のECサイト)

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>家具屋のECサイトの作成</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>…</h1></header></body></html>

JavaScriptのメソッドの使い方

基本的なメソッドの使い方を覚える window.document(ブラウザーに文字を表示させる) JavaScriptで文字列を表示するには、「window.document.write( )」を使います。 表示したい文字列をシングルコートではさみます。「window.」は省略できます。 window.do…

JavaScriptとは

プログラムとは?いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。 プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解し…

12月20日の作業データ(家具屋のECサイト)

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>家具屋のECサイトの作成</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>…</h1></header></body></html>

photoshopでカンプの作成

カンプとは、広告やwebサイトなどの制作において、制作物の仕上がりを具体的に示すために作られる見本のことである。 「カンプ」の名称は英語名の「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった意味が…

ワイヤーフレームの作成

ワイヤーフレームとは「サイトの設計図」です。 サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有す…

レスポンシブデザイン基礎

linecorp.com qiita.com レスポンシブデザインとは? レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサ…

検索の仕方を覚える

検索の仕方を覚える、というのもサイト制作の習得の為に必要なスキルです。 「AND」検索 例(池袋 カフェ) 一番使われている方法で2つ以上のキーワードを入力して検索精度を上げることができます。 キーワード間に一文字分のスペース (半角、全角どちらで…