ここのサイトはWordpressで書いているため、HTMLを直接編集することはあまりないのですが、テーブルとかをちょこっとHTMLで書かなくてはいけなくなることがあります。
WordPressだと、HTMLを記述する「テキスト」と、ブラウザで見えるイメージで編集（WYSIWYGと呼ばれています）する「ビジュアル」を切り替えながら作業していけばいいのですが、普通のテキストエディタでHTMLを書くと「WYSIWYG」での使い勝手が良くありません。
色々調べたところ、なんと、Wordpressのように「テキスト」と「ビジュアル」を切り替えながら編集できるサイトを見つけました！！
オンラインHTMLエディタ（Online HTML Editor）
その名もズバリ、オンラインHTMLエディタ（Online HTML Editor）です。
使い方はかんたん。Wordpressのようなエディタに慣れている人なら、特に迷うことなく使えると思います。
編集モードをみてみよう
まずは、画面の左下を見てください。
「エディター」が選択されているときはWordpressでいう「ビジュアル」モードです。
上にあるツールバーから様々なHTMLタグを挿入してページを編集できます。
それに対して、「ソース」にするとWordpressでいう「テキスト」モードになります。
HTMLを直接編集することができます。
予定表を作ってみる
試しに、予定表をHTMLで作ってみます。
完成予定図
イメージはこんな感じです（汚くてすみません）。
テーブルを用意する
まずは、大枠になる２×２のテーブルをつくります。オンラインHTMLエディタ（以下エディタ）を開いて、ツールバーから「テーブル」を選択します。
今回は枠線は必要ないので、行と列が２になっていることを確認してOKボタンをクリックします。
小さいテーブルが出来ます。
ちょっとわかりにくいので、それぞれのセルに文字を書いておきます（この文字は最後に消します）。
カレンダーを作る
各月のカレンダーもテーブルで作るのですが、ゼロから作るのは大変です。そこで、HTMLで出力してくれる便利サイトを利用させていただきました。
こちらからカレンダーのHTMLをゲットして、カレンダーのセルに貼り付けます。
なお、こちらのサイトでカレンダーを作るとき、以下の設定にしました。
- カレンダー枠線の色：#333333
- 定休日の背景色：#FF6666
- 曜日の行の背景色：#CCCCCC
- カレンダーの横幅：空白
※出力されたHTMLの最終行にある「<font color=”#FF6666″>■</font>が定休日です。」は不要なので削除してからコピーします。
作ったカレンダーを貼り付ける
エディタのモードを「ソース」に変更します。
<table rules=”none” style=”width:15px;height:37px;border:0px solid #aaaaaa”>の「rules=”none” style=”width:15px;height:37px;border:0px solid #aaaaaa”」は不要なので削除します。
次に、先ほどゲットしたカレンダーのHTMLを「3月のカレンダー」の文字の上に貼り付けます。「3月のカレンダー」を選択してそこに貼り付ければOK。
エディタのモードを「ソース」から「エディター」に変えると、キレイなカレンダーが表示されています。
同様に、4月のカレンダーも貼り付けました。
予定を書き込む
最後に、各月の予定を書き込みます。
こちらは「エディター」モードでワープロソフトのように書き込むことが可能です。
「3月の予定」の行末にカーソルを合わせて、Enterキーを押して改行します。
その後、箇条書きにしたいときは、ツールバーの「
」をクリックしてから書きます。
予定を書き込んだらこんな感じになります。
HTMLをコピーする
「エディター」や「ソース」でHTMLを作成したら、最後はソース全体をコピーすればOKです。
「ソース」に切り替えて、編集エリアをクリックしてから「CTRL＋A」で全選択して、「CTRL+C」でコピーします。
作ったHTMLは、使いたいところに貼り付けましょう。
HTMLソースを貼り付けてからの編集もOK！
すでにできているHTMLをワープロ感覚で編集したい時もバッチリです！
モードを「ソース」に切り替えてHTMLを貼り付ければOK！その後「エディター」モードでワープロソフトのように編集することが出来ます。
特にテーブルは行を削除したり挿入したりを画面で見ながら出来るのがいいですね！
以上、オンラインHTMLエディタの使い方を簡単に解説しました。
とっても使いやすく、わかりやすいサイトでした！
これからも利用させてもらいたいと思っています。作者様、どうもありがとうございました！
コメント