CSS コンテナクエリユニット｜Webページの進化

Web制作の経験のある人でもなければ、いきなりCSSだのコンテナクエリだの言われても、なんのこっちゃって話だと思うので、まずは、普段、何気なく見ているWebページの仕組みをざっくりと書いて、その上で、コンテナクエリとコンテナ単位について書いてみたい。

Web制作の知識のある方は、こちらのページを読んでみて欲しい。
まだコンテナクエリとコンテナ単位は一般的には使えないようだが、使えるようになればWebページが少し進化するんじゃないかと思う。ちなみにおおもとの記事はCSS Container Query Unitsだ。

 

同じページがPC・タブレット・スマホで違った見た目になる仕組み

普段、何気なく見ているWebページだけれど、同じページがPC・タブレット・スマホでレイアウト等、違った見た目になっていることにお気づきだろうか？

Webページには要素と呼んでいる枠があり、大きな枠の中に小さな枠が入っており、その中に、また小さな枠が入っているといった入れ子の構造になっている。

上の図の左と右はディスプレイ幅の違いだと思って欲しい。
左の幅広のディスプレイは、A、B、Cという3つの枠が横並びに並ぶレイアウトになっている。こういったWebページのレイアウトや見た目は、現在のWebページではCSSというもので指定されている。

それが、右の幅の狭いディスプレイになると、A、B、Cの3つの枠が縦並びになる。これはCSSのメディアクエリというもので、ディスプレイの幅がある幅より小さくなったら、A、B、Cの横並びが解除されるように指定されているためだ。

現在見られる多くのWebページがこのメディアクエリによって、PC、タブレット、スマホで違ったレイアウトになるように指定され、作られている。

 

コンテナクエリ

上の図のA、B、Cの枠の中には、実際にはさらに枠が入れ子になっていて、タイトルや画像、文章などが入っている。今回、新たに出てきたコンテナクエリは、メディアクエリがディスプレイなどの全体幅の違いで見た目を指定していたのに対して、A、B、Cの枠の幅の違いによって、その中身の見た目を指定できるものだ。

上の図の左と右では、右の方が全体幅が狭くなるのに、中身のA、B、Cの3つの枠は、逆に幅が広くなっている。このような場合、それぞれの枠の中身が幅広ディスプレイの時と同じレイアウトだと、時として残念な見た目になることがある。コンテナクエリはそれぞれの枠幅に対して見た目を指定できるから、そういった事が解消されるわけだ。

WEB制作をやったことがある人は経験があるんじゃないかと思うけれど、サイドバーがスマホ画面ではメイン部分の下に落ちてくる。この場合、時として、残念な見た目になることがある。まあ、それもメディアクエリで細かく指定してやれば、直せるけれど、けっこう、めんどくさかったりする。それがコンテナクエリを使えば、楽にできるってことなんじゃないかと思う。

 

コンテナ単位

CSSでは幾つかの単位を使用している。分かりやすいものであれば、px（ピクセル）だ。例えば余白を50pxと指定すれば、50px分の余白ができる。1pxは画面上の1ドットだと、とりあえず考えて欲しい。つまり環境によって変化しない絶対的な単位だ。それに対して、例えば%は同じ50%でも、元になるものによって長さが変わる。こういった可変の単位がCSSでは幾つか使われている。emとかvhなんか、重宝してよく使われているいるんじゃないかと思う。

今回、新たに出てきたコンテナ単位は、それぞれの枠幅で可変的に変わる単位だ。時として、枠の中の余白やタイトルの文字の大きさなど、枠幅によって変えたい場合がある。これを従来のメディアクエリでやるすれば、PC、タブレット、スマホそれぞれで指定する必要があるけれど、コンテナ単位を使用すれば、枠幅に対して可変的だから、一発の指定で済むことになる。これは、かなり便利だと思う。

コンテナ単位には、枠幅に対して可変的なqwと枠の高さに対して可変的なqhの2つがある。

 

Webページの進化

思えばWebページも、メモ帳にhtmlを一生懸命書き込んでいた頃から、随分と進化したものだと思う。htmlのベタ打ちから、ホームページ作成ソフトを使うようになり、その頃はテーブル枠を使ってレイアウトを作っていたっけか。それが今では、ホームページ制作でhtmlなんかほとんど触らなくなってしまった。もっぱら触るのはCSSだ。

