PHPから出力するHTML文に改行を入れて見やすく
HTML文は、メンテナンス性や構文の理解を早めるためにも、整理してきれいに出力したいものです。
具体的には、以下のようにある一定の決まりで改行をいれて出力する事で、ソースが見やすくなります。
(例なので簡単なソースですが。)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>改行のテスト | RishunTrading</title> <style> .color-change{ background:#ffff00; } </style> </head> <body> <header><h1>改行のテスト</h1></header> <div> <p class="color-change">これは改行のテスト</p> </div> </body> </html> |
ところが、PHPから出力するHTML文を整理してきれいに出力するために、改行コード(\n)を入れても改行ができません。
今回は、その解決方法について共有させて頂きます。知っている人は、当たり前のように知っているかと思いますが。。。
1.PHPから出力した場合(改行コード無し)
PHPファイル：途中にPHPからHTML文を出力しているのがわかるかと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>改行のテスト | RishunTrading</title> <style> <?php $style = '.color-change{'; $style .= 'background:#ffff00;'; $style .= '}'; echo $style; ?> </style> </head> <body> <header><h1>改行のテスト</h1></header> <div> <p class="color-change">これはテスト</p> </div> </body> </html> |
当然ですが、PHPから出力したHTML文は、以下の通り、改行できれいに整理して出力されていません(改行が入っていない)。
プログラムとしては問題はないですが。。。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>改行のテスト | RishunTrading</title> <style> .color-change{ background:#ffff00;} </style> </head> <body> <header><h1>PHPから出力するHTMLの改行テスト</h1></header> <div> <p class="color-change">これはテスト</p> </div> </body> </html> |
2.PHPから出力した場合(改行コード有り)
PHPファイル：改行コード(\n)を入れてみた場合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>改行のテスト | RishunTrading</title> <style> <?php //PHPで出力 $style = '.color-change{\n'; $style .= ' background:#ffff00;\n'; $style .= '}\n'; echo $style; ?> </style> </head> <body> <header><h1>PHPから出力するHTMLの改行テスト</h1></header> <div> <p class="color-change">これはテスト</p> </div> </body> </html> |
当然ですが、PHPから出力したHTML文内の改行コードは\nはそのまま出力される。
プログラムとしても、問題あり。。。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>改行のテスト | RishunTrading</title> <style> .color-change{\n background:#ffff00;\n}\n </style> </head> <body> <header><h1>PHPから出力するHTMLの改行テスト</h1></header> <div> <p class="color-change">これはテスト</p> </div> </body> </html> |
3.解決策は以下です。
PHPファイル:途中にPHPで、改行コードを含めて、改行コードをダブルクォーテーションで括ってHTML文で出力。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>改行のテスト | RishunTrading</title> <style> <?php //PHPで出力 $style = '.color-change{'."\n"; //改行コードをダブルクォーテーションで括る $style .= ' background:#ffff00;'."\n";//改行コードをダブルクォーテーションで括る $style .= '}'."\n"; //改行コードをダブルクォーテーションで括る echo $style; ?> </style> </head> <body> <header><h1>PHPから出力するHTMLの改行テスト</h1></header> <div> <p class="color-change">これはテスト</p> </div> </body> </html>す |
すると改行が挿入されるので見やすく出力する事ができる。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>改行のテスト | RishunTrading</title> <style> .color-change{ /*該当部分*/ background:#ffff00; } </style> </head> <body> <header><h1>PHPから出力するHTMLの改行テスト</h1></header> <div> <p class="color-change">これはテスト</p> </div> </body> </html> |
PHPから出力するHTMLを挿入する際に、改行を入れたいならば、改行コードをダブルクォーテーションで括りましょう
以上、皆さまのお役に立てれば幸いです。
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
