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入門, ネットショップ入門| 

  関連記事

【Q】ホームページのバックアップってどうすればいいですか?

バックアップについてお話する前に、ホームページには2種類あることを復習しますね。 1つは静的に作られ ≫続きを読む

【Q】ドメインの引っ越しについて何からしたら良いかわかりません。具体的には今別会社で管理しているのを私が管理したいのですが・・・

ドメインの移管は何度やってもけっこう大変というか、失敗しないように出来るかちょっと緊張します。 とい ≫続きを読む

根羽村取材記 長野県の最南端、愛知県から信州への入り口です。

長野県根羽村をご存知でしょうか。長野県の南の町、飯田市の方に根羽村知ってる?ってきくと、知らないとい ≫続きを読む

覚えてもらえるお店になること・・・

webの森は信州EC実践会という、ウェブマーケティングの勉強会を主催していまして、たくさんのネット店 ≫続きを読む

Canvaを使ってみました。「イラレやフォトショがなくても、簡単な画像くらいなら自分で作成したい」方のための….

私はEC実践会の自主勉強会や、お客様の指導で、HPの作り方をレッスンすることもあるのですが、そんなと ≫続きを読む

【Q】SEO対策について。初心者すぎて何からどうしたらいいか皆目わかりません(+ +;)

SEO対策とは、簡単に言うと「ホームページを検索で上位に来させる対策」と言われています。 でも・・・ ≫続きを読む

AIのチャットロボット「ChatGPT」登録方法と使い方

またもやすごいAIが登場。「ChatGPT」のWebアプリ版。現在は無料で使えるということで、早速使 ≫続きを読む

Midjourney(AI画像生成ツール)の命令のコツ

Midjourneyのコツがだんだんわかってきたので、参考コマンドを紹介します。 まずコツを覚えて、 ≫続きを読む

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

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

同じ部屋の別のWindows10とフォルダを共有したい場合

今回ものすごく苦労して、パソコンの先生に教わりながら設定したのですが、いろいろ備忘録しておきます。( ≫続きを読む

▲ページ先頭へ