そして、そのCSSもどんどん進化している。かつては動きをつけたり、画像の見た目を変えたりなんてのはjavascriptの専売特許みたいなもんだったけど、今では、その多くが表面的にはCSSで済んでしまう。そして、メディアクエリの登場によって可変的なレイアウトのWebページへとシフトしてきた。

今回出てきた、コンテナクエリとコンテナ単位が一般的に使えるようになれば、さらなる進化になるような気がする。少なくともWebページの制作者にとっては、大きな変化になるだろう。

shin MICではWordPress初心者の勉強会を開いている。
今はまだCSSには触れずに、WordPressのテンプレートの機能だけを使ったサイト制作をやっているけれど、いずれはCSSにも踏み込んでいけたらと考えている。

 

GoToトラベル 報道されない小さな宿側の事情

GoToトラベルの再開の時期が検討されている。

個人的には、需要を作り出すために政府がお金を使う必要性を感じているから、GoToトラベルそのものについては賛成だ。「再開時期を検討する」とあるように、時期とやり方については、色々と考えなければならないだろう。

前回のGoToトラベルでは、利用者側視点の報道というか、煽りというかがほとんどで、宿側視点の報道はあまり見かけなかった。ネット上で、高級旅館や高級ホテルばかりが得をするシステムになってしまっているという話を読んだくらいだ。

実は僕は前回のGoToトラベルの時に、個人経営の旅館に呼ばれて、何回かGoToトラベルの還付申請のお手伝いをさせてもらった。宿側は宿泊者一人一人、誰がいつ泊まり、どのくらいの割引が適用され、何番のクーポンを渡したかなどの記録をGoToトラベル用のフォームにまとめて申請しなければならない。これは、それなりの作業量だと感じた。もともと経理部があるような、ある程度の規模がある旅館やホテルなら、それほど問題はないだろうけれど、個人経営の旅館やペンションでは、オーナー自らが全ての作業をこなさなければならず、通常業務＋GoToトラベル業務は、かなりの負担になっている印象を受けた。

次に還付申請のシステムだけれど、これが、また、コロコロと変わる。
EXCELファイルのフォームにまとめてアップロードだったものが、Web上のシステムに入力するように変わったりと、その度に宿側は混乱する。個人経営の旅館やペンションのオーナーは比較的、高齢の方が多く、パソコン関係に疎い人が多かったりする。それでも、お金に関わることだから、システムのマニュアルのPDFファイルを印刷して、一生懸命にラインを引いて、その度、読むことになる。マニュアルの量もそれなりだから、苦手なものをこれだけ読むってだけでも大変な作業だったろうと、ラインの引きまくられたマニュアルを見て感じた。

さらにシステム障害や、ダウンロードしたEXCELファイルにミスがあったりして、お手伝いしている僕が腹が立ってくるくらいだった。例えば、うまく入力できない項目があると思ったら、そこだけEXCELのセルの連結がされていないとか、ちょっとしたことだけれど、高齢のパソコンに疎いオーナーさんだと、こういったところで、つまづいてお手上げ状態になり、作業がストップしてしまう。そして作業が遅れて、申請が遅れれば、それだけ還付は先延ばしになり、その間、宿側がお金を負担するわけだから、お金を回すのが大変になってくるわけだ。

こういったオーナーさん達だと、「書類をPDF形式でアップロード」と書かれていても、そもそもPDFが分からないから、その時点で、？？？状態になり、調べたり、人に聞いたりして時間を費やしていく。紙媒体の書類であれば、スキャンすればいいだけだろ！と皆さんは思うかもしれないが、紙媒体のものをアップロードしろと言われた時点で、どうしていいか分からなくなるのだ。分からないというのは、そういうことなのだ。

分からないことだらけで、つまづき、調べたり、人に聞いたりしながら作業するから、分かっている人が10分で出来る事に、2時間も3時間もかかるような事になってしまう。しかも、もともとのGoToトラベル関係の作業量はそれなりだ。そして提供されているシステムは障害は起こすは、申請のやり方がコロコロと変わるはで、個人経営の宿のオーナーさんにとっては、かなりの負担になっていたのではないかと思う。

