VSCodeの画面とロゴ

最近、あるWebサイト※1(以下、「サイト」と言う。)を全面リニューアルした。サイトを制作するためのツールとしてテキストエディッターが必要であるが、昨今は高機能テキストエディッターが無料で入手できることを知っていたので、この機会に使ってみることにした。
以下、リニューアルした経緯を交えながら、使用した無料テキストエディッターの体験を投稿する。
なお、この記事は自分でサイトを制作している(又は制作したい)が、どのテキストエディッターを使えば良いか悩んでいる人に参考になればとの思いで投稿している。従って、既に高機能テキストエディッターでサイトを制作している人、あるいはサイト制作に必要な言語をマスターせずに制作したい人には向かない内容である。

本記事で述べている「Webサイト」とは、HTML言語を打ち込んで制作したサイトのことを言っていて、ブログを含めていない。また、「ホームページ」と表現すると、本来はこう言う意味だと言う人もいるかもしれないので、敢えて「ホームページ」と表現することを避けたが、日本で一般的に理解されている「ホームページ」のことを言っている。

サイトリニューアルの経緯

私はサイトを自身で制作するが、よっぽどのことが起きない限り、制作済みサイトを全面リニューアルすることはない。その理由は単純で、ちょっとした更新なら良いが、新たにサイトを作り直すとなると、面倒臭いは時間は取られるはで、なかなか制作する気持ちになれないからである。
初めてサイトを制作したのはこのドメインのサイトで1997年頃であり、その後2012年に別ドメインのサイト(今回リニューアルしたサイト)を制作した。制作した当初はどちらも、一生このサイトを使い回し、将来リニューアルする気持ちは更々なかった。
しかし、その後モバイルが台頭しだし、時代の変化※2からレスポンシブWebデザイン※3(以下、「RWD」と言う。)の必要性を感じるようになった。
そこで、2014年の時に、本ブログの親サイトである「小松市不動産Navi」をRWD対応するために全面リニューアルをした。その一方で別サイトのRWD対応が残っていたが、面倒臭いので、いずれ暇になったら対応しようと思いつつズルズル先延ばししていた。なお、ブログに関しては、RWD対応のテンプレートに変えるだけなので、既にRWDのブログにしてある。

その一方で、Googleは2018年3月27日に「モバイルファーストインデックス※4」(以下、「MFI」と言う。)を開始することを発表し、準備が整ったサイトからMFIへの移行が進められていたが、2021年3月末を持って強制移行が実施されることになった。
これにより、お尻に火が付き3月末までの完成を目標にRWD未対応サイトも全面リニューアルすることにした。

初めて制作したサイトはPC用であったが、当時はスマホが世に出回っていなくガラケーの時代であった。ガラケーでもサイトを閲覧する機能が備わっていたので、同一ドメイン内にディレクトリを切って、ガラケー用のサイトも制作してあった。もちろんガラケーはPCに比べメモリー容量等のスペックが低いので、不動産情報ページに於いては容量の小さい画像を別途用意し、メモリーを食わない文字情報はPCとほぼ同一であった。従って、重複コンテンツでありミラーサイトと言われても反論のしようがなかった。なお、Googleのガイダンスを見ると、悪質か否かに関係なく「重複コンテンツ」とは、異なるドメインだけでなく同一ドメイン内でも対象となる。
当時の検索エンジンは、アルゴリズムの質の低さから重複コンテンツのページであっても、検索結果がどちらのページも上位表示されるようになっていて、そのアルゴリズムの不備を悪用するサイトが多発した。そこで、Googleは2011年にパンダアップデートを実施し、重複コンテンツでは1つのページしか上位表示させないようにし、悪質なサイトにはペナルティを科すように改善された。
このような経緯があり、私は既存サイトをこのまま使い回すのに限界を感じ、いずれ重複コンテンツを避ける施策を打つべきと考えるようになっていった。
レスポンシブWebデザイン(Responsive Web Design)とは、モバイル、タブレット、PCなど全てのデバイスに於いて最適化されたサイトを単一のHTMLで実現させる制作手法である。つまり、画面サイズの小さいスマホでサイトを閲覧しても、適切なレイアウトになり、また文字も小さ過ぎて読み辛いことが発生しないデザインのことである。このデザインの背景には、サイトの閲覧に於いてデバイス別シェアが、スマホのようなモバイルがPCを抜き1位になっていることがある。
また、開発者側からすれば、CSSの記述が複雑になるものの新規制作及び更新する時のHTMLファイルは1つで済むメリットがある。
GoogleがこれまでのPC版コンテンツをインデックスすることを止め、モバイル版コンテンツをインデックスするように変更し、このインデックスをモバイルファーストインデックスと言う。
これまで、Google のクロール、インデックス及びランキングシステムでは、主にPC版のコンテンツが使用されてきた。そうすると、モバイル版のコンテンツがPC版に比べ大きく異なる場合、モバイル検索ユーザーが探していたものと合わないコンテンツを閲覧する可能性がある。そこで、モバイル版のページをインデックスやランキングに使用することにより、主にモバイル ユーザーが探しているものを見つけ易くなるようにした。

