2020-04-30

【2020】Webデザイナー必見！現役Webデザイナー使用中「Chrome拡張機能まとめ」

Chrome拡張機能・アプリアプリ

f:id:webdesign-css-html-koyaman:20200524031754j:plain

【2020】Webデザイナー必見！現役Webデザイナー使用中の便利な「Chrome 拡張機能まとめ」。現在使用しているChrome 拡張機能とChrome アプリをまとめました。

Chrome拡張機能について
拡張機能のメリット・デメリット
Chrome拡張機能追加・設定の方法
Webデザインの時に使用するChrome拡張機能
HTMLコーディングの時に使用するChrome拡張機能
Webサイト制作の時短・効率アップに使用するChrome拡張機能
Webライティングの時に使用するChrome拡張機能
Webディレクション・デザイン・コーディングの時に使用するChrome拡張機能
- Webサイトで使用しているプラグイン・ツールがまる見え「WhatRuns」
その他のChrome拡張機能
- 自分のパソコンからのアクセスを計測させない「Google Analytics オプトアウトアドオン (by Google)」
- Chrome アプリのスプレッドシート・ドキュメントをオフラインで作業する「Google オフラインドキュメント」
現役Webデザイナー使用中のChrome アプリ
- Excelより便利！無料オンライン表計算アプリ「スプレッドシート」
- Wordより便利！無料オンラインワードアプリ「ドキュメント」

Chrome 拡張機能について

ブラウザにワンクリックで簡単に追加できるブラウザを便利に使用するために開発されたアプリ。

拡張機能のメリット・デメリット

Chrome 拡張機能メリット: Webデザイン・コーディングの仕事の効率アップ、時短。
Chrome 拡張機能デメリット: PCが重くなり、PC動作が鈍くなる。

Chrome 拡張機能追加・設定の方法

Chrome 拡張機能は Chrome ウェブストアから追加します。
左上の検索バーより拡張したい機能を検索し、拡張機能を選んでクリック。拡張機能の詳細を確認します。
平均評価（★の数）、ユーザー数、更新日時、最新レビューをよく確認した上で、［Chromeに追加ボタン］をクリック。
「拡張機能XXXX」を追加しますか？というポップアップが出てきたら、［拡張機能を追加］をクリックする。
ブラウザに「追加した拡張機能XXXX」のWebサイト（利用規約）が表示された場合は、さらっと見て、閉じてOK。
ブラウザ右上、［三本点（Google Chromeの設定ボタン）］をクリック、設定→拡張機能で追加した拡張機能を確認する。
追加した拡張機能の詳細、拡張機能のON、OFFの変更、拡張機能の削除がこの画面または、ツールバーの拡張機能アイコンを右クリックし、Chromeから削除、拡張機能を管理で拡張機能の詳細、拡張機能のON、OFFが設定できます。

Webデザインの時に使用するChrome 拡張機能

Webページで使用されている色を調べる「ColorZilla」

「ColorZilla拡張機能」の使い方

ツールバーのColorZillaのアイコンクリック!
十字線カーソルをWebページの調べたい色の上に重ねて、左クリック！
クリップボードにコピーされているので、あとは貼り付けるだけ！

「ColorZilla」拡張機能の特徴

カーソルが十字線なので、正確にスポイト場所をクリックできる。
抽出したカラーの履歴が保存されている。
マウスオーバーした要素も確認できる。
CSSグラデーションジェネレーター機能があるので、Photoshopより簡単にグラデーションを作成、自動でCSS出力してくれます。
Photoshopとほぼ同じカラーピッカー機能があり、「ColorZilla」のカラーピッカー機能で簡単に使いたい色を選択できる。

「ColorZilla」拡張機能のオプション

自動コピーのカラー形式を【】の中から選べます。
【#RRGGBB,RRGGBB,rgb(R、G、B),rgb(R%、G%、B%),hsl(H、S%、L%)】
カラー形式の16進コードを小文字に変更可能。
ショートカットを作成でき、ツールバーの「ColorZilla」のアイコンをクリックしなくても、スポイトを開始できます。

ページ全体をキャプチャする「Full Page Screen Capture」

「Full Page Screen Capture拡張機能」の使い方

スクリーンショットをしたいWebページ上で「Full Page Screen Capture」のアイコンクリック!
スクリーンショットを新しいウィンドウで確認、PDFかpngを選択する。
※スクリーンショットをjpgで保存したい場合は、オプションで変更する。
デフォルトは、C:\Users\ユーザー名\Downloadsに保存されます。

「Full Page Screen Capture」拡張機能の特徴

ダウンロード履歴が残っていて、再ダウンロード可能です。
PDF、png、jpgからスクリーンショットの画像フォーマットを選択できます。 ※PDF（オプションで「Auto-download files (beta)」をチェックを入れている場合は、PDFは利用不可。チェックを外せば有効になります。）

