HTML
シングルページサイトをつくる メインビジュアルをヒーローヘッダーでbxsliderを使用 VIDEO部分にmp4データを設置 NEWS部分をjQuery / ajaxを使用して外部データを読み込む MENU部分にjQuery / モーダルウィンドウを設置 ACCESS部分にGoogleMapを設置 INFO部…
店舗サイトをつくる レスポンシブ化（ブレイクポイント：640px） SP時にメニューをハンバーガーメニュー（ドロワーメニュー）にする スムーススクロールでアニメーションしながらトップに戻る h1にgoogle fontsを適用させる GoogoleMap（南池袋公園）をサイ…
(2020-06-24 加筆) フルスクリーンレイアウト 背景画像を固定させて、スクロールしてもついてくるレイアウトのことです。 パララックスデザイン：背景を固定して前面の要素が動きます。 実践 テキストはアタリ、画像は個別に用意します。 背景画像のサイズは…
(2020-06-24 加筆) ヒーローイメージ（ヒーロー画像）とは Webサイトのファーストビューにて、画面を全面に覆い尽くすように配置した大きなサイズの写真やグラフィック要素のこと。もしくはそのレイアウトのこと。 配置した動画を「ヒーロームービー」、それ…
Emmetとは 主にHTMLやCSSなどの記述・編集を支援するプラグインです。 DreamweaverやBracketsなど多くのエディタに対応しています。 独自の省略記法によるコーディングの高速化が可能となります。 省略記法を入力した後、tabを押します。 各種記号 #：ID：ID…
店舗サイトをつくる コンテンツ幅（960px）固定値で設定 レスポンシブWebデザインで作成 デザインは今風に改変 画像は個別に用意 実践 例 テキスト IKEBUKURO COFFEE池袋珈琲 トップ メニュー 店舗 こだわり IKEBUKURO COFFEE ドリップコーヒーの2倍コーヒー…
Flexboxとは CSS3 Flexible Box (可変ボックス) ボックスのレイアウト方法を定めるCSSの機能 ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能（flex）にします flex：融通のきく、柔軟なという意味 フレックスボックスの基本概念 devel…
マルチデバイス 現在、Webページは様々なデバイスで閲覧されています。ここでのデバイスとは、パソコン、スマートフォンやタブレットなどのモバイルなどを指します。 特にスマートフォンは画面が小さいため、パソコン用のデザインをそのまま閲覧しようとする…
「TOPへ戻る」ボタン Font Awesome Iconsで設置 過去の記事の際のIllutratorでボタンをつくる手間がなくなります。 jQueryで動作設定 初期画面ではマークがでず、ある程度スクロールするとボタンが出ます。 SP表示でボタンが表示されます。（PC表示ではボタ…
店舗サイトをつくる モバイルファースト 前回の実践のHTMLを利用して、CSSをモバイルファーストで作成します。 モバイルファーストとは 主にスマートフォンでストレスなく利用できるデザインにすること。 モバイル：スマートフォン、タブレットなど 主にスマ…
店舗サイトをつくる（応用編） PSDカンプからコーディング クラス名「container」で、横幅960pxに統一 header h1（左）とナビゲーション（右）が横並び スライダーを設置：カスタマイズ main h2とp（キャッチコピー）は、１カラム おすすめ写真３点が横並び…
DreamweaverのExtract機能を使う 以前は「Brackets」の「Extract for Brackets」を使用していましたが、開発終了との悲報を受けDreamweaverに移行しました。Brackets…無料で素晴らしいソフトです。Extract…ぜひ戻ってきていただきたい。 Dreamweaverとは Web…
(2020-04-27 加筆) bxSliderを設置する jQueryプラグインのスライダー スマートフォン、タブレットなどのレスポンシブにも対応しています。 ＜bxSlider＞ bxslider.com 方法１：head内にCDNで読み込む CDN＝Content Delivery Network：ネットワーク経由でコ…
複数ページのリンクをつくる 「season」フォルダを作る メインビジュアルを960×250pxにする トップページを４分割、各ページは１枚の画像にする ナビゲーションは、カーソルを合わせたときのホバーの色を変える 画像はフリー素材を用意 実践 例 出典：01/19 …
PLACEHOLDER.COM ダミー画像を簡単に挿入する 画像が未定。納品待ちなどの場合に使用します。 サイズは960×150pxで指定しています。 数字を変えれば欲しいダミー画像枠ができます。 ＜HTML＞ <img src="https://via.placeholder.com/960x250"> 画像の色、テキストの色も任意に変更できます。 <img src="https://via.placeholder.com/960x250/666666/CCCCCC"> 背景画像で使用…
２カラムレイアウト ２列に別れたレイアウトのこと column：列、項目 row：行、レコード 実践 例 出典：01/11 2カラムレイアウト - 実践 - 求職者支援訓練12月19日開講Webサイト制作科 白描 テキスト Mont-Saint-Michel フランスの旅フランス国旗 モンサンミ…
float float = 浮遊 = 回り込み p要素内の先頭文字と同じ扱いの画像にfloatを設定すると、続く文字が画像の後ろに続き並ぼうとします。それを「画像の後ろに文字が回り込んでいる」と表現します。 実践１ 例 出典：01/09 floatを使った回り込み - 求職者支援…
コメントとは ソースコード中に特殊な記号を用いて、メモや解説をコメントとして記述すること。 ブラウザ上に表示されないメモ ソースコードを整理するときに使用 コメントアウトとは コメントと同様特殊な記号を用いて、実行させたくないコードをコメントの…
The W3C Markup Validation Service HTMLのマークアップが終了したら「文法チェック」を行います。 テキストエディタなどで記述したHTMLをコピペしてチェックします。 validator.w3.org The W3C CSS Validation Service CSSの記述が終了したら「文法チェック…
HTML5の新属性 主なコンテンツ section要素：ページのメイン：セクション区切り article要素：独立した記事：ブログのニュースサイトの記事など、単独で再利用できる部分 周辺情報のコンテンツ aside要素：補足：本文とは別扱いのリードやコラムなど nav要素…
↓自動で動きます Photoshopで素材を用意 Photoshopを開き200×200pxを新規作成 カスタムシェイプで、雲と飛行機をつくります png-24／透過で書き出します HTML+CSSで記述 HTMLを記述します CSSを記述します <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS3アニメーション</title> <style> body { background: #0CF;</meta></head></html>…
Illustratorでボタンを作る 100×100pxの正円 上向きの三角形 png-24で書き出し 見やすいサイズでお好みで作成してください HTMLとCSSを記述 【index.html】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>トップへ戻るボタン</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>
用語 a = anchor = 錨 src = source = 画像ファイルへのパス（住所） href = hyper reference = 過度な 参照 = リンク先情報 alt = alternate = 代理 = 代替文字 rel = relation = 関係 = 画像リンク <p><a href="移動先のアドレス"><img src="画像の住所" alt="代替文字" (title="マウスオンで名前")></a></p> altは必須 画像にチップ（四角に画像名）を表示するさせ…
(2020-04-16 復習) 用語 HTML = HyperText Markup Language DTD宣言 = Document Type Definition = 文書 種類 定義 UA = user agent Webサイトを見る時に使用するデバイスのこと ＜＞ = angle brackets = アングル ブラケット = 角度 括弧 [ ] = brackets = …
