integrationsの使い方 「Web Demo」を選択してブラウザーでプレビュー 「ENABLE」を押す リンクをクリック ブラウザー上でチェットボットが稼働 「Dialogflow Messenger」を選択 「ENABLE」を押して埋め込みコードを取得 右下の「TRY IT NOW」を押す アップ…
会話の流れを作る 言われたことを覚えて復唱する 占いがしたい ↓ 何月生まれですか？ ↓ 10月です ↓ 10月生まれは大吉です Intents作成 「CREAT INTENT」をクリック intent名は「uranai」 Training phrases を作成 「ADD TRAINING PHRASES」を押して、フレー…
チャットボット 「チャットボット（chatbot）」とは、「チャット」と「ボット」を組み合わせた言葉で、人工知能を活用した「自動会話プログラム」のこと Chatbotを作る Google Dialogflowを検索 Dialogflowの使い方 Googleにログイン Dialogflowにアクセス（…
プログラミング言語 コンピュータや機械を動かすための命令（コマンドといいます）群でコンピュータで何かを実行（処理）するための言語」です サーバサイドスクリプト PHPはサーバサイドスクリプトの１つで、CGIと同様、動的にWebページを生成するための言…
中央に配置 Grid Flexbox position Gridで中央配置 display: grid; place-items: center; 「place-items: center;」は「align-items: center;」「justify-items: center;」をまとめている <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> </meta></meta></head></html>
フルスクリーン - レスポンシブ スマートフォン・パソコンでフルスクリーンで表示する HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>ヒーローイメージ</title> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></link></meta></meta></head></html>
背景画像：フルスクリーン bodyに背景画像を固定 background-size: cover; background-attachment: fixed; HTML記述例 <html lang="ja"> <head> <meta charset="utf-8"> <title>GIRLY ROP</title> <meta name="viewport" content="width=device-width"> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
透明（不透明度） opacityプロパティを使って全体を透明に CSSのopacityの書き方 img要素に対して「opacity:1 」を指定すると完全不透明です 「opacity: .5」だと透明度は50%です .content > img { opacity: .5; } ホバー時に透過させる .content>img { opac…
Part5 - TOP Harvest Restaurant home concept menu info CONCEPT MENU INFORMATION HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】TOP | Harvest Restaurant</title> <link rel="stylesheet" href="css/top.css"> </link></meta></meta></head></html>
Part5 - INFO INFO INFO 山の中にひっそり佇む 隠れ家レストラン 駅からはちょっぴり遠いですが、 たまには遠回りしてみませんか？ Access Capybaland Mt.Sunny 1-2-3 in Capyzou farm 「サニー山駅」から車で10分 [OPEN]10:00-22:00 [CLOSE]Monday Garelly …
Part5 - MENU MENU MENU 旬の野菜と食材を 手軽に味わえる 自家農園の食材のため、リーズナブルにご提供 季節ごとにサラダ/メインメニューは変わります Salad Main Pasta HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】MENU | Harvest Restaurant</title> </meta></meta></head></html>
Part5 - CONCEPT CONCEPT CONCEPT 口に入れた瞬間 カラダが喜ぶ 自家農園で太陽の光をたっぷり浴びた 採れたて・無農薬のお野菜をふんだんに使っています Fresh カラフルサラダでしっかりビタミンをチャージ。 朝採れ野菜のパリッとした食感と自家製ドレッシ…
Part5 - 複数ページのサイト テキスト P.208 全体を俯瞰して作りやすところから始めます Webサイト制作の流れ 企画・要件定義 サイト設計 制作 Webデザインの基本 揃える 差をつける グループ化 繰り返し Webの特性を考慮したデザイン 操作できること 閲覧環…
position: sticky position: sticky スクロールすると、navも動き最上部で固定される <header class="header"> <div class="container"> <h1> <img src="img/hero_text.png" srcset="img/hero_text.png 1x, img/hero_text@2x.png 2x" alt="Welcome to Our Wedding Party"> </h1> <p class="scroll">Scroll<br></p></div></header>
form フォーム記述例 <main class="main-content"> <section class="msgSec"> </section> <section class="dateSec"> </section> <section class="form-section"> <div class="container"> <h2>RSVP</h2> <form action="#" method="post" class="rsvp"> </form></div></section></main>
::before, ::after HTML記述例 class名は、似通った名前が設定されているので、どのブロックを指すのかを意識しながら記述します モバイルファーストの記述とformのマークアップは、次の段階で行います <main class="main-content"> <section class="msgSec"> <h2>Message</h2> <p>この度、カピぞうとカピ子は<br> ウェディング</p></section></main>…
WebFont header WebFontsを読み込み <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】Wedding Party Invitation</title> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <…</link></link></meta></meta></head></html>
MarkUp ユーザーは上から順にコンテンツを見るため、順番をよく考えて情報設計をすることが大切です PC版とスマートフォン版の例のギャップも少ないため、レスポンシブWebデザインと相性のよいレイアウトです HTMLの構造 デザインカンプ「design.png」を見な…
アコーディオンパネル 縦・横の限られたスペースに複数のコンテンツを繰り返し表示させたいときに利用する HTMLの構造 すべての要素を表示 GoogleMapのiframeは、最後に挿入 class名、id名は適宜追加します <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>jQueryを使ったアコーディオンパネル</title> </meta></meta></head></html>
下絵に沿って地図を描く 下絵をテンプレートにする 線の幅と色を決める 枠線に合わせて裁ち落としをするため、少しはみ出るように描画する 枠線の大きさでクリッピングマスク作成 SVG形式で書き出す 下絵を配置 「ファイル」→「配置」→「テンプレート」のみ…
SVG Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス） XMLベースの、2次元ベクターイメージ用の画像形式の1つ アニメーションやユーザインタラクションもサポートしている SVGの仕様はW3Cによって開発され、オープン標準として勧告され…
bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="js/jquery.bxslider.js"></link>
thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます そ…
イベントが発生した要素を取得 サムネイルをホバーしたとき メイン画像の「src」と「attr」の値を取得して 指定された値に置き換える（スワップイメージ） <html lang="ja"> <head> <meta charset="UTF-8"> <title>マウスによる画像置換</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <p><img src="img/00.jpg" alt="" id="mainImg"></p>…</div></body></html>
イベントとは ユーザーとWebサイトとの間でやりとりを行う処理を「イベント」と呼びます イベントには、「ユーザーイベント」と「ブラウザイベント」の２種類があります ユーザーイベントは、キーボードやマウスを操作することで実行されます ブラウザイベン…
hide()メソッド 表示されている要素を非表示にする 引数がない場合は、即座に非表示 キーワードは、「slow」「normal」「fast」のいずれかを記述 秒数で指定する場合は、「1000」が１秒 <html lang="ja"> <head> <meta charset="UTF-8"> <title>hide()メソッド</title> <style> .box {width: 300px; height: 300px;} #hide1 {ba</meta></head></html>…
HTML/CSSを操作するjQueryの命令 どのHTMLの要素を操作するか指定する（セレクター） 操作する内容（命令） jQueryの命令 テキストの変更と取得 HTMLの変更と取得 HTMLの挿入 HTMLの移動 他の要素で包む 親要素を取り除く 要素の置き換え 要素の削除 属性値…
jQueryとは よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート（ブラウザ依存を気にしなく…
認定試験 サンプル問題（４） www.sikaku.gr.jp fair.htmlの作成 【fair.html】 ホーム ブライダルフェア ブライダルフェア 各会場の様子やお料理、ドレスをはじめ、弊社プランナーがおふたりのウェディングをご提案させていただきます。 思い出の曲をピアノ…
認定試験 サンプル問題（３） www.sikaku.gr.jp plan.htmlの作成 【plan.html】 ホーム プランのご案内 プランのご案内 標準的なプラン例 標準的な内容のプランをご紹介いたします。実際のプランはお客様に合わせてご提案いたしますので、お気軽にお問い合わ…