VSCode使用の経緯

従来から、サイト制作に当たり有償のソフトを使う気持ちは毛頭ないので、高機能のテキストエディッターを使ったことがなかった。
私が初めてサイトを制作した時は、Windows標準搭載のメモ帳で制作した。しかし、ファイルサイズが大きくなるとメモ帳で読み込めなくなり、Windows標準搭載のワードパットを使用しだした。その後、無償の「Crescent Eve」の存在を知り使い始めた。
「Crescent Eve」はWindows標準搭載のテキストエディッターに比べると、HTML入力に便利な機能が付いていた。例えば、HTMLタグの入力補完、終了タグの入力忘れなどの文法チェック、使用頻度の高いソースコードを定型句として登録できる機能などがある。
以後世の中にどんな無償のテキストエディッターが存在するのか知らないまま「Crescent Eve」を使い続けていた。めったにサイトを新規制作しない私に取って、サイトを一旦制作してしまえば、ちょっとした更新では軽い「Crescent Eve」は使い勝手も良く、エディター情報に疎い私でも無料の高機能テキストエディッターの存在を知るようになるものの調べてまで使ってみる気もならなかった。

しかし、今回RWD対応のため全面リニューアルをしなければならなくなったことを契機に高機能の無償テキストエディッターを使ってみる気に変わった。探してみると、「Visual Studio Code」(以下、「VSCode」と言う。)だけでなく、その他「Atom」や「Brackets」など色々あるようである。どれも無償と言っても全て試しに使ってみるとなると時間が取られ遣りたくない。そこで、良いソフトは多くの人が使用するだろうから、それを判断基準にして選ぶことにした。フロントエンドエンジニアが使用している(プログラミングに特化した)テキストエディッターのシェアは、VSCodeが断トツで高いことが分かり、私は迷うことなくVSCodeを選んだ。

VSCodeは次のメリットがある。
  • メガIT企業であるマイクロソフトが開発しているので、長期的なサポートが期待できる。
  • オープンソースなので、マイクロソフトだけでなく多くのエンジニアが開発に参加し新機能がリリースされ易い。

久しぶりにサイトを制作してみて

RWD対応するに当たって、なるべく時間を取られたくなかったので、既にRWD対応してある本ブログの親サイトをなるべく流用して作ることにした。また、RWD対応するがコンテンツ自体は既に存在するので、多少文章を見直す必要があるものの大部分は既に出来上がっている。よって、制作時間を多く取られることはないと考えていたが、すんなり進まなく想定していた以上に時間が取られてしまった。3月末までに完成させるつもりで始めたが、作業途中から間に合いそうもないと分かり頑張ったものの完成したのは4月11日となり大幅に遅れた。

