マルチデバイス 現在、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の記述が終了したら「文法チェック…

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