レスポンシブWebデザインでのCSSは、もうIf文のようなプログラミングだ【自営業に必要なスキルはフロントエンドでの宣伝だ】

　ホームページのHTMLの画面で「もしスマホの画面サイズな850px以下になったら並列２段を１段にする」というのをCSSで出来るのだが、これってプログラミングのIf文じゃないのか？というと「分かってないな」と言い出す無知がいる。世の中には軽視したり、小難しく考える無知が多くいる。

　例えば「JavaScriptはclassを決めれない！のでプログラミングではない」という人がいるが、JavaScriptはクラスやIDを決めるHTMLに実装して使うのが現実だ。他のプログラミング言語で、ここまで便利な物は無いのだから、否定しているのが変だ。クラスもIDもCSSで表示位置を細かく指定できる。

　クラスとは例えば学校のクラスという属性で、IDは学生個別の番号のようなものでHTML書類内では1個しか使えず、クラスは例えば部活（HTML）内で同じクラスの同級生もいるので使える。

　ちなみに投資のFXでもIf注文というのがある。これはプログラミングのIfと似たようなもんだ。これはFXを知らない自称プログラマーは、無知だという事だ。FXは他の古臭い株などの投資と違い、システムが面白いのだ。

　今までのCSSは文字のサイズや色などだけを決めるという物だったが、今は「小さい画面のスマホにも対応して」という需要があり、CSSがそれをJavaScriptよりは簡単にできるようになった。その方法が以下だ。

CSS書類（重要な所だけを抽出しているが、実際の設定は数多い⋯）

 #sub -1	{
　width: 200px;
　float: left;
}

@media screen and  (max-width: 850px) {
 #sub -1 {
　width: 100%;
　float: none;
		}
@media only screen and (max-width: 850px) {
 #大画面用の画像  { display: none !important; }
 #スマホなど用の画像  { display: block !important; }

#はHTMLで定義したidで 、sub-1とは左にあるサイド画面で、３段画面の場合は200ピクセルで表示だ。

　HTML書類内での書き順は１番上が、main（まん中の本文）で→サブ１（左）→サブ２（右）だ。こうしないとスマホの画面の時に、メイン→サブ１→サブ２とCSSなどで設定しないと表示されない。

　また良くないのはbr（改行）タグの多用で、例えば文章の横の長さを統一しようとして狭い横幅で多数改行し、これを下に表示すると縦長になりすぎるので、p（段落）タグの使用が推奨だ。

　そしてCSSのメディアスクリーン機能で、最大850ピクセル以下だったら、サブ１の横幅を100％にし、浮遊させないとすると、サブ１はホームページの画面の下というか、HTMLで書いた場所に行く。

　これで1段になるのでスマホでも見れるようになる。HTMLでクラスやIDを指定するので、HTMLがすでにプログラミングのようなものだが、昔から大企業の無知な管理職などは軽視していた。

　逆に言ってしまえば、プログラミングも所詮は、HTMLのように上から下に流れるだけのもので、無知な管理職らが装飾しすぎた。世の中はこういう勘違いな上司が多すぎるので、うまくいかない。

　メディア・オンリー・スクリーンとは１つのみ表示するという機能で、noneで非表示にし、blockで表示する。これは画像に限らず、文字でも何でも出来る。ただし設定をし忘れたりすると、HTML内の設置した場所に表示されるので、必ず表示するか非表示かを設定だ。

　これは例えばタブレットの横幅の最大サイズの1360px以上は3段にし、それ以下は2段で、760px以下は1段などとしても良かろう。しかしこうなるとIf文が３つあると思った方が良い。

　これは後からこれを追加するのではなく、最初に設計する必要があるという事だ。昔ならホームページはワープロを打つだけな感覚だが、今は集客のために、検索エンジンがクロールをしやすくするために、タグを選別するなどと、数多くのSEOやプログラミングの知識が必要だ。

　スマホの小画面になると、PCの大画面な設定では見づらい事が多くある。また文字もPCで例えばMS明朝などを指定しても、古いスマホになるとフォントを持っていなく、丸ゴシックで表示されたりする。

　古いスマホは内蔵ディスクの容量が数GBと少ないので、ホームページを見るにもギリギリの状態になっている。だがそんなケチなスマホのユーザーが、多くの金を出してシステム仕事などを依頼するだろうか？

　結論としてPCも使わないような、ケチや無知な客には近寄らない方が安全だ。どうせプロジェクトで8割完成しているのに、その時の気分でドタキャンし金を払わない困ったちゃんだ。

　投資も仕事や結婚相手などのパートナー選びも、損切やお断りの早い決断と、多くの観察が必要なのだ。CSSも何も知らない無知な客ほど、仕事に無駄な夢が多くみて、IT土方なブラック仕事を押し付ける。

　文字もPC画面だと綺麗に文字数も指定したがるが、本文の長い文章は指定しない方が良い。なぜならスマホの画面になると文字が小さくて見づらくなる。或いはスマホだけ別のページというか、対応しなくても良いだろ⋯

　今はコロナでリモートもあり、スマホは低迷し、PCが復活する。また５Gの開始で、スマホのインストールで面倒なアプリが低迷し、WebページのJavaScriptなどが流行するだろう。既にWebページで多くのゲームが存在する。

　WindowsのソフトどころかMacのアプリも、C＃が今後は使われるだろうし、.netコアというネット対応をしたらなおさらだろう。今はもうHTMLとCSSとJavaScriptとC＃の時代であり、他はAIのPythonとWordPressで使っているPHPぐらいだろう。

　またアイコンやイラストやマークなどは、再編集可能でホームページに表示できるPDF的なSVGだ。SVGをCSSで装飾も出来る。これらの技術は全部、無料のソフトウエアで作れる。自営業者ならこの辺を集中した方が良い。

　自営業は大企業などから仕事はもらえないので、スマホ客にも宣伝しないと、利益が無い状態が続く。インフルエンサーらは金持ちな客を選んだり、専業の投資家になった方が効率が良いと思っているが、チャンスは少なくピンチは多いのが現実だ。

　投資などで楽には儲けられないし、結局はプログラマーの方が人生は良い結果が出ているような気もする。なぜなら株も仮想通貨も他人と似たよう事をしているからだ。

　レスポンシブWebデザインは大人しいデザインをしたいという大企業からして、イビツだが多くがしない分だけ可能性がまだある。ともかく目立つ事をした方が良い。他人と同じオシャレな事をしても、つまらないので見ないで終わりだ。珍しいホームページこそキングだ。独特な個性こそ王者だ。

以上

令和３年 皇紀２６８１年 ［西暦２０２１年］ ３月２８日（日）

著者：城神YU