「SE方」の記事一覧 2ページ

コーディング規約のさわりの話になりました 前回に引き続き、「レンタルブログを辞めて、WordPressでサイト運営を開始しようと決意した友人」からの素朴な疑問です。 ＜疑問＞ CSSの書き方を指南するサイトごとに、行間が一行空いていたり、数行空いていたりするようだが、これはどういうルールに従っておくのが良いのか？ 友人の場合、プログラミングの経験等はほとんどなく、とりあえずは既存のテーマを用いた運用を検討していました。しかし、作業を重ねていくうちに「デザインなどを修正したい。子テーマなるものを作成してCSSをいじりたい」という結論に至ったようで、「指南サイトを見たが、よく分からないところがある」として先のような質問を投げかけてきました。曰く「どうやら固定のルールはないようだが、常識や作法が分からないので、どう考えればいいのか分からない」ということです。 まずは基本から 大前提として、「CSSにおいて改行・空白（スペース/タブ）は影響を与えない」（参照サイト：CSSの書き方-CSSの基本／HTMLクイックリファレンス）および、「PHPにおいてはコードの間は改行・空白（スペース/タブ）のいずれかで区切れば良い（参照サイト：PHPスクリプト - 基本的な記述方法 - 書き方の基本／PHP入門）」というルールがあります。 つまり、極端に言ってしまえば「改行・空白をどのように使っても良い」というのが結論となります。大量の改行を行ったり、無暗やたらと空白を乱立させたりしても、文法そのものに誤りがなければ正常に作動します。 にも関わらず、多くのCSSやPHPでは、それ相応に改行・空白が用いられています。これは、可読性を高め、メンテナンスなどの作業を容易にするためです。一文字の書き換えミスによって、最悪の場合、WordPressそのものが正常に動かなくなる恐れがあるため、常に「読みやすさ」を追求することが望ましいのです。では、おおよそどのように実践していく、あるいは学習していけば良いのかについてまとめてみます。 考え方の指針となる要素 さて、「そう言われても、どう考えたらいいの？」となってしまった方に、考え方の指針となるポイントなどについて補足したいと思います。 公開・推奨されているコードの記述ルールに従ってみる 自由にしても良いとは言え、他人が作ったコードをいち早く読み、誰でも修正しやすくするために、「コーディング規約」と呼ばれる「標準ルール」も存在しますので、それに従って書くようにすると間違いが最も少なくなるでしょう。なお、規約は普遍的な存在ではありません。というのも、技術の変化や時間の経過に伴って、規約も改修されますし、時には廃れてしまうということもあり得ます。気が付けば全然規約が違っていた、となり得る点には注意が必要です。 守ってますか？コードの記述ルール。世界標準のルールとその使い方まとめ（TetraThemes） さて、WordPressもWordPressとしての規約を公開しています。PHP・HTML・CSS・JavaScriptなどの規約がありますので、今回のように、WordPressを運営していく方は、これを正とすると良いと思います。 WordPress コーディング規約（WordPress Codex 日本語版） CSS コーディング規約（WordPress Codex 日本語版） ちなみに、業界（言語）標準の規約などもあります。例えばPHP。昨今では「PSR」という規約がスタンダードとして広く認識されていると言えます。 PHPのコーディング規約 PSR-0、PSR-1、PSR-2、PSR-3とは（9ensanのLifeHack） HTMLやCSSの場合は、Googleが提唱する規約が注目されている傾向にあるようです。 Google HTML/CSS Style Guideを全部日本語に訳してみた【HTML編】（ぶちねこどっとうぇぶ） 後は、自分が使う環境に即した規約を選択すると良いのではないでしょうか。なお、企業やチーム（組織）独自のルールが用いられていることもありますので、自分以外の人と作業をともにする場合は、どの規約に沿うのか、最初に確認しておくと無用なトラブルを避けやすくなります。 親テーマのルールに従ってみることから初めてみる 説明が多すぎて、読んで勉強してもイマイチぴんと来ないという方は、「WordPressで利用するテーマ（親テーマ）を参照する」と手っ取り早いかもしれません。 例えば、親テーマのCSSやPHPファイルを参照し、作業をする場合は、その書き方を真似します。最初はちんぷんかんぷんだったとしても、慣れてくれば案外と手が動くようになるものです。それと並行して、「なぜ、ここはこういう書き方をしているのだろう？」と疑問に感じた点などを、先のような規約や解説サイトで学習することで、知識としても身につけやすくなるでしょう。 スペースとタブの混在に注意を なお、CSSやPHPをいじり始めた頃は、「空白（タブ・スペース）」について意識していない、という方もいるかもしれません。が、「タブとスペースが入り混じっている」という状態は、あまり望ましくありません。例えば、メンテナンスをする上で、検索・置換などを実行する場合にそれが障壁となる可能性も否定できません。 入り混じっているとはどういうことかと言えば、例えば、以下のような例があげられます。 p.test1 { color:red; } p.test2 { color:red; } 上の行は全ての空白が「スペース」のみ。下の行は一つ目と三つ目の空白が「タブ」で表現されている、という違いがあります（注：本記事では表現上の問題ゆえに、タブではなく全角スペース4つによる空白で表現しています）。動作上はどちらも全く同じように処理されるのですが、これは推奨されません。不用意に混在させないように注意しましょう。 補足として、「インデント（字下げ）」に特化して、タブとスペースの用い方についてまとめられた以下のサイトなどが、考え方を理解する上で重要かと思います。 ソースコードのインデント（字下げ）に、タブを使うか半角スペースを使うかという話（ある蜜柑の上にアルミ缶） CSSの場合、空白・改行の量は、読み込み速度に影響を及ぼす可能性がある、という余談 補足ではありますが。 改行や空白を用いることで人間の目には優しくなる一方、「ファイルの容量」は増えます（先の「インデント」の参考サイトでもファイル容量について触れています）。我々にとっての空白・空行は「何もないもの」として映りますが、コンピュータ側は「空行・空白を示す文字列」を認識しているからです（その「空行・空白を示す文字列」がその場所に存在するために、我々の目から見て空行・空白に見える出力結果が得られる、というのが処理の正しい順序ですが）。 一つ一つの「空行・空白を表す文字列」の持つ容量は微々たるものに過ぎません。親テーマのcssなどを見れば一目瞭然ですが、大抵のファイルは大きくても10～100KB程度でしょう。ごく普通のインターネット環境であれば、このファイルの読み込みにかかる時間などは、瞬きもしないうちに終わると考えられます。 ところが最近では、高速移動中の電車内などでインターネット接続をするモバイル端末の数が激増しました。それらが全て安定した通信回線を利用できているとは限りません。あるいは、通信容量を超過して速度制限がかかっているケースもあり得るでしょう。また、レンタルサーバーの場合は、極端に速度が出ない環境に陥ることもあり得ます。「読み込みに時間がかかるから、アクセスするのやめた！」と、サイトから離脱してしまう可能性を下げるためには、できる限り一つ一つのファイル容量を削減し、読み込みにかかるストレスを減らすことが大切です。 この対策手段の一つとして、「CSSから、あらゆる改行・空白などを削除すること」があげられます。一つ一つは微々たる容量であるとは言え、数百や数千単位で文字列が存在する場合、それなりの削減効果が期待できるからです。 既に公開されているサイトなどにも、こういった処理を行い、軽量化済みの状態になっているものも数多くあります。自分自身のCSSなどを軽量化したいと思った場合は、そういったツールがWEB上に公開されていますので、それらを利用すると良いでしょう。ちなみに、この処理を施したファイルは、読みづらいレベルを飛び越えて、手動でのメンテナンスはほぼ困難な状態になるため、後々のメンテナンスに備えて元ファイルを保管しておくことが欠かせません。うっかり、作ったCSSファイルのバックアップを取らずに加工してしまわないよう注意しましょう。

ほ〜らく奉行所

「SE方」の記事一覧 2ページ

wordpressの不正アクセスが増えていることについての雑感

備忘録　特定のプラグイン導入後、カスタムタクソノミーの絞り込み検索ができなくなった

XFREEでWordPressを利用していたら、Password Protectedがうまく機能しなかったので代替手段などを考えた

特定カテゴリに限定して、アイキャッチ画像の代わりに記事内最初の画像を表示させる

Google Ads（旧Google AdWords）のサポートを受けた話

【WordPress】テンプレートテーマ「conica」をいじった備忘録

Facebookのユーザーネームが作成できなかった件

【WordPress初心者向け】ヘッダー画像を"とりあえず"用意する

【WordPress初心者向け】CSSなどにおける改行・空白の考え方