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

  関連記事

【フィッシング詐欺】メールアドレスを確認してください 現在のパスワードを保持

今朝、ベッドの中でぼーっとスマホをいじっていて、このメールを開いたとたん、「何だっけ、Googleが… ≫続きを読む

Photoshopの色相・彩度のチュートリアル

(1)色相・彩度を選 (2)左下の手のひらマークをクリックし、スポイトで変更したい色を選択する (3… ≫続きを読む

WordPressのページ更新をするときに便利なツールあれこれ

まず、GoogleChromeはPCに入れておいてください   HTMLを編集するのにとて… ≫続きを読む

ブログとfacebookの違い
Q:FBページを作りました。書いたブログを自動的にリンクさせたいのですが・・・

A:結論からいうと、facebookの自動投稿はおすすめできません クライアント様から質問をいただい… ≫続きを読む

おめでとうございます! Chrome ユーザー調査 というのが出たら詐欺

GoogleChromeをお使いの方、こんな画面が出たら詐欺なので注意してください。 ───────… ≫続きを読む

パラコードアクセサリー製作入門! in 駒ヶ根高原・ヴァンドール

突然ですが、パラコードって知ってますか。 パラシュートを結ぶ紐なんですが、弾力があって柔らかいのに、… ≫続きを読む

Q:メルマガを始めたいですが何からすれば良いですか?

こんにちは、webの森です。今回はサポートにいただいた質問と回答を掲載させていただきます。 質問され… ≫続きを読む

DaVinci Resolve(ダビンチリゾルブ)web埋め込み用書き出し設定

こんにちは、モモンガです。今回初めてweb用に動画を埋め込むために制作をしまして、いつもはYoutu… ≫続きを読む

【ホームページの作り方】病院・歯科医院のホームページ作成

歯科医院のホームページは、院長・スタッフ紹介、治療内容、医院の紹介と受付時間・交通アクセスなど、だい… ≫続きを読む

Labカラーモードと調整レイヤーの使い方

Adobe Stockのチュートリアルに載っていたので、Photoshopでやってみたらほぼ同じだっ… ≫続きを読む

▲ページ先頭へ