大幅に遅れてしまった特別な理由が見当たらないが、敢えて理由を探すとしたら次のことが言える。
  • 時間短縮のために既存サイトを流用したことによりデザインも流用元サイトに似ているものの、CSSをそのまま流用できなく、大幅な見直しとなった。その理由は、流用元のサイトをRWD対応した時、CSSのメディアクエリの設定は、当時の私は制作し易さを重視しモバイルラストの作りにしてあったが、今回のRWD対応では全く逆のモバイルファースト※5にしたため、大幅な見直しが入ってしまった。
  • 頻繁にサイトを制作している訳でなく7年ぶりだったので、全体的に思いの外スムーズに進まなかったと言うか、サイト制作を甘く見過ぎていたのかもしれない。

今回の対応でモバイルファーストに変更したが、その理由は次の利点があるからである。
モバイルファーストのCSSの記述は、まずメディアクエリの影響を受けないデフォルトのCSSを記述し、それが最も画面サイズの小さいデバイス向けになる。後はメディアクエリを使って、より大きなデバイス向けに変更しなければならないCSSを記述することになる。そうすると、最も画面サイズの小さいデバイスはデフォルトのCSSの読み込みで済み、メディアクエリで指定してあるCSSを読み込む必要がなくなる。つまり、スペックの低いモバイルは最低限のCSSの読み込みで済み、モバイルに取って優しい設定となる。
実際にブラウザは、CSSコードを全て読み込んでからメディアクエリの条件を判断するのでなく、メディアクエリの条件を先に読み込み、条件に合うCSSコードのみを読み込んでいる。

VSCodeの便利な機能

VSCodeの全機能を把握している訳でないが、その中でも便利と感じたものを以下に紹介する。

プラグイン

豊富なプラグイン(拡張機能)が用意されているので、自分の開発目的に合わせたパワーアップが実現できる。例を挙げると次のとおり。
なお、私の場合はサイトの制作を始める前に、便利そうな拡張機能を適当にインストールしただけなので、調べれば便利な拡張機能が色々ある筈である。また、ネット上にはお勧め拡張機能を紹介しているサイトが色々ある。

全角スペースの可視化(zenkaku)
全角スペースを灰色ボックスで可視化してくれる。以前、低機能のテキストエディターを使っている時、CSSファイルだったと思うが、ソースコードの行の最後に誤って全角スペースが入ったために表示が可笑しくなった。画面上ではスペースが見えないだけに、原因を調べるのに苦労した経験があったので、迷わずインストールした。
HTML文法チェック(W3C validation)
HTMLの文法チェックを行う。単にインストールしただけでは動作しなく、JDKのインストール、システム環境変数の新規追加、Settings.jsonへの追加等が必要になる。ただ、私の環境下では、一旦動作したが翌日動作しなくなり、再度インストールし直すなどを試み動作しだす。その後再び動作しなくなる期間が続いた後、突然動作しだすも2日程度しかもたなかった。不安定で殆ど動作してくれないので、VSCode上で「W3C validation」を動作させることを諦める。
CSS文法チェック(CSSTree validator)
CSSの記述が間違っている箇所に波線を引いてくれる。
HTMLのリアルタイムビュー(Live Server)
修正等をしたHTMLファイルを保存したタイミングで自動的にブラウザが更新され、表示内容を確認できる。通常ならブラウザのウィンドウをアクティブにして更新ボタンをクリックする必要があるが、これらの操作が不要になる。ちょっとしたことと思うかもしれないが、使ってみると以外と便利。
CSSクラス名の補完(Intellisense for CSS class names in HTML)
HTMLソースコードを打ち込んでいる時に、CSSファイル上に存在しているクラス名を補完する。インストールするも、なぜか私の環境下では動作せず。
CSSコード表示(CSS Peek)
HTMLソースコード上で、設定されているCSSの記述内容を表示してくれる。これまでだとCSSの記述内容を確認したい時は、CSSファイルを表示させた上で検索し確認する必要があったが、このような操作が不要になる。ただ、なぜか私の環境下では、上手く動作してくれないこと有り。
ソースコードの整形機能(Prettier)
ソースコート保存時にコードを整形してくれるので、コードを打ち込んでいる時に見易くなるようにタブを挿入するようなことが不要になる。整形対象ファイル種別を把握していないが、少なくとも私が使用した全種別(html、css、js[jQuery]、JSON)が対象であった。
その他
なお、日本語版(Japanese Language Pack)にするのも、ソースコードを印刷(PrintCode)できるようにするのも拡張機能のインストールが必要になる。

