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

  関連記事

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

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

画像のファイルサイズ、小さくしていますか?

webの森からお客様にウェブサイトを納品した後、お客様ご自身で更新している場合、画像の容量のことを考… ≫続きを読む

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

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

フォトショップでバウンディングボックスを自動表示

これ・・・意外と便利なのに、初期設定ではそうなってないので知らずに使っている人が多いかもしれません。… ≫続きを読む

グーグルアナリティクスGA4への切り替え

来年7月1日からGoogle Analytics4への移行があるということで、まだ未設定の場合は下記… ≫続きを読む

Q:ドメイン移管の手順を教えてください

ドメインの移管(ドメインの管理者を移動すること)の手順は、転出と受け入れ先のそれぞれのレジストラ業者… ≫続きを読む

【ホームページの作り方】観光農園・直販通販サイトの制作

農業とインターネット。一見、あまり関係ないと思われがちですが、田舎で営業する農家さんにとって、インタ… ≫続きを読む

【Q】リニューアルしてページ名がindex.htmlからindex.phpに変わります。名前が変わると、過去にいろんな別サイトやブログからリンクしているので、リンク切れが起きてしまうんですが、どうすれば!?

リニューアルでindex.htmlをindex.phpに変更することって結構ありますね。静的HTML… ≫続きを読む

初めてのWordPressにおすすめ twentytwelve

かわいいネイルサロンのホームページを作成させていただきましたので紹介します。 長野県駒ヶ根市のネイル… ≫続きを読む

古いバージョンのWordPressサイトを、新しいバージョンに上げ、データベースを移転する方法のメモ

サーバーの引っ越し。こまごまといろいろやらなければ行けないことがあって、よく手順を間違えたりしてロス… ≫続きを読む

▲ページ先頭へ