「Full Page Screen Capture」拡張機能のオプション

画像フォーマットがpng、jpgから選べる。
スクリーンショットを保存するダウンロードディレクトリの下の任意ディレクトリが指定可能。
Directoryを「screencaptures」に指定すると、下記にスクリーンショットを保存されます。
C:\Users\ユーザー名\Downloads\screencaptures
PDFのファーマットサイズを【】から選択可能。【米国の手紙、米国の法務、A4、画像全体】
「Save　as」にチェックを入れると、スクリーンショットをダウンロードするときに、「名前を付けて保存」ダイアログを自動的に表示。
「Auto-download files (beta)」にチェックを入れると、スクリーンショットを新しいウィンドウで開くことなく、自動的にダウンロード！
「Fit copies to Google Docs limits」にチェックを入れることで、スクリーンショットをクリップボードにコピーするときに、Googleドキュメントの制限に合わせることができる。

Webページ上の要素のサイズをpx単位で測定する「Page Ruler Redux」

「Page Ruler Redux」拡張機能の使い方

自由に選択したい時に『任意モード』

計測したいWebページ上で「Page Ruler Redux」のアイコンクリックまたは、ショートカット「Alt + P」で有効にする。
マウスカーソルが十字の状態で計測したい部分をドラッグ。
Webページ上部の測定ツールバーにドラッグで選択した範囲のサイズが表示されます。
測定が終わったら、測定ツールバー右上の〔×〕をクリックして終了。

要素のサイズを知りたい時に『Element Mode（要素モード）』

計測したいWebページ上で「Page Ruler Redux」のアイコンクリックまたは、ショートカット「Alt + P」で有効にする。
Webページ上部の測定ツールバーの1番左〔＜＞〕をクリックしてElement Mode（要素モード）に変更。
計測したい部分をマウスオーバー。マウスオーバーした部分の要素を自動で認識、サイズを測定してくれます
Webページ上部の測定ツールバーにサイズが表示されます。
測定が終わったら、測定ツールバー右上の〔×〕をクリックして終了。

「Page Ruler Redux」拡張機能の特徴

要素のWidth、Heightのサイズを測定、要素の左上：Left、Top、要素の右下：Right、Bottomの位置を取得することができる。
測定ツールバー〔Color〕から選択した範囲のカラー変更可能。
選択した範囲のカラーと要素のカラーが同系色で見づらい時に利用できます。
測定ツールバー〔Show Guides〕を「ON」にすることで、ガイドを表示することができます。
要素の縁に沿って、垂直線と水平線が表示されることで、正確に計測できます。
測定ツールバーの表示位置を変更可能。
測定ツールバー右上〔下向き矢印〕をクリックで下部に、〔上向き矢印〕をクリックで上部に表示位置の変更が可能になります。
測定ツールバー右上〔？〕をクリックでキーボードショートカットキーや最新のアップデート情報などを確認できます。

「Page Ruler Redux」拡張機能のオプション

「Page Ruler Redux」のアイコン右クリックし、拡張機能の管理から「ファイルのURLへのアクセスを許可する」をチェックするとローカルにあるファイルもブラウザ上でサイズを測ることができるようになります。
ショートカットキーの活用で、選択した範囲の拡張、縮小が1pxまたは、10px単位で調整可能になります。

既存サイト、参考サイトで使用されているフォントをマウスオーバーで即表示!
クリックでフォント詳細表示してくれる「WhatFont」

説明: The easiest way to identify fonts on web pages.

HTMLコーディングの時に使用するChrome 拡張機能

HTML5のOutline構造とHeadings構造をチェックする「headingsMap」

説明: To show (and audit) the headings structure

Webサイト上の画像を一括ダウンロード「Image Downloader」

説明: Browse and download images on a web page.

現在表示中のWebサイトURLをワンクリックでQRコード化「The QR Code Extension」

説明: 現在のページのQRコードを生成し、ウェブカメラを使ってQRコードをスキャンすることができます。

ちょっとしたCSSの確認は、マウスオーバーでさくっと「CSSViewer」

説明: A simple CSS property viewer.

Web上の画像サイズを右クリックで一瞬で調べる「Image Size Info」

説明: Inserts option in the browser's image context menu to view image width, height and file size.

Altなし画像をツールチップで見える化！
Altなし画像一覧作成！
Altなし画像一覧表示から該当画像までクリックで移動してくれる「Alt & Meta viewer」

説明: 画像に設定された Alt または Title 属性をツールチップで表示することができます。ヘッダの Title、Meta 情報を一覧表示させることができます。

リンク切れをワンクリックで簡単チェック「Check My Links」

説明: Check My Links is a link checker that crawls through your webpage and looks for broken links.

英単語にマウスカーソルを合わせるだけ！
すぐ下にポップアップ翻訳してくれる「Weblioポップアップ英和辞典」

