WEBサイト制作の勉強

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

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

2021年10月クラス

fancybox 3.5.7のCDNを使用する

高機能モーダルウィンドウ「Fancybox」のCDNを使ってギャラリーページを作ってみるfancybox CSS <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />fancybox JS <script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> https://web.archive.org/…</link>

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

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

2021年10月開講クラス-ポートフォリオの提出

docs.google.com

Googleフォームに自作のCSSを当ててカスタマイズする

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトに…

EFO - お問い合わせフォーム最適化

EFO(Entry Form Optimisation)は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。 対面でのサービスが難しくなった今日「お問い合わせ…

11月26日作業データ

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="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>

複数の場所にスムーススクロールで移動させる

複数の場所にスムーススクロールで移動させたい場合 以下の指定でa要素のhref属性の頭に#がついている場合という設定が出来ます。しかしこのままでは全てのa要素が対象になってしまうため、a要素にクラスを付けて対象を限定しましょう。 $('a[href^="#"]')対…

ワイヤーフレームの作成

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

サイト制作のワークフロー

webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…

photoshopでカンプの作成

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

10月8日の作業データ

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>ホテル・フェリカ</title> </head> <body> <h1>ホテル・フェリカ</h1> <p>池袋駅東口より徒歩3分のホテルフェリカは、観光・ビジネスでのご宿泊や、女子会・お祝い事でのご利用に最適なシティホテルです</p> <p><img src="img/main.jpg" alt=""></p> <h2>新着情報</h2> <dl> <dt>2021年06月01日</dt> <dd>館内施設 営業再開等のご案内</dd></dl></body></html>

HTML5でのアウトライン構造を理解する

アウトラインとは階層構造のことで、HTML5のマークアップでは、このアウトラインを意識することが非常に重要になってきます。また、正しいアウトライン構造を作るためにはsectionタグを使用したセクショニングをしっかりと理解する事が大事です。webサイトを…

マークアップとは

マークアップ とは、機械が文書の構造を認識出来るように、文書の各要素に目印を与えて行く事です。 見出しや段落などと言った紙の文書では当り前にある要素だけでなく、ハイパーリンクのアンカーなどのようなハイパーテキスト独自の要素なども、マークアッ…