ユーザースニペット

ユーザー自身が、頻発に使用する文字列(ソースコード)とそれと関連付けられた短縮名称(VSCodeでは「prefix」と言っている。)を登録することにより、短縮名称を入力するだけで関連付けられたソースコードを展開してくれる機能である。
「Crescent Eve」でも同様な機能として「定型句」があるが、次の大きな違いがあった。

  • 「Crescent Eve」の場合は、短縮名称に相当するものがなく、登録番号を指定することにより展開される。従って、私のように頻繁にサイトの更新しないものは、間違った登録番号を指定してしまうことが良くあった。一方、VSCodeの場合は、短縮名称を工夫することによりソースコードの内容を推測し易くなるので、間違って展開させてしまうことはない。
  • 登録可能件数は、「Crescent Eve」の場合は10件と非常に少ないが、VSCodeの場合は十分な件数を登録できそうだ。
  • 登録方法に関しては、「Crescent Eve」の場合は登録したい文字列を入力フォームにコピべするだけなので面倒なことはない。一方VSCodeの場合は、入力フォームが用意されていないのでユーザーが直接JSON※6ファイルに入力しなければならない、JSONのデータフォーマットは難しくはないもののフォーマットに従って入力しなければならないので面倒臭い。無償なので文句を言える立場でないが、この仕様を知った時は驚いた。
  • その他として、「Crescent Eve」は登録した文字列の特定の位置に特定の文字列を置換させる機能があり、VSCodeでも似たような目的の機能があるものの、「Crescent Eve」の方が使い勝手が良く、操作性も良い。
JSON(JavaScript Object Notation)とはデータフォーマットの一種である。JSなどのクライアント言語とPythonなどのサーバサイド言語間のデータ通信で使われることが多いようである。
私がJSONの存在を知ったのは、本ブログの親サイトをRWD対応した2014年である。JSプログラムの制作に当たり、プログラムに汎用性を持たせるためにJSプログラムファイルと切り離したところで大量のデータ持ち、そのデータを読み込む作りにしたがったが、その手法が分からなかった。JSプログラムを呼び出す時に引数としてデータを渡す手法もあるが大量のデータを引き渡すには現実的でなく、また私が持ってるJSの書籍にはその関連の内容が一切載っていなかった。困り果てながら適当なキーワードでググっていたらJSONに辿り着いた。通常JSONをどのような目的で使うのか全く知らなかったが、JSONを使うことにより私が考えているサイト制作に目途が立ちホッとした。
この時のJSONに関わった経験により、今回スニペット作成は面倒臭いと思いながらも作業をスムーズに進めることができた。
ちなみに、当時JSONデータを読み込むロジックを作るのは初めての経験だったので、知識不足により正常に動作しなく結構悩んだ。その原因はデータの読み込みが非同期であるにも関わらす、同期を取っていなかったからである。つまり、データを読み込み完了前に、読み込んだデーターを処理するロジックを走ってしまうため、挙動が可笑しくなった。サーバーとのデータ通信では同期/非同期を意識することが当然のことなのかもしれないが、私の経験不足からデーターを取り込む命令は当然命令内で同期を取っていると思い込んでいた。
また、当時JSONの書籍があれば購入してみようかなと思い、アマゾンで検索したが全くヒットしなかった。そこでダメモトで本屋に出向き、女性店員にJSONの書籍を探している旨を伝えた。JSONは私自身が初めて知った名称だったので、店員も同様の可能性があると思い、「コンピュータ関係の本です。」と念のため伝えてあった。店員がパソコンに向かい調べだし、「JSON(ジェーソン)は色々ありますよ。」と言って来た。「書籍のプロに聞いてみるもんだ」と感心しながら画面を見せてもらうと、そこには「13日の金曜日」が並んでいた。

マルチカーソル