英文選択で翻訳ページへのリンクを表示。

説明: Webページの英語にマウスオーバーさせることで「英和辞典」での意味を表示させるポップアップ辞書機能や、文章を選択することで翻訳結果へスムーズに移動することができる機能を備えた、Weblio公式のエクステンションです。

英単語・英文を選択→拡張機能アイコンクリックで音声付翻訳！「Google翻訳」

説明: 閲覧しているウェブサイトを簡単に翻訳できます。

Webサイト制作の時短・効率アップに使用するChrome 拡張機能

Webサイト閲覧中にメモをとりたい時に。
Chrome上のシンプルメモツール「grt memo」

Webサイト閲覧中にメモをとりたい！そんなときに。別でメモ帳アプリを開く必要なし、Chrome上に簡単にメモを作成・保存してくれる「grt memo」。さらに、URLボタンをワンクリックでURL・ページタイトル、TIMEボタンをワンクリックで日付・時間をメモに追加してくれるありがたいメモ帳。

Webブラウザの動作が遅いと感じたら。ワンクリックでキャッシュ削除「Clear Cache」

説明: Clear your cache and browsing data with a single click of a button.

拡張機能の入れすぎで重い・・・。
使う時だけ、拡張機能をON！
拡張機能の個別オン・オフ、一括オン・オフをワンクリックで可能「Extensity」

説明: Quickly enable/disable Google Chrome extensions

Webライティングの時に使用するChrome 拡張機能

文字を選択、右クリック！
ポップアップで文字数表示！
正確に文字数だけをカウントしてくれる「文字数カウンター」

説明: なぞった文字の文字数が分かります。

検索結果一覧等に表示された複数のWebサイトのリンクテキストを『マウス選択』！
すると、一括で複数のWebサイトを別タブで開いてくれる「Linkclump」

他の拡張機能が邪魔になるため、Activstionを「Z＋マウスを右クリックしつつドラッグ」、色を「赤」に変更しました。

説明: Lets you open, copy or bookmark multiple links at the same time.

PC画面を動画キャプチャ！
録画中に説明用の書き込み可能＋マイク入力で実況動画も作成可能！
しかも無料のChrome拡張機能「Screencastify」

説明: The #1 screen recorder for Chrome. Capture, edit and share videos in seconds.

変数を使って、自分で追加登録したフォーマットで自分好みのサイトリンクを生成する「Create Link」

説明: Copy current page URL to clipboard in various formats.
ユーザー数: 30,000+ 人
平均評価: 4.4

Webディレクション・デザイン・コーディングの時に使用するChrome 拡張機能

Webサイトで使用しているプラグイン・ツールがまる見え「WhatRuns」

説明: Discover what runs a website. Frameworks, Analytics Tools, Wordpress Plugins, Fonts - you name it.

その他のChrome 拡張機能

自分のパソコンからのアクセスを計測させない「Google Analytics オプトアウトアドオン (by Google)」

説明: Google AnalyticsのJavaScript（ga.js）と連携してGoogle Analyticsに情報が送信されないようにします。

Chrome アプリのスプレッドシート・ドキュメントをオフラインで作業する「Google オフラインドキュメント」

説明: インターネットに接続していなくても、ドキュメント、スプレッドシート、プレゼンテーションを編集、作成、表示できます。

現役Webデザイナー使用中のChrome アプリ

Excelより便利！無料オンライン表計算アプリ「スプレッドシート」

説明: スプレッドシートを作成、編集する

Wordより便利！無料オンラインワードアプリ「ドキュメント」

説明: ドキュメントを作成、編集する

2020-04-24

【2020年】Webデザイナー必見！2020年のWeb制作に必須スキル、Webデザイナー1年目に読むべき本！現役Webデザイナーが厳選購入したWeb制作者必見のWeb制作の教科書！

Web制作の教科書 Webデザイン

f:id:webdesign-css-html-koyaman:20200423020602j:plain
【2020年】Webデザイナー必見！2020年のWeb制作に必須スキル、Webデザイナー1年目に読むべき本！現役Webデザイナーが厳選購入したWeb制作者必見のWeb制作の教科書を紹介しています。Web制作の本を本屋で厳選して購入次第、ご紹介していきます。Web制作に関する実際に購入した本しかご紹介していないので、2020年はまだ少ない状況です。今後、本が増加次第、更新していきます。

現役Webデザイナーが2020年本屋で厳選購入したWeb制作者必見の本！
- Webライティング
  - 沈黙のWebライティング—Webマーケッターボーンの激闘—〈SEOのためのライティング教本〉

現役Webデザイナーが2020年本屋で厳選購入したWeb制作者必見の本！

Webライティング

沈黙のWebライティング
—Webマーケッターボーンの激闘—〈SEOのためのライティング教本〉

沈黙のWebライティング —Webマーケッターボーンの激闘—〈SEOのためのライティング教本〉

