WebCoding.jpコーディングと文字校正・校閲を同時進行できるサービス「ウェブコーディング.jp」

ご相談はお気軽にどうぞ 03-5369-1878

月別アーカイブ: 11月 2013

○秘

HTMLが一瞬で見やすくなる置換術!

カテゴリ:コーディングTips

2013年11月28日

社内レクリエーションでブラックバス釣りに行きましたが、1匹も釣れず帰ってきました、チーフです。

そんな悔しい思い出を一瞬にして吹き飛ばす魔法の置換術を今回は皆さんに伝授したいと思います!


<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>あさのあいさつ</title>
</head>
<body>
	<h1>おはようございます</h1>
</body>
</html>

上記のようなコードを例に見ていくことにしましょう。

ファイルサイズを小さくするために、インデントやスペースをとった形にすることはよくありますよね。

<!DOCTYPE HTML><html lang="ja"><head><meta charset="UTF-8"><title>あさのあいさつ</title></head><body><h1>おはようございます</h1></body></html>


こんな感じです。

これをある程度見やすい形にするためには
テキストエディタに付いている「置換」を使用します。

今回はMacに標準で入っている
「テキストエディット」を用いて解説していきます。


編集 -> 検索 -> 検索と置換…
と進んでいただくか

command + option + F
のショートカットキーで置換を行うことができます。


検索ボックスの中に

><

を入力します。

そして検索ボックス下にあります
置換する文字列を指定するテキストボックスの中に

>
<

> と < の間に改行を入れた形にして「すべて」をクリックすると、、、


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>あさのあいさつ</title>
</head>
<body>
<h1>おはようございます</h1>
</body>
</html>

上記の様な形になります!
これである程度どのような構造になっているか確認しやすくなりましたね。

さらにインデントを入れてあげることにより、更に可読性を上げることが出来ます。
皆さんも読みやすいキレイなコードを心がけて作業にとりかかりましょうね!

読者登録

読者になる

このブログの更新情報が届きます

プロフィール

チーフ

ニックネーム:チーフ

血液型:A型

得意技:ブラインドコーディング

座右の銘:宵越しの金は持たない

口癖:「チェェェーック!」

愛犬:マレーシア生まれカラムーチョ大好きパグの "ジャッキー"

秘書:ニコ動とモンハンが生き甲斐 "左門寺バーバラ久美子"

カレンダー

2013年11月
« 10月   12月 »
 123
45678910
11121314151617
18192021222324
252627282930  

アーカイブ