WordPressのページ更新をするときに便利なツールあれこれ
まず、GoogleChromeはPCに入れておいてください
HTMLを編集するのにとても便利な機能がたくさんあります。
https://www.google.co.jp/chrome/browser/desktop/
画面の上で右クリックして「検証」
これで、スマホサイトのチェックが出来ます。
その後いくつか便利な拡張機能を入れておく
▼カラーピッカー ブラウザの上の色を拾うのに便利
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
▼MeasureIt これでサイズが測れるので便利です
https://chrome.google.com/webstore/detail/measureit/pokhcahijjfkdccinalifdifljglhclm
▼フォトショップを持ってない場合はこのソフトが便利です
オンラインエディタ PIXLR EDITOR
https://pixlr.com/editor/
▼HTMLのことを勉強するならここ 登録してから、はじめてのHTMLを一通りやってみましょう
プログラミングをオンラインで学ぶ はじめてのHTML
http://codeprep.jp/
▼動画でマスターするドットインストール HTML入門
▼HTMLエディタをPCにダウンロードするならこのソフトが軽くて便利です
Crescent Eve
http://www.kashim.com/eve/get.html
HTMLの基本を知っておく
HTMLの目的のひとつに「すべての人に平等に情報を」という使命があります。
それはPCを使っている人、スマホを使っている人、音声リーダーでホームページを読んでいる人、誰がどの端末を使って見ても、同じ情報が行き渡るようにするのがHTMLの役割なのです。
すべての「人」と書きましたが、ロボットが読んでも意味が理解できるのがHTMLです。
ロボットは文章を見たときに、どれが見出しなのか、どれが段落なのか、どこへリンクが貼られているのか、どの文字が強調なのか、タグを頼って意味を理解しています。
タグは世界共通の言語ですが、10年ほど前から細かいバージョンアップを繰り返しており、徐々にその記述の仕方に対して「今の推奨はこれですよ」という方法が変わってきています。
昔の書き方のタグでも、ちゃんと表示できるブラウザがあったりしますが、スマホでは表示できないとか、いろんなバージョンがあります。
逆に最新の記述方法では、古いブラウザが追いついていない、、などのデメリットもあり、
どこに基準をおいて、ほぼすべての人がちゃんと読める形というのを、コーディングをする人は意識してタグをつけています。
文章には決まりがあり、論文のように整理されているのが理想です
見出しには見出しの意味があり、ただ太字で大きな文字が見出しとはかぎらない
前提として、入力する文章は、決まりにそってコーディングされていること(正確なタグがついていること)
そのタグに対して、装飾をつけています。css(スタイルシート)と言います。
ブロックとインラインの違い
ブロックは箱、インラインは箱に入った文字など
ブロックは面積がある、マージンやパディングなどがある、
箱単位でスタイルを設定します。
ブロックには、見出し、段落、引用などがあります。
インラインは箱単位ではなく、その文字そのものへのスタイルです。
インラインには太字、リンク、イメージなどがあります
たとえば、見出しはブロック単位で適用されます
改行はブロックではなくインラインです。段落はブロックです。
Spanはブロックではなくインライン、divはブロックです。
スタイルにはブロック要素に効くスタイルと、インラインに効くスタイルがあるのでその違いを頭にいれておかないと、意図する形につくれません。


ここからここまでを見出し3にしようとしたら、ちゃんと前後に段落をいれて、ブロックをわけてあげないといけません。
関連記事
-

-
NFTについての素朴な疑問と答えをまとめました
こんにちは、モモンガです。わたしのYoutubeチャンネルで、NFTについての完全ガイドの動画を作っ… ≫続きを読む
-

-
【Affinity裏技】Illustratorユーザー必見!Affinityの縦書きで「縦中横」を実現する方法を発見しました
私のYouTubeチャンネルで、Affinityの番組がめっちゃ人気です。 特に、今までAdobeか… ≫続きを読む
-

-
Q:ハッシュタグとカテゴリーの違いとは?
ハッシュタグ #SEO対策 とか #SNS入門 とか #サポート備忘録 とか。 ハッシュタグ流行って… ≫続きを読む
-

-
zoomのオンラインセミナーをYoutubeでライブ同時配信する方法
zoomのオンラインセミナーをYoutubeでライブ同時配信する方法について調べていたのでやり方を記… ≫続きを読む
-

-
調整レイヤーの使い方
フォトレタッチの極意1:紅葉の色彩をアップする | Adobe Creative Station 部… ≫続きを読む
-

-
フォトショップでバウンディングボックスを自動表示
これ・・・意外と便利なのに、初期設定ではそうなってないので知らずに使っている人が多いかもしれません。… ≫続きを読む
-

-
Photoshopの色相・彩度のチュートリアル
(1)色相・彩度を選 (2)左下の手のひらマークをクリックし、スポイトで変更したい色を選択する (3… ≫続きを読む
-

-
Q:インスタやってるからブログは不要?
SNSがとても手軽な時代なので、インスタやLINE、ツイッター(エックス)など、SNSをしていれば、… ≫続きを読む
-

-
(WEB制作入門4)WordPressって何?
WordPressは、無料で配布されているブログを作るソフトです。 普通のソフトは、ワードとかExc… ≫続きを読む
-

-
千畳敷カールで2612体験してきました
10月3日、下界はまだ夏のなごりが残る初秋。この日、中央アルプス駒ケ岳ロープウェイにのって、2612… ≫続きを読む