作者:松尾茂起
発売日: 2016/11/01
メディア: 単行本

2019-08-17

【2019年】Webデザイナー必見！2019年のWeb制作に必須スキル、Webデザイナー1年目に読むべき本！現役Webデザイナーが厳選購入したWeb制作者必見のWeb制作の教科書25冊！

Web制作の教科書 HTML5 CSS3 Webデザイン

f:id:webdesign-css-html-koyaman:20200423015914j:plain

【2019年】Webデザイナー必見！2019年のWeb制作に必須スキル、Webデザイナー1年目に読むべき本！現役Webデザイナーが厳選購入したWeb制作者必見のWeb制作の教科書25冊を紹介しています。

現役Webデザイナーが2019年本屋で厳選購入したWeb制作者必見の25冊！

現役Webデザイナーが2019年本屋で厳選購入したWeb制作者必見の25冊！

Webデザイン

なるほどデザイン
目で見て楽しむ新しいデザインの本。

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

作者:筒井美希
発売日: 2015/07/31
メディア: 単行本

やってはいけないデザイン

作者:平本久美子
発売日: 2016/12/17
メディア: 単行本（ソフトカバー）

デザイン入門教室[特別講義]
確かな力を身に付けられる ~学び、考え、作る授業~

デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design&IDEA)

作者:坂本伸二
発売日: 2015/07/01
メディア: 単行本

デザインはストーリーテリング
「体験」を生み出すためのデザインの道具箱

デザインはストーリーテリング「体験」を生み出すためのデザインの道具箱

作者:エレン・ラプトン
発売日: 2018/10/15
メディア: 単行本

広告デザイン

文字のレイアウトで魅せる広告デザイン

発売日: 2018/03/12
メディア: 単行本（ソフトカバー）

Photoshop & Illustrator & XD参考書

新ほめられデザイン事典レイアウトデザイン
［Photoshop＆Illustrator］

新ほめられデザイン事典レイアウトデザイン［Photoshop＆Illustrator］

作者:上田マルコ,尾沢早飛,加瀬透,近藤聡,サノワタル
発売日: 2018/12/03
メディア: Kindle版

神速Photoshop[グラフィックデザイン編]
CS6/CC/CC 2015対応

神速Photoshop[グラフィックデザイン編] CS6/CC/CC 2015対応

作者:浅野桜,村上良日,加藤才智,ハマダナヲミ
発売日: 2016/03/12
メディア: 大型本

世界一わかりやすい
Illustrator & Photoshop & XD
Webデザインの教科書

世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書

作者:黒野明子,庄崎大祐,角田綾佳,森和恵
発売日: 2018/10/05
メディア: 単行本（ソフトカバー）

Photoshop レタッチ・加工〔アイデア図鑑〕
すぐに使えるレタッチの基本から、目を奪われるプロレベルの作品まで

Photoshopレタッチ・加工アイデア図鑑すぐに使えるレタッチの基本から、目を奪われるプロレベルの作品まで

作者:楠田諭史
発売日: 2017/07/25
メディア: 単行本

Photoshop & Illustrator

Photoshop & Illustratorでつくる
手描き感デザイン

Photoshop & Illustratorでつくる手描き感デザイン

発売日: 2016/03/23
メディア: 単行本

配色

知りたい配色デザイン

知りたい配色デザイン (知りたいデザインシリーズ)

作者:ARENSKI
発売日: 2018/10/10
メディア: 単行本（ソフトカバー）

HTML5&CSS3

HTML5&CSS3ステップアップブック

作者:エビスコム
発売日: 2018/01/24
メディア: 単行本

CSSグリッドレイアウトデザインブック

作者:エビスコム
発売日: 2018/06/15
メディア: 単行本（ソフトカバー）

UIデザイン

UIデザインの教科書［新版］
マルチデバイス時代のインターフェース設計

UIデザインの教科書［新版］マルチデバイス時代のインターフェース設計

作者:原田秀司
発売日: 2019/01/21
メディア: Kindle版

UIデザインみんなで考え、カイゼンする。

作者:栄前田勝太郎,河西紀明,西田陽子
発売日: 2019/03/19
メディア: 単行本（ソフトカバー）

UXデザイン

Web制作者のためのUXデザインをはじめる本
ユーザビリティ評価からカスタマージャーニーマップまで

Web制作者のためのUXデザインをはじめる本ユーザビリティ評価からカスタマージャーニーマップまで

作者:玉飼真一,村上竜介,佐藤哲,太田文明,常盤晋作,株式会社アイ・エム・ジェイ
発売日: 2016/11/15
メディア: 単行本（ソフトカバー）

ノンデザイナーでもわかる
UX+理論で作るWebデザイン

ノンデザイナーでもわかる UX+理論で作るWebデザイン