おそらく、宿泊業で一番苦しいのは、こういった個人経営の旅館やペンションなのではないかと思うが、上に書いたような理由から、還付申請やGoToトラベルへ参加することを諦めてしまっているところも、けっこう、多いんじゃないかと僕は思ったりする。そういう意味では、GoToトラベルも、一番それを必要としているところには届いていないものなのかもしれない。

再開する際には、システムを使いやすく固めた上で、こういった小さな個人経営の旅館やペンションの現状をよく把握し、そういったところにも配慮したやり方で実施してもらえると素晴らしいのだけれど・・・。

個人的には、還付申請のシステムはそれを事務処理する側の意識が強く反映されたもので、本当に苦しい小さな個人経営の旅館やペンションを見ていないもののように感じられた。しかし、世間一般にも現場をほとんど知らない人間が意思決定を行い、現場が振り回されるなんてことはよくあることだ。なぜ、組織では、そういったことが起こるのかなんてテーマも、そのうちshin MICの勉強会で取り上げたいと思っている。

「Xperia 5 III」と「iPhone 13」｜スマホ写真が楽しい！

ソニー製のAndroidスマートフォン「Xperia 5 III（エクスペリア・ファイブ・マークスリー）」が11月中旬以降に販売されるらしい。

スマホは次々と新しい機種が投入されていて、正直、Xperiaだけでも、素人にはなんだか分からなくなってくる。笑

「Xperia 5 III」は、現在のXperiaの最上位機種である「Xperia 1 III（エクスペリア・ワン・マークスリー）」を手のひらサイズにした「Xperia 5 II」の後継モデルだ。ちょっと調べた感じだとプロセッサが最新のものになった以外は、「Xperia 5 II」と、それほど大きな違いはないような気がする。こだわる人は別にして、普通に使う分には、それほど大きな違いはないんじゃないかと個人的には思ったりする。

現在、僕が使っているスマートフォンは、昨年の秋に「最新機種ですよ！」とお店で勧められて購入した「Xperia 1 II（エクスペリア・ワン・マークツー）」だ。６年ぶりにスマホを買い替えた僕としては、特にそのカメラの性能は衝撃的だった。「望遠」「標準」「超広角」の3つのレンズを備えていて、遠くのものを拡大して撮っても綺麗に取れてしまう。それまでスマホのカメラで諦めていた光学ズームが効くというのは、衝撃的だった。そしてもう一つ衝撃的だったのが、上の通天閣の写真もそうなんだけど夜景が普通に綺麗に撮れる事だ。特になんの設定もすることなく、シャッターを押せば、下の写真のような感じで撮れてしまう。ちなみに、下の写真は松本市の縄手通り近くの女鳥羽川の橋の上からの風景だ。都会と違ってかなり暗いけれど、普通に撮ることができる。

「Xperia 1 III」は僕が使っている「Xperia 1 II」を全体的に性能アップしている。それを手のひらサイズにしたのが「Xperia 5 II」であり、さらにその後継が、今度、発売される「Xperia 5 III」だから、カメラも含め、性能的にはかなり期待できるんじゃないかと思う。

「Xperia 1 II」からは、標準のカメラアプリとは別にPhotography Proというソニー製のカメラアプリが入っている。ソニー製カメラの「αシリーズ」や「RXシリーズ」を意識したもので、本格的なカメラ設定が行える。Xperiaのカメラの真価を発揮するためには、これを使いこなす必要があるかもしれないが、カメラ知識の無い僕は標準のカメラアプリ専門だ。(笑)　逆にカメラ知識のある人にとっては、とても楽しいんじゃないかと思う。そういう意味では玄人好みと言えるかもしれない。

これに対して同僚が今、狙っているのが話題の「iPhone 13」だ。
少し調べた感じだと「iPhone 13」のカメラも素晴らしい。ていうか、カメラ機能は「Xperia 5 III」よりも若干、上なんじゃないかという気がする。カメラの知識がなくても、全部自動で調整してくれるから、僕のようなカメラ素人には優しい作りだ。僕個人はスマホはAndroidで慣れちゃったので、iPhoneの選択肢はないのだけれど。

「Xperia 5 III」にしても「iPhone 13」にしても、お値段は少しはるけど、これからスマートフォンを買い替える人にとっては、写真を撮るのが楽しくなるスマホだ。

