HTMLコードの編集がよくわからない…不安という方に

   web入門, ネットショップ入門| 

こんにちはモンガです。今日はHTML コードが簡単に編集できる便利なツールの 紹介をします。

ネットショップの管理画面には HTMLコードの編集が必須になる場合があります。
でも初心者の方にとっては、壊してしまわないか不安ですよね?
そんな場合に役立つ便利な無料のツールの紹介です。

無料のhtml-online editorとは

htmlのエディターはここにあります。長いコードは有料版でないと使えないですが、短いコードなら使えます。

https://html-online.com/editor/

言語は英語のままで使ったほうが、HTMLコードが文字化けしないので良いと思います。

詳しい使い方は私のyoutubeのチャンネルで紹介しました。

HTMLの編集画面の紹介

ネットショップの管理画面はこのようなコードの編集が必須になる場面がたびたび登場します。

そんな時にコードをコピーしておいてから、このHTMLオンラインエディターへもってきて、貼付けをします。

このようになっていて、右側にコードを貼り付けると、左にプレビューが出るのでどこを編集すれば良いかがわかりやすいです。
タグにも色がついているので、壊してしまう心配がありません。

HTMLタグの意味を調べる

このTagsというところを見ると、HTMLタグの使い方を調べることができます。

便利なジェネレーター

①テーブルジェネレーター

面倒なテーブルタグをこちらで簡単に作ることができます。https://htmltable.com/

②イメージタグのジェネレーター

https://html-css-js.com/html/generator/image/

③フォームのタグ ジェネラーター

https://html-css-js.com/html/generator/form/

④特殊文字や絵文字のコード

https://html-css-js.com/html/character-codes/

⑤カラーピッカーなどなど

https://htmlcheatsheet.com/

⑥.htaccessやRobots.txtなど

よく必要になるコードをここからもらってくることができます。

⑦cssジェネレーター

このコーナーはcssの便利なジェネラーターが揃っています。
https://html-css-js.com/css/generator/

⑧グラデーションのジェネレーター

これもかなり便利そうです。お好みのグラデーションをプレビューしながら作れます。

https://html-css-js.com/css/generator/gradient/

⑨ボックスシャドーのジェネレーター

https://html-css-js.com/css/generator/box-shadow/
このサブメニューから、ボックスシャドーや、テキストシャドーのような、複雑なcssを生成することができます。

⑩ボタンジェネレーター

ボタンジェネレーターはここにあります。さくっと凝ったボタンが作れます。
https://htmlcheatsheet.com/css/

   web入門, ネットショップ入門| 

  関連記事

【ホームページの作り方】ポータルサイト・情報サイト・コミュニティサイトの作成

ポータルサイト、情報サイトで大事なことは、情報やページ数がどんどん増えていくしくみです。情報が大量に… ≫続きを読む

無料ツールや素材をダウンロードするときに気をつけよう

無料ソフトの紹介とか、無料素材配布などのサイトで、便利なものをお持ち帰りさせてもらおうとすると、知ら… ≫続きを読む

スマホでfacebookしてるときにいきなり音がならないように

スマホでFBをチェックしてると、動画が表示されたとたんに音が鳴りはじめて焦ったことありませんか? 音… ≫続きを読む

アマゾン チャットサービス どこ?

たどり着くまでにぐるぐると同じところへ戻り迷路をさまよってしまうので、自分への備忘録です。 ちなみに… ≫続きを読む

【Q】Dreamweaverでホームページを作っています。サイトを一部修正してサーバーにアップしているのに反映されません!

Dreamweaverでホームページを修正してサーバーにアップしてるのに、ブラウザで見ると変化がない… ≫続きを読む

WordPress PHP7から8へ更新する方法(非エンジニアの方でもChatGPTがいれば安全に更新することができます)

WordPressを古くから使っている皆さん、 PHPってわかりますか? PHPというのは PHPは… ≫続きを読む

(WEB制作入門1)静的サイトと動的サイトの違い

静的サイトの作り方 2000年くらいのこと。わたしがWEB制作をお仕事としてやり始めたころのことです… ≫続きを読む

WordPressをハッキングされるとどうなりますか?

弊社の関係者さんからの情報で、(一昨日のことです)致命的なハッキングにあってしまったWordPres… ≫続きを読む

メール設定サポートでよくある質問と答え

webの森ではたくさんのクライアント様のサーバー保守もしていますので、「メールが読めなくなったんです… ≫続きを読む

エックスサーバーをおすすめします

今回、つくづくエックスサーバーにしていてよかったという事件に出くわしたので紹介します。 エックスサー… ≫続きを読む

▲ページ先頭へ