作者:川合俊輔,大本あかね
発売日: 2017/09/26
メディア: 単行本（ソフトカバー）

Webアクセシビリティ

デザイニングWebアクセシビリティ
- アクセシブルな設計やコンテンツ制作のアプローチ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

作者:太田良典,伊原力也
発売日: 2015/07/27
メディア: 単行本（ソフトカバー）

Webライティング

スピードマスター 1時間でわかる Webライティング

作者:ふくだたみこ,さかたみちこ
発売日: 2018/11/30
メディア: 単行本（ソフトカバー）

100倍クリックされる超Webライティング実践テク60

作者:東香名子
発売日: 2017/03/02
メディア: 単行本

心理学【心を動かすデザイン&人を動かすしくみ】

[買わせる]の心理学
消費者の心を動かすデザインの技法61

[買わせる]の心理学消費者の心を動かすデザインの技法61

作者:中村和正
発売日: 2018/08/01
メディア: 単行本（ソフトカバー）

「ついやってしまう」体験のつくりかた
人を動かす「直感・驚き・物語」のしくみ

「ついやってしまう」体験のつくりかた人を動かす「直感・驚き・物語」のしくみ

作者:玉樹真一郎
発売日: 2019/08/08
メディア: 単行本（ソフトカバー）

CSS設計&Sass

Web制作者のためのCSS設計の教科書
モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

作者:谷拓樹
発売日: 2014/07/24
メディア: 単行本（ソフトカバー）

Web制作者のためのSassの教科書
改訂2版 Webデザインの現場で必須のCSS プリプロセッサ Web制作者のための教科書シリーズ

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ

作者:平澤隆,森田壮
発売日: 2017/09/15
メディア: Kindle版

はじめてのCSS設計
フロントエンドエンジニアが教えるメンテナブルなCSS設計手法

はじめてのCSS設計フロントエンドエンジニアが教えるメンテナブルなCSS設計手法 (WEB Engineer’s Books)

作者:田辺丈士,大江遼,藤岡龍太,安光太郎,株式会社アイ・エム・ジェイ
発売日: 2017/03/14
メディア: 単行本（ソフトカバー）

2019-08-05

【2019】現役Webデザイナー使用中！ソフトウェア一覧

ソフトウェア Webデザイン HTMLコーディングアプリ

現役Webデザイナー使用中！ソフトウェア一覧

2019年現在、Webデザイン・HTMLコーディングの仕事で使用しているフリーソフトウェア・有料ソフトウェア・Windows標準アプリをご紹介します。

フリーソフトウェア
有料ソフトウェア
Windows標準アプリ
- Snipping Tool
- 電卓

フリーソフトウェア

Brackets

プラグイン（拡張機能）が豊富！自分好みのBracketsに。
プラグインを使い倒して、コーディングを時短！
普段のHTMLコーディング時に使用しています。

Brackets プラグイン（拡張機能）について動画付きで下記のWebサイトで紹介してくれています。qiita.com

サクラエディタ

国産のテキストエディタだから、日本語！文字検索・置換に正規表現が使えます。
主に、メモ帳、リライト時に使用しています。

サクラエディタのインストール・初期設定については、下記のWebサイトが分かりやすいです。blog.codecamp.jp

サクラエディタの機能については、下記のWebサイトが分かりやすいです。gabekore.org

ffftp

Windows用のFTPクライアントソフトの定番!
主に、バックアップ・DWで上げれないファイルに使用しています。

Win Merge

ファイル・フォルダ比較するソフト。
WinMergeでローカルとサーバーのファイル・フォルダ比較し、差異を確認した上でアップロード・ダウンロード作業をおこなっています。
DW、FFFTPでも、環境設定でファイルを比較するソフトをWinMergeに設定できます。

Win Mergeの環境設定・使用例については、下記のWebサイトをご確認ください。px.otogawa.com

有料ソフトウェア

Adobe Photoshop CC （フォトショップ）

Photoshopは、写真編集に特化したビットマップ画像加工ツール。
主に画像加工に使用しています

Adobe Illustrator CC （イラストレーター）

Adobe Illustratorは、イラスト作成（グラフィックデザイン）に適しています。
画像を劣化することなく拡大縮小できるベクターというデータ形式の図形描画ソフト。
主に、ロゴ、アイコン、名刺作成をするに使用しています。

Adobe Dreamweaver CC （ドリームウィーバー）

Webサイトを構築できるホームページ作成ソフト。

Adobe XD CC （エクスペリエンスデザイン）

WebサイトやアプリのUI・UXデザイン・ワイヤーフレーム・デザインカンプ・プロトタイプ化・共有&コメントなどをおこなえるUXデザインツール。
ロゴ・アイコン・写真加工以外は、XDでまるっと制作しています。

Adobe XDの使い方については、下記のWebサイトをご確認ください。liginc.co.jp

Windows標準アプリ

Snipping Tool

