認定試験 サンプル問題（２） www.sikaku.gr.jp concept.htmlの作成 【concept.html】 ホーム 結婚式場のコンセプト 結婚式場のコンセプト すべてのお客様のご満足のために 豊富な経験に基づき、お客様のどのようなご要望にもご満足いただけるプランニングを…
認定試験 サンプル問題（１） www.sikaku.gr.jp base.htmlの記述 サンプル問題では「base.html」は、完成形がありますがゼロから記述してみます HOTEL IMPERIAL RESORT TOKYO 結婚式場のコンセプト プランのご案内 ブライダルフェア お問い合わせ ホーム 結…
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>
ハンバーガーメニュー - jQuery jQueryでクリックイベントを作成する場合 jQueryでクリックイベントを作成する場合 ボタンのアニメーションは、CSS3で設定 HTML記述例 <header class="header"> <h1><span>info</span></h1> <div class="menu"> <p id="btn"><span id="hum"></span></p> </div> <nav class="gnav"> <ul> <li><a href="../index.html">HOME</a></li> <li></li></ul></nav></header>
ヘッダーパーツ - ナビゲーション nav要素のレイアウト nav <nav class="gnav"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">サービス案内</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> /* ---------------------------------- nav ---------------------------------- */ .gnav ul { display: flex; gap: 40px; colo…
テキストナビゲーション 中心から外に線が伸びる（下部） 記述例 <nav class="gnav"> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </nav> @charset "UTF-8"; /* ------------------------------------ reset ------------------------…
CSS3で作るマウスオーバーアニメーション 背景色が変化するアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>Flexboxを使ったナビゲーション</title> <style> html,body,h1,ul,li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; color: inherit; } </meta></head></html>…
Transform［変形］ transformプロパティは、回転、伸縮、傾斜、移動などの動きを要素に指定する際に使用するCSSプロパティ transformプロパティの値に指定できる関数 関数名 読み方 実行効果 translate トランスレイト 移動 rotate ローテート 回転 scale ス…
Transition［トランジションアニメーション］ マウスホバー時に背景色を変更（3秒間で） <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Transition</title> <style> button { height: 80px; width: 240px; background-color: #0d96a5; border: none; color: white; font-size: …</meta></meta></head></html>
::before, ::after HTML記述例 class名は、似通った名前が設定されているので、どのブロックを指すのかを意識しながら記述します モバイルファーストの記述とformのマークアップは、次の段階で行います <main class="main-content"> <section class="msgSec"> <h2>Message</h2> <p>この度、カピぞうとカピ子は<br> ウェディング</p></section></main>…
擬似要素 HTMLに記述せずCSSで擬似的に作成される要素であるため、「擬似要素」と呼ばれています 擬似要素には多くの種類がありますが、その中でもよく使用される擬似要素はbeforeとafterです before / afterとは 要素の前後に擬似要素を作成する指定方法で…
スライス画像でコーディング（CSS）
ワイヤーフレームを作成 HTML記述例 ワイヤーフレームに沿ってマークアップ Google Fonts（Noto Sans Japanese） FontAwesome（アイコン） <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】Cafe</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
Web Fonts（Google Fonts） fonts.google.com 利用方法 Noto Sans Japaneseの場合 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Noto Sans Japaneseの設定</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
Web Fonts CSS3.0 fonts module Webフォントはコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化（レンダリング）をともなう文字表示を行うシステムおよびそのフォント 文字で表現できること…
画像スライス １枚画像から、画像を書き出す ガイドライン付き素材 mimipen.net blog.mimipen.net スライスツール ガイドに沿って、画像をドラッグする 「スライス選択ツール」で、スライスエリアをダブルクリック ダイアログボックスで、ファイル名を記述 …
positionを使ったレイアウト ※画像：photoAC 簡単！肉じゃがの作り方 煮崩れしにくい肉じゃがレシピです。 完成した肉じゃがの写真 材料 牛肉 じゃがいも 玉ねぎ にんじん 糸こんにゃく 調味料 水 手順 具材を食べやすい大きさにカットします。 カットした具…
2カラムレイアウト(４) ysd-lab.jp HI University 大学案内 学部・大学院 国際交流 入試情報 キャンパスライフ Information 2013.10.30 オープンキャンパス11月20日 開催！ 2013.09.12 【重要】男子寮の料金プラン変更について 2013.08.02 iWDC&iSFC 2013 WO…
3つのレイアウト手法 floatレイアウト flexboxレイアウト gridレイアウト float レイアウトの問題点 横並びにしたブロックの高さを揃えられない 横並びにしたブロックは上揃えにしかならない 幅の計算があわないとカラム落ちする float解除の仕組みが分かり…
２カラムレイアウト（３） ysd-lab.jp CAKE SHOP ホーム CakeShopについて ケーキメニュー お店のご案内 お知らせ お問い合わせ トピックス 2013.10.30 CAKE SHOP 創業40周年記念ケーキ販売決定！ 2013.09.12 【重要】全国郵送に関するお知らせ 2013.08.02 8…
floatの使い方 floatとは？ floatを指定した要素が「浮いた状態」になる特性です floatの使い方 横並びにしたい要素に対して、float: 値;を指定して使用します 値に記述するのは、以下のような「方向」を示すワードです 値 指定内容 left 横並びにした要素を…
２カラムレイアウト（２） ysd-lab.jp SHELLY'S NEWS PROFILE DISCOGRAPHY MEDIA/LIVE CONTACT TOPICS 2013.10.30 TV/CM日本グランプリ 主演賞に選ばれました！ 2013.09.12 【重要】チケット発送料金の変更について 2013.08.02 勝手ながら、8月12日〜16日ま…
スクロール後要素を固定するposition: sticky; スクロールで動き、要素を固定するposition: sticky; stickyを適用した要素はスクロールに応じて追従するように動き、指定した位置に固定することができます positionプロパティはstickyの他にも下記の4つがあ…
要素を固定する position: fixed; positionプロパティを使って要素位置を固定するfixed コンテンツを画面に固定させて表示させたい場合に利用します positionプロパティはfixedの他にも下記の4つがあります relative absolute static sticky position: fixed…
要素の絶対位置を指定するposition: absolute; position: absolute; は、要素の配置を自由に設定することができます position: absolute; は単体で使用せず、position: relative; とセットで使います positionプロパティはabsoluteの他にも下記の4つがありま…
相対位置を指定する position: relative; 現在位置を基準に、相対位置を指定することができます position: relative; は単体で使用せず、position: absolute; とセットで使うことが多いです positionプロパティはrelativeの他にも下記の4つがあります fixed …
position: static; positionプロパティは、要素の配置を指定するプロパティです 通常、positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて要素の配置を指定します static：位置も重なりも指定できない、positionプロパティ…
positionプロパティで要素を配置 positionプロパティとは positionプロパティは、要素の「位置」を指定する際に使用するCSSプロパティです 要素を自由に配置したい 要素の重なり順を変えたい ヘッダーを固定して表示したい positionプロパティの使い方 posit…
演習 - Codestep Recipe Diary code-step.com モバイルファーストで記述 HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】Recipe Diary</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
レスポンシブWebデザイン - 演習 デザインの基本4原則 デザインの基本は以下の4原則に沿ってレイアウト・デザインする事が大切です。 整列 ページ上のものはすべて意識して配置しなければいけません。すべての要素配置が視覚的につながりを持つように意識し…
