CSS
シングルページサイトをつくる メインビジュアルをヒーローヘッダーで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を使った回り込み - 求職者支援…
Hatena Blogの設定 はてなダイアリーからHatena Blogに変わったため、各種設定をメモします。 編集モード 「はてな記法モード」を使用します。 設定＞基本設定＞編集モード＞はてな記法モードを選択 後に出てくるソースコードを色付きで表示できます。 help.…
コメントとは ソースコード中に特殊な記号を用いて、メモや解説をコメントとして記述すること。 ブラウザ上に表示されないメモ ソースコードを整理するときに使用 コメントアウトとは コメントと同様特殊な記号を用いて、実行させたくないコードをコメントの…
(2020-04-21 加筆) float 並列させたい要素のスタイルに指定します 要素を回り込みさせることで並列にします 左寄せ、右寄せなど回り込みで横並びにさせます ＜html＞ <ul> <li>１番目の要素</li> <li>２番目の要素</li> <li>３番目の要素</li> </ul> ＜CSS＞ ul { overflow: hidden; } li { floa…
ベンダープレフィックスとは CSS3で採用される予定の機能は、前もって各ブラウザで先行実装されます。その機能を動作させるには、プロパティや値の先頭に接頭語を付けます。その接頭語のことをベンダープレフィックスといいます。 ベンダープレフィックスの…
↓自動で動きます 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>
リセット ルールではありませんが、CSSの最初にはリセットを記載した方が良いとされています。 ブラウザには元々持っている規定があるため、これを一度リセットしないと、自分が指定したCSSがうまく機能しません。 @charset "UTF-8"; /* reset */ html,body,…
(2020-04-16 復習) CSSとは CSS = Cascading Style Sheets = HTML言語に装飾・レイアウトをほどこすための言語 CSSの基本書式 セレクタ(どこの){プロパティ(なにを):値(どうする);} p { color: #F00; } CSSをHTMLに適用 style属性で一部にスタイルを適用する…
用語 a = anchor = 錨 src = source = 画像ファイルへのパス（住所） href = hyper reference = 過度な 参照 = リンク先情報 alt = alternate = 代理 = 代替文字 rel = relation = 関係 = 画像リンク <p><a href="移動先のアドレス"><img src="画像の住所" alt="代替文字" (title="マウスオンで名前")></a></p> altは必須 画像にチップ（四角に画像名）を表示するさせ…