Windows Vista/7/8/8.1/10の標準アプリ「スクリーンショットキャプチャーツール」
プラウザ拡張機能のキャプチャではできない、PC画面上（デスクトップ）どこでも手軽にキャプチャ&メモが撮れます！

Snipping Toolの使い方については、下記のWebサイトをご確認ください。www.ask-mswin.com

電卓

シンプルな電卓アプリ。
計算式・計算結果の履歴表示してくれて、便利に使えます。

2016-10-01

リスト(list)のulやolについて気を付けなければならないこと

HTML5＆CSS3 li ul ol リストの入れ子リスト html HTML5

f:id:webdesign-css-html-koyaman:20200521205906j:plain

リスト(list)のulやolについての疑問

リスト(list)のulやolについての疑問

f:id:webdesign-css-html-koyaman:20200521210003j:plain

1.ulやolにpタグは入れてよいか？

どこにでも入れていいわけではない。
<li>タグの中に追加する！

<ul>や<ol>の中に<p>を追加する場合は、以下のように記述する

○
<ul>
  <li></li>
  <li><p></p></li>
</ul>

○
<ul>
  <li></li>
  <li></li>
</ul>
<p></p>

×
<ul>
  <li></li>
  <p></p>
</ul>

×
<ul>
  <p></p>
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
  <li></li>
</ul>

※<ul>の直下には、<p>タグを追加してはいけない。

　直下に入れられるのは、<li>だけ　
　下記のように追加する。

○
<ul>
  <li>
    <p></p>
  </li>
  <li>
    <br>
  </li>
</ul>

2.リストの入れ子のルール

子リストは、親の<li>の中に記載する

<ul>
  <li>親リストA
    <ul>
      <li>親リストAの子1</li>
      <li>親リストAの子2
        <p>親リストAの子2にｐタグ追加</p>
      </li>
    </ul>
  </li>
  <li>親リストB</li>
  <li>親リストC
    <p>親リストCの子1にｐタグ追加</p>
  </li>
</ul>

3.他に子リストに追加できるもの
〔ul、ol、dl、div、h1～h6、p、span、img、strong〕

子リストにolを追加

<ul>
  <li>親リストA
    <ol>
      <li>親リストAの子1</li>
      <li>親リストAの子2
        <p>親リストAの子2にｐタグ追加</p>
      </li>
    </ol>
  </li>
  <li>親リストB</li>
  <li>親リストC
    <p>親リストCの子1にｐタグ追加</p>
  </li>
</ul>

子リストにdlを追加

<ul>
  <li>親リストA
    <dl>
      <dt>親リストAの子1</dt>
      <dd>親リストAの子2
        <p>親リストAの子2にｐタグ追加</p>
      </dd>
    </dl>
  </li>
  <li>親リストB</li>
  <li>親リストC
    <p>親リストCの子1にｐタグ追加</p>
  </li>
</ul>

その他に子リストに追加できるタグ

<ul>
  <li>親リストA
    <div>子リストにdivを追加</div>
  </li>
  <li>親リストB</li>
</ul>

<ul>
  <li>親リストA
    <p>子リストにpを追加</p>
  </li>
  <li>親リストB</li>
</ul>

<ul>
  <li>親リストA
    <span>子リストにspanを追加</span>
  </li>
  <li>親リストB</li>
</ul>

<ul>
  <li>親リストA
    <img src="" alt="子リストにimgを追加">
  </li>
  <li>親リストB</li>
</ul>

<ul>
  <li>親リストA
    <strong>子リストにstrongを追加</strong>
  </li>
  <li>親リストB</li>
</ul>

<ul>
  <li>親リストA
    <p>子リストにpを追加</p>
  </li>
  <li>親リストB</li>
</ul>

4.ulに直接文字を入力してもよいのか？

ulには、直接文字を入れてはいけない。
ulタグはlist要素のみしか入れられない。
文字を入力したい場合は、<li></li>の中であれば、入力できる。
ul直下には、直接文字を入力してはならない。

×
<ul>
  テキストテキスト
  <li></li>
  <li></li>
</ul>

○
<ul>
  <li>テキストテキスト</li>
  <li></li>
</ul>

5.liの上にリストの見出しを入れたい場合等、どうするのか。

下記の２つのどちらか使用しています。

ulタグの上に、<h×>や<p>タグで見出しを付ける。
リストを入れ子にして、親リストに見出しを入れる。

5-1.ulタグの上に、<h×>や<p>タグで見出しを付ける場合

<h×>見出し</h×>
<ul>
  <li>テキストテキスト</li>
  <li></li>
</ul>

<p>見出し</p>
<ul>
  <li>テキストテキスト</li>
  <li></li>
</ul>

5-2.リストを入れ子にして、親リストに見出しを入れる場合

<ul>
  <li>親リストに見出し
    <ul>
      <li>テキストテキスト</li>
      <li>テキストテキスト</li>
    </ul>
  </li>
