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】ホームページが大きくなるにつれてナビゲーションの管理(?)に困っています。ページを増やすたびにたくさんのファイルを変更しなくてはいけません・・

ナビゲーションは、ホームページによっては、サイトのヘッダーにあったり、サイドナビにあったりして、目次… ≫続きを読む

メールの反応がない方・・

例えば今期になってから、新しくお仕事をご依頼されたりお客様になっていただいて、新しく知り合った方が6… ≫続きを読む

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

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

WordPressにPDFやWord、Excelを添付する方法

当たり前のことかもしれませんが、質問がありましたのでこちらで紹介します。 WordPressのメディ… ≫続きを読む

阿智村商工会主催 ホームページ勉強会と相談会

「WEBサイトを作ったけど、自己流なのでどうしたら良いかわからない。 効果を上げられるホームページっ… ≫続きを読む

ホームページを知り合いに格安でやってもらってはいけない理由

webの森のこくえです。ホームページがほしいなぁと考えている方に、絶対に知って置いていただきたいこと… ≫続きを読む

Canva vs Affinity 比較してみた。デザインするならどっち?

こんにちは、モモンガです。今日は、2024年7月11日。待っていました、Affinityの6ヶ月無料… ≫続きを読む

【Q】お店のfacebookページを作ったのですが、記事を投稿しても、反応があまりないし、誰が見てくれているかわからないんですが・・・?

《2016年2月補足》サイトリニューアルにあたり、旧記事を整理していますが、アクセスの多い記事は残し… ≫続きを読む

ネットショップのクレーム対応

先日ネットショップのクレーム対応について、とある座談会で教えていただいたので自分へのメモとして書いて… ≫続きを読む

▲ページ先頭へ