HTMLコードの編集がよくわからない…不安という方に
こんにちはモンガです。今日は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/
⑤カラーピッカーなどなど
⑥.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/
関連記事
-
-
【Q】ホームページのバックアップってどうすればいいですか?
バックアップについてお話する前に、ホームページには2種類あることを復習しますね。 1つは静的に作られ ≫続きを読む
-
-
長野ADC主催のデザイン会議
昨日は長野ADC主催のデザイン会議に出てきました。会場が素敵で、古い酒蔵をくつろぎスペースに改造・再 ≫続きを読む
-
-
ホームページを知り合いに格安でやってもらってはいけない理由
webの森のこくえです。ホームページがほしいなぁと考えている方に、絶対に知って置いていただきたいこと ≫続きを読む
-
-
(WEB制作入門4)WordPressって何?
WordPressは、無料で配布されているブログを作るソフトです。 普通のソフトは、ワードとかExc ≫続きを読む
-
-
【フィッシング詐欺】メールアドレスを確認してください 現在のパスワードを保持
今朝、ベッドの中でぼーっとスマホをいじっていて、このメールを開いたとたん、「何だっけ、Googleが ≫続きを読む
-
-
パラコードアクセサリー製作入門! in 駒ヶ根高原・ヴァンドール
突然ですが、パラコードって知ってますか。 パラシュートを結ぶ紐なんですが、弾力があって柔らかいのに、 ≫続きを読む
-
-
初めてのWordPressにおすすめ twentytwelve
かわいいネイルサロンのホームページを作成させていただきましたので紹介します。 長野県駒ヶ根市のネイル ≫続きを読む
-
-
Q)3Dセキュアって何?お客様がクレジットカードのパスワードがわからないと問い合わせがあります。
ネットショップでお買い物をするときのクレジット決済、「3Dセキュア」ってご存知ですか? 事例をあげて ≫続きを読む
-
-
万歩計から、お小遣いがもらえるアプリに変えよう。日本製で初心者にもやさしいステラウォーク
健康のために万歩計!使ってる方に朗報😂 これからは、「歩くだけで少しでもお小遣い稼ぎ ≫続きを読む
-
-
【Q】サーバーとかドメインとか言われてもよくわからないのですが・・・
webの森では、サイト制作をご依頼したお客様に、毎回サーバーとドメインの管理を今後どうするかをお聞き ≫続きを読む