</ul>

リストの子リストに追加できるもの、リストの入れ子のルールについて参考にしたWebサイト

参考にしたWebサイト1

<li>タグ(リスト)を入れ子にして階層化させることについて詳しく書かれている。
親と子で色分けされており、解りやすい、美しい、図付きで解説されている参考サイト！
liの入れ子にできるタグ・入れ子のコードサンプルあり♪

www.dolceproof.jp

参考にしたWebサイト2

入れ子のルールを理解するために必要なインライン要素とブロック要素について、解りやすく説明されている参考になるWebサイト！
※HTML5でマークアップルールの変更は、下記のサイトでは割愛されています。

bellsmarket.hatenablog.com

参考にしたWebサイト3

「犯してはいけないHTMLタグの過ち10個」というタイトル。犯してはいけないHTMLタグの過ちを自分がやってしまっていないか、すぐにチェックしたくなるWebサイト

weboook.blog22.fc2.com

2016-08-13

リセットCSS　HTML5

HTML5＆CSS3 リセットCSS HTML5 CSS3

f:id:webdesign-css-html-koyaman:20200524012759j:plain

私が使用しているHTML５用リセットCSS

HTML５も使用している要素のみ記述

@charset "utf-8";
/* CSS Document */

/* reset *//* 使用している要素のみを記述。引き忘れ注意！ */
html, body, div, section, header, nav, menu, section, article, aside, dialog, figure, footer, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, th, td , img {
margin: 0;
padding: 0;
line-height:1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

article, aside, dialog, figure, footer, header, menu, nav, section {

display: block;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul, ol{
list-style: none;
}
a {
text-decoration: none;
}
*, *:before, *:after {
box-sizing: border-box;
}
img {
vertical-align: bottom;
border: 0;
}

/* その他 */

.clear{
　clear:both;
}
.clearfix:after {
content: "";
height: 0;
display: block;
clear: both;
}

/* body */
/* bodyに関しての指定 backgroundやcolor*/

/* layout */
/* layoutに関しての指定 width・background・margin・paddingなど*/

/* #header */
/* #header 上から順に記載していく*/

/* layout */

2016-08-13

リセットCSS

HTML5＆CSS3 リセットCSS CSS3

私が使用しているリセットCSS

使用している要素のみ記述していく

@charset "utf-8";
/* CSS Document */

/* reset */　/* 使用している要素のみを記述。引き忘れ注意！ */
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, th, td , img {
margin: 0;
padding: 0;
line-height:1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul, ol{
list-style: none;
}
a {
text-decoration: none;
}
*, *:before, *:after {
box-sizing: border-box;
}
img {
vertical-align: bottom;
border: 0;
}

/* その他 */

.clear{
　clear:both;
}
.clearfix:after {
content: "";
height: 0;
display: block;
clear: both;
}

/* body */
/* bodyに関しての指定 backgroundやcolor*/

/* layout */
/* layoutに関しての指定 width・background・margin・paddingなど*/

/* #header */
/* #header 上から順に記載していく*/

Chrome拡張機能について

拡張機能のメリット・デメリット

Chrome拡張機能追加・設定の方法

Webデザインの時に使用するChrome拡張機能

「ColorZilla拡張機能」の使い方

「ColorZilla」拡張機能の特徴

「ColorZilla」拡張機能のオプション

「Full Page Screen Capture拡張機能」の使い方

「Full Page Screen Capture」拡張機能の特徴

「Full Page Screen Capture」拡張機能のオプション

「Page Ruler Redux」拡張機能の使い方

自由に選択したい時に『任意モード』

要素のサイズを知りたい時に『Element Mode（要素モード）』

「Page Ruler Redux」拡張機能の特徴

「Page Ruler Redux」拡張機能のオプション

HTMLコーディングの時に使用するChrome拡張機能

Webサイト制作の時短・効率アップに使用するChrome拡張機能

Webライティングの時に使用するChrome拡張機能

Webディレクション・デザイン・コーディングの時に使用するChrome拡張機能

その他のChrome拡張機能

現役Webデザイナー使用中のChrome アプリ

現役Webデザイナーが2020年本屋で厳選購入したWeb制作者必見の本！

Webライティング

沈黙のWebライティング—Webマーケッター ボーンの激闘—〈SEOのためのライティング教本〉

現役Webデザイナーが2019年本屋で厳選購入したWeb制作者必見の25冊！

Webデザイン

なるほどデザイン目で見て楽しむ新しいデザインの本。

やってはいけないデザイン

デザイン入門教室[特別講義]確かな力を身に付けられる ~学び、考え、作る授業~

デザインはストーリーテリング「体験」を生み出すためのデザインの道具箱

広告デザイン

文字のレイアウトで魅せる広告デザイン

Photoshop & Illustrator & XD参考書

新ほめられデザイン事典 レイアウトデザイン［Photoshop＆Illustrator］

神速Photoshop[グラフィックデザイン編]CS6/CC/CC 2015対応

世界一わかりやすいIllustrator & Photoshop & XDWebデザインの教科書

Photoshop レタッチ・加工〔アイデア図鑑〕すぐに使えるレタッチの基本から、目を奪われるプロレベルの作品まで

Photoshop & Illustrator

Photoshop & Illustratorでつくる手描き感デザイン

配色

知りたい配色デザイン

HTML5&CSS3

HTML5&CSS3ステップアップブック

CSSグリッドレイアウト デザインブック

UIデザイン

UIデザインの教科書［新版］マルチデバイス時代のインターフェース設計

UIデザイン みんなで考え、カイゼンする。

UXデザイン

Web制作者のためのUXデザインをはじめる本ユーザビリティ評価からカスタマージャーニーマップまで

ノンデザイナーでもわかるUX+理論で作るWebデザイン

デザイニングWebアクセシビリティ- アクセシブルな設計やコンテンツ制作のアプローチ

Webライティング

スピードマスター 1時間でわかる Webライティング

100倍クリックされる 超Webライティング実践テク60

心理学【心を動かすデザイン&人を動かすしくみ】

[買わせる]の心理学消費者の心を動かすデザインの技法61

「ついやってしまう」体験のつくりかた人を動かす「直感・驚き・物語」のしくみ

CSS設計&Sass

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ

はじめてのCSS設計フロントエンドエンジニアが教えるメンテナブルなCSS設計手法

Win Merge

有料ソフトウェア

Adobe Photoshop CC （フォトショップ）

Adobe Illustrator CC （イラストレーター）

Adobe Dreamweaver CC （ドリームウィーバー）

Adobe XD CC （エクスペリエンスデザイン）

Windows標準アプリ

電卓

リスト(list)のulやolについての疑問

1.ulやolにpタグは入れてよいか？

2.リストの入れ子のルール

3.他に子リストに追加できるもの〔ul、ol、dl、div、h1～h6、p、span、img、strong〕

子リストにolを追加

子リストにdlを追加

その他に子リストに追加できるタグ

4.ulに直接文字を入力してもよいのか？

5.liの上にリストの見出しを入れたい場合等、どうするのか。

5-1.ulタグの上に、<h×>や<p>タグで見出しを付ける場合

5-2.リストを入れ子にして、親リストに見出しを入れる場合

Chrome 拡張機能について

Chrome 拡張機能追加・設定の方法

Webデザインの時に使用するChrome 拡張機能

HTMLコーディングの時に使用するChrome 拡張機能

Webサイト制作の時短・効率アップに使用するChrome 拡張機能

Webライティングの時に使用するChrome 拡張機能

Webディレクション・デザイン・コーディングの時に使用するChrome 拡張機能

その他のChrome 拡張機能

沈黙のWebライティング
—Webマーケッターボーンの激闘—〈SEOのためのライティング教本〉

なるほどデザイン
目で見て楽しむ新しいデザインの本。

デザイン入門教室[特別講義]
確かな力を身に付けられる ~学び、考え、作る授業~

デザインはストーリーテリング
「体験」を生み出すためのデザインの道具箱

新ほめられデザイン事典レイアウトデザイン
［Photoshop＆Illustrator］

神速Photoshop[グラフィックデザイン編]
CS6/CC/CC 2015対応

世界一わかりやすい
Illustrator & Photoshop & XD
Webデザインの教科書

Photoshop レタッチ・加工〔アイデア図鑑〕
すぐに使えるレタッチの基本から、目を奪われるプロレベルの作品まで

Photoshop & Illustratorでつくる
手描き感デザイン

CSSグリッドレイアウトデザインブック

UIデザインの教科書［新版］
マルチデバイス時代のインターフェース設計

UIデザインみんなで考え、カイゼンする。

Web制作者のためのUXデザインをはじめる本
ユーザビリティ評価からカスタマージャーニーマップまで

ノンデザイナーでもわかる
UX+理論で作るWebデザイン

デザイニングWebアクセシビリティ
- アクセシブルな設計やコンテンツ制作のアプローチ

100倍クリックされる超Webライティング実践テク60

[買わせる]の心理学
消費者の心を動かすデザインの技法61

「ついやってしまう」体験のつくりかた
人を動かす「直感・驚き・物語」のしくみ

Web制作者のためのCSS設計の教科書
モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Web制作者のためのSassの教科書
改訂2版 Webデザインの現場で必須のCSS プリプロセッサ Web制作者のための教科書シリーズ

はじめてのCSS設計
フロントエンドエンジニアが教えるメンテナブルなCSS設計手法

3.他に子リストに追加できるもの
〔ul、ol、dl、div、h1～h6、p、span、img、strong〕