「HTML5」と「HTML Living standard」

先日、「HTML5」と「HTML Living standard(以下HTML LS)」の違いについてご質問をいただいたので、メモしておきます。
あくまで私個人の見解です。


【結論】両者の違いは…ざっくり言うと「名前」と「策定者(開発者)」だけ


多少、要素(ダグ)や属性を新しく追加・変更・廃止していますが、基本的な仕様は変わりません。
ダグや属性などの仕様変更は昔からありました。
ただし、HTML LSは頻繁に仕様が更新されるようなので、定期的に仕様書参考サイトなどで確認することは必要です。

策定者の移管

「HTML5」までは「W3C」が策定していましたが「HTML LS」はW3Cの対抗組織「WHATWG(ブラウザー業界団体)」が提唱したものです。
「HTML5」も元々はWHATWGが提唱し、W3Cが採用したもの。

昔、W3Cが行った、XHTML1.0からHTML5へのような大きな方向転換はないので、
「HTML5」仕様でWebを制作していても殆ど問題はありません。


「HTML5」は廃止?もう古い?


「HTML LS」の基本となっているのは「HTML5」

「HTML5」が廃止?というより、新版に名称変更された感じです。
今後はバージョン(数字)が表記されません。

「HTML5」であまり使われなかったダグや属性を廃止したり、便利なコーディングができるように新しいタグや属性を追加したり、細かな仕様を変更したところもあります。
ですが、廃止されるタグや属性は殆ど使われてこなかったものですし…
新しく追加されたものも特別な目的でも無い限り、無理して使う必要もないでしょう。
現状では「HTML5」の知識だけで充分だと思います。
廃止されたタグや属性は(使ったことも無いものばかりですが)少し注意して、定期的に仕様書参考サイトなどで確認しましょう。


「HTML5」の学習をしてもムダ?


ムダではありません!

繰り返しますが「HTML LS」のベースは「HTML5」です。

学習用の動画や書籍なども「HTML5版」がいまだに多いですが、
「HTML LS対応版」のものが出たとしても
結局はHTML5までの基本的なHTMLのお話をし…
HTML LSで追加されたタグや属性のお話を少しして…
最後は「細かい仕様変更は仕様書(Web)を確認して・・・」
といった内容になるのはないでしょうか。

また、Webクリエイターの認定試験として有名な、
「HTML5プロフェッショナル認定試験」や「Webクリエイター能力認定試験」は「HTML5」仕様です。(2022年6月現在)
「Webクリエイター能力認定試験」にいたっては、HTML5以前の「XHTML1.0」対応版試験が最近(2022年3月末)になってやっと休止したほどですから、
「HTML LS」版の認定試験はまだまだ先になると思われます。


【まとめ】


  • 「HTML5」とか「HTML LS」とか改定版(バージョン)の概念がなくなり、今後は「HTML」という名前(仕様)に統一される。
  • 現状は「HTML5」の知識だけで充分。
  • 細かな仕様変更は定期的に確認することが必要。

HTMLの策定権が現場側の「WHATWG」に。
W3C派だったMicrosoft社も「WHATWG」に加盟。
Microsoft社「Internet Explorer」もサポート終了。
今後のWeb制作は、より良い環境になるのではないかと期待しています。


【参考サイト】Mozillaデベロッパーサイト
廃止または非推奨の要素

コーディング環境

Web制作(コーディング)に必要なソフトウェアのご紹介。


エディター(無料のモノのみご紹介)


コーディングはパソコンに付属のエディタ…
・メモ帳(Windows)
・テキストエディット(MacOS)
でも作成・編集することができますが、下記のエディターやWeb作成ソフトを利用した方が作業効率が良いです。


Windows / MacOS 共通

●Atomhttps://atom.io/
プラグイン(パッケージ)を追加することで、FTP(ファイル転送)機能を利用することも可能。
《参考サイト:AtomからFTP接続する

●Visual Studio Codehttps://code.visualstudio.com/Download
プラグイン(拡張機能)を追加することで、FTP(ファイル転送)機能を利用することも可能。
《参考サイト:簡単!VS CodeでFTPアップ


上記2種類はデフォルトで英語表示のため、日本語環境で利用したい場合は、日本語化(プラグインの追加)か必要。
《参考サイト:Atomエディタのインストールと日本語化…
《参考サイト:Visual Studio Codeを日本語化する
個人的な感想としては「Visual Studio Code」のほうが日本語化が容易だと思います。

現在の「Visual Studio Code」では、インストールして最初に起動した際、日本語化を促すリンクボタンが表示されます。
そちらをクリックして進み、指示に従って再起動すれば、次回起動時から日本語表示になります。

