シングルページサイトをつくる メインビジュアルをヒーローヘッダーでbxsliderを使用 VIDEO部分にmp4データを設置 NEWS部分をjQuery / ajaxを使用して外部データを読み込む MENU部分にjQuery / モーダルウィンドウを設置 ACCESS部分にGoogleMapを設置 INFO部…

ブログの新着記事を外部サイトページに表示 コーポレートサイトなどのトップページで、ニュースの新着記事の日付・見出しを表示しているサイトありますよね。前から気になっていたので、調べてみました。 ブログが更新されると自動で新着記事が更新されます…

前回の記事「MAMPを使用してWordPressのローカル環境をつくる」を利用してサイト100選をつくりました。 デモページ テンプレートを選ぶ ダッシュボード＞外観＞テーマ＞新規追加＞特殊フィルターなどを使用して、利用したいテーマを選びます。 テンプレート…

WordPressは全体の非公開機能がないため、サーバーにアップした瞬間から公開された状態になります。そのため開発段階では、ローカルサーバー環境を作り、制作やテストを行います。 環境 macOS High Sierra WordPress 5.4.2 MAMP 5.7 WordPressをインストール…

店舗サイトをつくる レスポンシブ化（ブレイクポイント：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ページは様々なデバイスで閲覧されています。ここでのデバイスとは、パソコン、スマートフォンやタブレットなどのモバイルなどを指します。 特にスマートフォンは画面が小さいため、パソコン用のデザインをそのまま閲覧しようとする…

Google Chrome スクリーンショット Webページ全体（スクロール）のスクリーンショットを撮るのに、長らくブラウザGoogle Chromeの拡張機能「Full Page Screen Capture」や「FireShot」などを使用していましたが、徐々に機能が怪しくなってきたので別の機能を…

「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.…

コメントとは ソースコード中に特殊な記号を用いて、メモや解説をコメントとして記述すること。 ブラウザ上に表示されないメモ ソースコードを整理するときに使用 コメントアウトとは コメントと同様特殊な記号を用いて、実行させたくないコードをコメントの…

The W3C Markup Validation Service HTMLのマークアップが終了したら「文法チェック」を行います。 テキストエディタなどで記述したHTMLをコピペしてチェックします。 validator.w3.org The W3C CSS Validation Service CSSの記述が終了したら「文法チェック…

こんな時期ですが、自宅にいる機会が多くなったため今まで学んだことのおさらいをしていきたいと思います。 漫然と不安を抱えて過ごすよりは、目標を持って学習した方が心にゆとりができそうなので。 あくまで個人的な復習なのでお見苦しさはご容赦ください。

(2020-04-21 加筆) float 並列させたい要素のスタイルに指定します 要素を回り込みさせることで並列にします 左寄せ、右寄せなど回り込みで横並びにさせます ＜html＞ <ul> <li>１番目の要素</li> <li>２番目の要素</li> <li>３番目の要素</li> </ul> ＜CSS＞ ul { overflow: hidden; } li { floa…

アイコンをつくらず時短 Webフォント awesome:有名なフリーアイコン pictonic:フリーは266種類 ポートフォリオで自分のスキルを表現するときは、これを組み合わせれば何とかなります 書体（アウトライン画像として使用） Zapf Dingbats:アイコン ornament fo…

HTML5の新属性 主なコンテンツ section要素：ページのメイン：セクション区切り article要素：独立した記事：ブログのニュースサイトの記事など、単独で再利用できる部分 周辺情報のコンテンツ aside要素：補足：本文とは別扱いのリードやコラムなど nav要素…

bodyの背景の色をブラウザの幅によって変更する 確認の仕方は、ブラウザを手動でスライドしていきます 1200px〜 黒 1000〜801px 赤 800〜601px 青 600〜401px 黄 〜400px 緑 PCサイズから作成する場合 <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブウェブデザイン | メディアクエリーの</title></meta></head></html>…

メディアクエリー Webページの見栄えを記述するCSS3で追加された仕様 表示された画面環境に応じて適用するスタイルを切り替える機能 ブレイクポイントを使用してレイアウトを制御 ポイント 各ブレイクポイントで記述すると上書きで指定されます 上部に指定さ…