カーソル位置や単語を複数選択して同時に編集ができる機能である。ファイル内の全ての単語を書き換えるなら置換機能を使うと思うが、ファイルの一部のエリアに於いて複数の単語を纏めて置き換えることができ便利である。

エメット

HTMLやCSSのコードの入力を補完してくれる機能であり、規定のルールに従って省略形で入力するだけで、HTMLやCSSのコードが展開される。文章で上手く説明できないので例で示す。なお、HTMLの記述に於いて使用できる記号には、CSSと同様な意味合いのものもあり、基本的な記述はマスターし易いと思う。
なお、豊富な記述例はEmmetの「cheat cheet」を参照されたし。

例1
HTMLの場合で、入れ子(「>」)、クラス(「.」)かつ繰り返し(「*」)を使用した例である。

入力内容
ul.cls-name>li*3
入力の意味
「cls-name」クラス付きul要素、ul要素の子(入れ子)のli要素を3回繰り返して展開。
展開されるコード

<ul class=”cls-name”>
<li></li>
<li></li>
<li></li>
</ul>

例2
HTMLの場合で、上記で使用した記号以外にID(「#」)、グループ化(「()」)、同階層(「+」)を使用した例である。

入力内容
table#id-name>(tr>th+td)*2
入力の意味
「id-name」ID付きtable要素、table要素の子孫要素としてグループ化された要素を2回繰り返して展開。なお、グループ化された要素は、table要素の子のtr要素、tr要素の子のth要素、th要素の兄弟(同階層)のtd要素。
展開されるコード

<table id=”id-name”>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
</table>

例3
CSSの例である。CSS上では、「プロパティ名:プロパティ値」(あるいは、「プロパティ名」のみ)を記述する時の補完機能のようである。従って、「要素名{ }」の波括弧内の入力時に働く機能のようだ。
私は使いこなしていないので正確性に欠けるかもしれないが、プロパティ名だけの場合は正式なプロパティ名の文字列を左から順に適当にピックアップして入力していけば、対象候補のプロパティ名が表示されるので容易に入力できる。一方、「プロパティ名:プロパティ値」の場合はどのように省略して入力すれば良いかは慣れて覚えるしかないように思う。

入力内容
mb:1r+p:5-10+bgc:#fff
入力の意味
3個のプロパティを「+」で結合して記述。なお「cheat cheet」を見ると、プロパティ名とプロパティ値の区切りを示す「:」(コロン)が付いているので本記事でもそれに合わせ「:」を付けているが、省略しても問題なく展開できるようだ。
展開されるコード
margin-bottom: 1rem;
padding: 5px 10px;
background-color: #fff;

画面の分割表示

ファイルの内容(ソースコード)を表示する領域は、分割することができる。分割した領域には、異なるファイルのソースコード表示させたり、1つのファイルの異なるエリアのソースコードを同時に表示させることにも使える。
HTMLファイル、CSSファイル及びJSファイルは互いに関りを持つので、私の場合、2個(時には3個)に分割し、HTML、CSSファイルあるいはJSファイルを同時に表示させる使い方をした。
これまでだったら、それぞれのファイルを「Crescent Eve」等を使ってウィンドウ上に表示させていた。常にある時点の見たいファイルは2個程度しかないが、作業をしていると、どんどんウィンドウの数が増えて行きPC画面内はウィンドウで煩雑になり、見たいウィンドウ探してアクティブすることに煩わしさを感じることがよくあった。
しかし、VSCodeを使うようになってからは、常にその時点の見たいファイルを分割して表示させ、その他色んなウィンドウが表示されてる状態になったとしても、VSCodeのウィンドウをアクティブにするだけなので、煩わしさを感じなくなった。

便利さが伝わらないかもしれないが、実際使っていて結構気に入った。

ショートカット

VSCodeには豊富なショートカットが用意されている。ショートカットを利用すれば通常マウスで操作するようなことでも一発でキーボードから操作できるので、指をキーボードから離す必要がなくマウスの使用頻度が減り作業効率が上がる。
このように書くと、私がショートカットを使いこなしているように誤解されるが、現状は数ある中の極僅かなショートカットしか使用できていない。それでも便利と感じたショートカットが幾つもあるが、それらを挙げて行ったとしても私の使っていない便利なショートカットが数多くあることを考えると余り意味がない。そこで、便利さの雰囲気だけ味わえるように2例だけ紹介する。

コメントの設定/解除
ソースコード作成中はコメントアウトしたり、アンコメントすることが多く、またコードの注釈としてコメントを付けることが頻繁にある。
コメントにするには、コメントの開始や終了を示す文字列を入力する必要があり、ソースコードの種類(HTML、CSS、JS)によりその文字列が異なるため、コメントの設定/解除が煩わしい。
ショートカットを利用すれば、対象の行にカーソルを移動(複数行を対象にしたいのなら、複数行にまたがるようにドラッグ)した上で、「Ctrl」+「/」を押下するだけで良い。対象行が有効なコードであればコメントアウトし、無効であればアンコメントしてくれ、しかもソースコードの種類に関係なく同じキー操作、つまりユーザーはソースコードの種類を意識する必要がなくなり非常に便利だと感じた。
保存
保存のショートカット(「Ctrl」+「S」)は、他のテキストエディッターだけでなく、色んなアプリでも使われ、一般的なショートカットと思われる。ただ、拡張機能のリアルタイムビューと併用して使うと操作が大分異なってくる。
サイトを作成していると、試しに色々設定を変えてみて、どの設定がブラウザで最もしっくり表示されるかみたいことがある。このような時の一般的な操作は次のとおりである。
設定を変更するために、キーボードを使ってテキストエディッター上に表示されているソースコードを変更右矢印マウスを使ってテキストエディターのツールバーの「ファイル」をクリック右矢印表示されるプルダウンメニューから「保存」をクリック右矢印ブラウザのウィンドウをアクティブにするためにマウスでそのウィンドウをクリック右矢印ブラウザの更新ボタンをクリックして変更した表示状態を確認。右矢印別の設定を試すために、マウスでテキストエディターのウィンドウをクリックしてアクティブにする。右矢印以後、同様の操作を繰り返す。
一方、保存のショートカットとリアルタイムビューを使うと次の操作になる。
まず、VSCodeでソースコードを変更している時は、ブラウザウィンドウとVSCodeウィンドウが重なっているとブラウザウィンドウが下になり隠れてしまう。そこで、ブラウザで確認したい部分がVSCodeウィンドウで隠れないようにするために、ウィンドウの位置をずらしておく。右矢印その状態で、VSCode上に表示されているソースコードをキーボードで変更右矢印マウスを使わずショートカットで保存右矢印リアルタイムビューはブラウザがアクティブになっていなくても更新してくれるので、ユーザーは何の操作をすることなく変更した表示状態を確認できる。右矢印この時、VSCodeウィンドウはアクティブのままなので、アクティブウィンドウの切り替えを行わずに、続けてキーボードでソースコードを変更していける。
文章だと便利さが上手く伝わらないかもしれないが、私はショートカットとリアルタイムビューにより一連の操作が簡略化され非常に便利に感じた。ソースコードの変更内容にもよるが、マウスをほぼ使わずキーボードだけで作業を完結することができる。

RWD対応の影響

RWD対応することにより、検索順位に影響を与えるのか興味があり、参考程度に3,4月前後の検索順位を追ってみた。
Googleの移行期限が3月31日、RWD対応を完了しサーバーにアップロードしたのが4月11日、(私の見方が正しければ)RWD対応のページをGoogleがインデックスしたのも4月11日である。
少なくとも私のサイトでは、期限前のモバイルフレンドリーでないサイト(~3月31日)、期限を過ぎたモバイルフレンドリーでないサイト(4月1日~4月11日)、モバイルフレンドリーサイト(4月11日~)の違いにより、明らかな順位の変動は微塵も見られなかった。
サイトのコンテンツ量が、PCに比べモバイルが極端に少ないと影響を受けるのではとの情報もあり、デバイスにより表示されるコンテンツ量が変わらない今回の対応では影響がないのかもしれない。ただ、お尻に火が付いた状態で、遅れながらも頑張って対応しただけに、ちょっと拍子抜け感があり「トホホ」である。
しかし、この短い期間では影響が無かったが、サイトを運営している以上、RWD対応は避けて通れなく不可欠な対応であったことは疑う余地がない。
ちなみに、RWD対応したサイトをアップロードした2日後に、コロナ禍で需要が極端に低迷している中、スマホでサイトを閲覧した人から空港前月極駐車場の申し込みがあったので、今回の頑張りが功を奏したと思いたい。

所見

私はVSCodeの仕様を今回のサイト制作で使った機能しか理解していないので説得力に掛けるかもしれないが、これから自分でサイトを制作しようとする人は、これまでの私のように仕様らしき仕様がなく即使いこなせる低機能のテキストエディタを使用するのでなく、仕様を理解するのに多少の面倒臭さはあるものの作業効率の格段に上がる高機能のテキストエディタを使うべきである。
メモ帳を使ってサイトを制作し、JSのデバック時にブレークポイントの代わりにalertメソッドいちいち設定していた昔の私からすれば、今は高機能のテキストエディッターを無料で使え、充実したChromeのデベロッパーツールもあり、開発環境にお金を掛けることができない素人がサイトを制作する場合でも、非常に恵まれた環境で制作ができるようになったと思う。

独り言

サイトを作成していると、こんな変なことが起こるのかと思うことが良くある。私はめったにサイトを制作しないので記録しておかないと忘れてしまう。これまでもそのような時はメモったこともあっただろうが、余りにも年数が経ってしまうとメモがあるか探すのも大変なので探す気も起きない。
そこで、この場を借りて自分のために備忘録を残しておくことにしたので悪しからず。

備忘録
「overflow: hidden」に於けるページ内リンク問題
ページ内リンク先の要素の先祖要素で「overflow: hidden」を設定している場合、ページ内リンクを実行すると、本来隠れるべき部分が上にズレて表示される。この時上にズレるブロックは、隠れている部分だけでなく「overflow: hidden」を設定した要素の全ての子孫要素である。
なお、ページ内リンクをHTMLでなくJS(scrollTopメソッド)で実現すればズレない。また「overflow: hidden」を設定していも隠れる部分が存在しない場合もズレない。
この現象は私にはブラウザのバグにしか見えないが、どのモダンブラウザでも発生するようだ。私が調査したブラウザ全てで発生し、調査したブラウザは次のとおり。
  • Windowsパソコン 右矢印 Chrome、Edge、FireFox、Opera
  • Macパソコン 右矢印 Safari、Chrome
  • iPhone 右矢印 Safari
「display:inline-block」に於ける余白問題
横並びのグローバルメニューなど、ブロック要素を横並びするための手段として「display:inline-block」プロパティを使うことが多いのでないかと思う。この時のHTMLソースコードでは、「display:inline-block」を指定した要素をメニュー項目の数だけ記述することになる。この複数の要素を改行せずに記述すれば何も問題ないが、例えばソースコードを見易くするために要素毎に改行してしまうと、ブラウザ上は各メニュー項目の境に不必要な余白が発生してしまう。
レイアウトによっては余白の影響が気にならないこともあるだろうが、今回リニューアルしたサイトのグローバルメニューのようにウィンドウの横幅が変更されようと常にボックスの横幅100%を使って表示させるようにしてあると、例え1pxでも余白ができてしまうとレイアウトが崩れ大問題となる。
余白を発生させなくするには、ソースコードを記述する時に改行しなければ良いが、私のVSCode環境ではそれができない。と言うのも、ソースコードを整形する拡張機能をインストールしているため、改行せずに記述しても保存時に自動的に改行されてしまうからである。そこで私が採用した対処は次のとおり。
  • 「inline-block」を指定しているメニュー項目の親要素に「font-size:0」を指定する。
  • そうすると子要素のメニュー項目のフォントサイズが0pxになってしまうので、子要素に対しフォントサイズを改めて指定する必要あり。