(2022.03 MacOS版のみで確認)


Windows版

●TeraPadhttps://tera-net.com/library/tpad.html
FTP 無し。必要な場合は下記「FTPソフト」と併用します。


MacOS版

●mihttps://www.mimikaki.net/
FTPの一部機能(リモートファイルの操作・編集)は有り。


画像編集ソフト(有料のモノのみご紹介)


●Adobe Photoshophttps://www.adobe.com/jp/products/photoshop.html

主に写真(ビットマップ画像)を加工すためのソフトウェア。

●Adobe Illustratorhttps://www.adobe.com/jp/products/illustrator.html

パス描画でのベクター画像(ロゴ・アイコン・SVG画像など)の作成に使用。
Webのデザインカンプ(デザイン見本)・バナー広告の作成にも利用されます。

●Adobe XD[プロトタイプ作成](https://www.adobe.com/jp/products/xd.html

Webのプロトタイプ(試作品)作成に使用。
プロトタイプとは…デザイン見本としてだけでなく、リンク移動やクリック時の動きなどサイトの動作も確認させることができる試作品のこと。


上記の3種類は全てAdobe社の「Creative Cloud コンプリートプラン」に含まれます。
3種を単体で契約するよりも同プランのほうがお得です。

学生・教職員の方は、z教育機関向けの安価なプランを利用することも可能。
一般の方でも学習機関に通われている場合、学割プランを利用できるスクールもあります。
詳しくは各スクールの事務局にお問い合わせください。


FTPソフト(ファイル転送/無料のモノのみご紹介)


●FileZilla(https://filezilla-project.org/

●FFFTP(https://forest.watch.impress.co.jp/library/software/ffftp/


Web作成ソフト(有料のモノのみご紹介)


●Adobe Dreamweaverhttps://www.adobe.com/jp/products/dreamweaver.html

上述のエディタやFTPの機能が予め準備されており、プラグイン等の追加はほぼ必要ありません。
また、Git/GitHub との連携や SASS(SCSS)/ LESS の自動コンパイルなど、中級・上級者向けの機能も予め備わっています。
有料にはなりますが、Adobe社の「Creative Cloud コンプリートプラン」に含まれるため、同社の Illustrator・Photoshop や XD 等を利用するために同プランを契約されているなら、こちらの利用もオススメします。

【Python】Anaconda Prompt 基本コマンド

【Python】Anaconda Prompt 基本コマンド

Python アナコンダプロンプトでよく使用するの基本コマンドのメモです。
随時追加していきます。

【 Anaconda Prompt コマンドリスト】

●バージョン確認

conda -V

●ヘルプ

conda -h

●全てアップデート

conda update --update-all

アップデートリスト一覧

conda update -n

アナコンダインストール時の注意

Windowsでアナコンダをインストールする場合は、こちらの記事もご確認を。

iPhone でtransform(rotate)が動かない件

iPhone でtransform(rotate)が動かない件

iPhone実機(Safari, Chrome)で、CSS「transform(特にrotate)」を指定した要素が正常に動かない場合の対応方法です。

【原因】

「transform: …」をした要素の親要素奥行きが指定されていないことが原因の一つらしい。

【対処】

「transform」を指定した要素の親要素に「-webkit-perspective」プロパティで奥行きを追記する
参考

上記サンプルでは「-webkit-perspective: 500px;」(CSS・24行目)の1行を親要素「#toggle」に追加することで解決しました。

「transform」プロパティの値にはZ軸や3Dの指定もあるので、iPhoneでは「transform」が指定された要素を厳密な3D空間として扱うのでしょうね。

javascript 別窓で開く

リンク先のページを別窓で開く javascript コードです。

PHP 参考サイト

PHP 参考サイト

いつも拝見させてもらっている PHP 参考サイト集です。

主に「PHPマニュアル」を参考にしていますが、たまにしか使わなくて忘れてしまう関数やクラスなどを取り上げたサイトのリンク先もブックマーク代わりにメモしてます。
良かったら参考にどうぞ!

全般

●PHP マニュアル:https://www.php.net/manual/ja/

オブジェクト


PHPプログラムのサンプルはこちらから。

vwで幅指定をすると横スクロールバーが表示される件

要素の横幅を「100vw(viewport width)」に指定すると、横スクロールバーが表示されるので注意!

【原因】Windows では Viewport にスクロールバーの幅が含まれるため。
MacOS・iOSではスクロールバーはフロート表示されるのでこの現象は見られない。(Androidは未確認)

【対策】パーセンテージ「100%」で指定する。