現在では、仕事でもプライベートでもスマホで写真を撮る機会が多い。
そして、その写真は技術よにってカメラ知識の無い素人でも、綺麗に撮れるようになってきている。あとは、何をどうやって撮るかだ。SNSにアップする写真など、人に見せるための写真を撮る時は、特に何を見る人に感じてもらいたいのかをはっきりさせて、それを出来るだけ表現できるように撮ることが大切だ。

shin MICでは、今後、SNSも絡めたスマホ写真の勉強会なんかも野や街に繰り出してやってみたいと考えている。

興味のある方には是非、声をおかけください。(^^)

日本は確実に貧しくなっている！｜悪い円安が進行中

最近ガソリンの値段が上がっている。
車をメインの移動手段にしている僕としてはなかなかキツイ状況だ。
原油先物の値が上昇傾向で、かつ、為替が円安傾向だから、暫くはガソリンの高騰は続くのかもしれない。
まいったな～。

まあ、円安傾向と言ってもドル円レートは金曜日の終値で111円くらいだから、レートだけを見れば、それほど円安という感覚はない。しかし日本はずっとデフレで世界の経済成長から取り残され、物価も給与も上がってない状況だ。仮に30年前も今も1ドル100円だったと仮定して、他の国では経済成長によるインフレにより30年前100円だったものが、現在では200円になっているとすれば、輸入する際に、30年前は100円で済んだものが、現在では200円出さなければ輸入できないことになる。つまり為替レートが変わっていなくても、円の価値は半分になってしまったということだ。

この例で書いたような悪い円安が現在進行中だ。
デフレが長期間続き経済成長しないということは、こういうことなのだ。
日本は確実に貧しくなっている。

ネットのどこかで30年前の状況を見たが、それによると、

社会保険料の負担が今の半分
消費税なし
物価が今の約9割
ボーナスからは社会保険料の控除なし
初任給は今と変わらず
平均給与は40万円高かった

ということらしい。
いかに国民の経済状況がきつくなったかが分かるし、これでは若者も未来に希望を持ちにくい状況と言えるだろう。

そこで、長い事、デフレ解消が叫ばれ、政府や日銀などもインフレ目標を掲げたりしている。
インフレとはモノやサービスの値が上がっていくことだから、逆に言えばお金の価値が下がっていくことだ。モノやサービスに対してお金の量が増えれば相対的にお金の価値が下がるから、お金の量が増えるとインフレになるなんてのを、中学時代の公民で習った記憶がある。

ということで、2回目の安倍政権以降、日銀は異次元緩和の名のもとに、膨大なお金を刷って、お金を増やしてきたが、いっこうにインフレにならない。その膨大なお金は結局は日銀に積みあがってしまい、民間に出回らないからだろう。なぜ民間に出回らないかと言えば、民間に需要がないからだ。

今、必要なのはお金の量を増やすことではなく、民間の需要を作り出していくことだ。
その為には、公共投資などの財政出動が極めて有効だと思うのだけれど、なぜか、国は長年、真逆の緊縮財政路線をとっている。
ちなみに今の日本の緊縮財政については三橋貴明さんが「財務省が日本を滅ぼす」などで論破している。データというエビデンスを持って主張されているので、素人の僕が感じている事にも一定の正しさはあるということだろう。

財政赤字であったり、少子高齢化であったり、そういった言葉と共に我々は緊縮財政や消費税を受け入れてきている。
もちろん経済政策に絶対的な正解なんてない。それでも、緊縮財政や消費税導入、消費税アップは現状を悪化させるだけのものにしか僕には思えない。少なくとも、数十年に渡り、そういった政策を取り続けて、状況が好転するどころか悪化を辿っているから、少なくとも間違いであることは確かだと思う。

政府や大手マスコミの言うことを、我々は鵜呑みにしやすい傾向がある。特に経済政策とか、ちょっと、とっつきにくい内容になれば、考えるのもめんどくさいから、余計にそうなってしまう。その結果、唯唯諾諾と従ってしまうことになる。

そういう意味でも、クリティカルシンキングは大切だ。クリティカルシンキングは、なんでもかんでも反対したり批判することではない。情報に対して一人一人が鵜呑みにすることなく、自分で調べ、考える姿勢を作っていくことが大切だと思っている。それは場合によっては自分たちの生活を守ることにまで繋がっていくものだと思うから。

shin MICではクリティカルシンキングを大切にした勉強会を開いています。