コーディング環境

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 等を利用するために同プランを契約されているなら、こちらの利用もオススメします。

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%」で指定する。

【CSS】縦書き(writing-mode)

ブラウザの対応がかなり進んできたので、使っているサイトも見かけるようになりました。
https://caniuse.com/?search=writing-mode

値の「sideways-…」は、現状、Firefoxのみ対応なので利用は難しい。

jQuery複数バージョンの混在

上記は片方の項目がチェックされたらラジオボタンのように他のチェックを外すjQueryを使ったプログラム。

このサンプルで、他のチェックを外すために使っている jQueryメソッド「.prop()」は、jQuery1.10以降から追加されたので、jQuery 1.12.4をCDNで読込んでいます。