10月20日よりテーマをSWELLに変更しました。 ブログ名も変更になりました。

HTMLのソースコードの表示方法&スマホ(iPhone,Android)でWebページのHTMLソースを見る方法

ITの勉強にもなるかなと始めたブログですが、少しづつですが
用語にもなれてきました。

まだパーマリンクって何?というレベルです。

サムネイルさえ知らなかった私です。(>_<)

最近の興味はプログラミング!

まず、この本を読むことから始めてみます。

最近は小学生の必修科目にもなっているようですね?私が今小学生なら、ちゃんと勉強についていけていたかな?と思う今日この頃です。

私、ずっと疑問に思っていたことがありまして、

実は、HTMLのソースコードがどこにあるのかがずっとわからなかったんです。

ホームページを見てもないし、本にズラズラと書いてある記号のようなもの(そんなレベルです)がどこで確認できるのだろうと、真剣に悩んでました。

それが今回やっとわかりました!

HTMLのソースコードを見る方法(PCの場合)

Webページを開き、右クリックで「ページのソースを表示」や「ソース」を選択します。
すると別タブでHTMLコードが書かれたページが表示されます。それを見るとどんな構成になっているのか確認できるので制作時の参考になるでしょう。

と書いてあったので、早速やってみました!

出てきました!!

長い間のモヤモヤがやっとスッキリしました。感動!

スマホ(iPhone,Android)でWebページのHTMLソースを見る方法

  • こちらの記事を参考にしました。

そんなレベルでやってます。ブログもワードプレスで始めたのでスタイルができた所へ入力するだけだったのでコードもなにもわからずに始めてしまいました。

初心者でも簡単にブログが作れてしまうのがワードプレスのいいところですね。

ワードプレスさまさまです💛コードも何もかけなくてもちょとしたおしゃれなブログが作れてしまうのですから・・・

HTMLのソースコードを見るとわけのわからないコードがぎっしり!プログラミングとか勉強されてる方なら簡単に読めるんでしょうね。尊敬!

最初は無料のテーマからでも少しづつ始めていくとブログをやってる実感がわいてきます。ちなみに、このブログは当初無料テーマ(Nishiki)でつくりました。

HTMLとは何か、そしてソースコードがWebページの構築にどのように使用されるか

HTML(HyperText Markup Language)は、Webページを作成するために使用される標準マークアップ言語です。テキストコンテンツに「タグ」と呼ばれる特定のコードを使用して構造を付け、Webページ上での表示方法を指示します。HTMLは、テキストを段落や見出しに整理し、リンク、画像、リスト、テーブルなどの要素を挿入するために使用されます。

Webページの構築において、HTMLソースコードはその基盤を形成します。ブラウザはHTMLコードを解釈し、ユーザーに視覚的な形でコンテンツを表示します。HTMLタグは、要素の開始と終了を示し、コンテンツの意味(セマンティック)や構造を定義します。例えば、<p>タグは段落を、<h1>から<h6>タグは見出しを、<a>タグはハイパーリンクを表します。

HTMLソースコードは、テキストエディタや専用の開発環境で書かれ、.htmlまたは.htmという拡張子のファイルに保存されます。このコードには、ページのタイトル、構造、リンクされたスタイルシート(CSSでデザインを制御)、JavaScriptファイル(インタラクティブな機能を追加)への参照も含まれることがあります。

競合他社のWebサイトを分析する際のヒント

競合他社がどのようにHTMLタグ(特に見出しタグ<h1>, <h2>, …, <h6>)を使用して情報の階層構造を整理しているかを確認します。これは、そのサイトのSEOとユーザビリティに重要な指標です。

コンテンツ戦略の洞察

ページ内のテキストを分析し、競合他社が重点を置いているキーワードやフレーズを特定します。これらは、見出し、段落、リンクのテキストなどに含まれている可能性があります。

画像、ビデオ、インフォグラフィックなどのリッチコンテンツの使用方法を観察し、彼らがどのように視覚的要素を利用してユーザーの関心を引いているかを分析します。

HTMLソースコードの表示と分析は、Web開発とデザインのスキルを大きく向上させることができる

他のWebサイトのHTMLソースコードを見ることで、様々なコーディングスタイルや慣習を学ぶことができます。これは、自分のコーディング技術を向上させるのに役立ちます。

異なるWebサイトのHTMLを分析することで、さまざまなレイアウトテクニックやデザインパターンがどのように実装されているかを理解することができます。

自分のサイトで問題が発生したときに、他のサイトのHTMLソースコードを参照することで、類似の問題がどのように解決されているかを学ぶことができます。

現代のWebデザイントレンドがどのようにHTMLとCSSで実現されているかを学び、自分のデザインに適用することができます。

以上、読んでも頭が痛くなるので、シンプルなのに、高機能なワードプレスの有料テーマを購入したわけです。

長く続けられそうだなと思ったら、有料のテーマを購入してもいいかもしれませんね。

※10月20日からこのブログをSWELLに引っ越ししました。とうとう欲望に負けてしまいました。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

はじめまして。管理人のちえぞうです。1966年兵庫県生まれ。只今絵本の出版に夢中です。よろしくお願いします。

目次