サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

HTML

HTMLのアイコン

【srcset属性・sizes属性】デバイスによって読み込まれる画像を振り分ける方法

*srcset/sizes属性についてです*

Webページがスマホから閲覧される場合、画面が小さいので大きなサイズの画像は必要ありません。

一方、PCは画面が大きいので画像サイズも大きい(高画質である)ものが良いと言えます。
このようにデバイスによって適切なサイズの画像を自動で切り替えてくれるのが、srcset/sizes属性です。

src属性・href属性のURL指定方法

*ファイルのURL指定方法についてです

HTMLのimgタグやlinkタグでは画像ファイルやCSSファイルを読み込むために、ファイルのURLを指定する必要があります。

ファイル名やURLの指定方法が間違っているとファイルが読み込まれないので、URLの指定方法はしっかり押さえておきましょう!

articleタグとsectionタグの使い分け【HTML】

*HTML:articleタグとsectionタグの使い分けについてです

HTMLはマークアップ言語であり、タグはWebページコンテンツの役割や意味を明確にするためのものです。

しかし、マークアップの対象の違いが分かりづらいものも中にはあります。その代表が、articleタグとsectionタグではないでしょうか?

より分かりやすい構造のHTMLを作成できるよう、両者の違いについてあらためて確認していきましょう!

ブロックレベル要素とインラインレベル要素の違い(HTML)

*HTML:ブロックレベル要素とインラインレベル要素の違いについてです

2021年11月時点で最新のHTML5では、ブロックレベル・インラインレベルで要素が分けられている…というわけではありません。

ですが、CSSのdisplayプロパティではblockinlineという値がありますし、ブロックレベル要素とインライン要素があると考えた方がわかりやすい場合も多いです。

ということで、HTMLのブロックレベル要素とインラインレベル要素について解説していきます。

リストの挿入(olタグ・ulタグ)

*HTML:リストの挿入についてです

グローバルメニューや、ブログの目次など、Webサイト制作では「情報をリストで表したい」という場合があります。

そこで今回は、HTMLでリストを挿入するタグと方法について解説していきます。

リストの挿入は決して難しいものではありませんが、入れ子(ネスト)にする場合などは少し注意が必要です。

見出しの挿入(h1タグ〜h6タグ)

*HTMLの見出しの挿入についてです

SEO対策としても重要と言われる見出しタグ(h1〜h6)ですが、重要なタグである分様々な情報が飛び交っていて、結局どう使えば良いのか悩んでしまいやすいタグでもあります。

そこで今回は、初心者が悩まなくて済む、基本的な見出しタグの使い方について紹介していきます。

表の挿入(table・tr・th・tdタグ)

*HTMLの表の挿入についてです

会社概要や店舗の営業日・時間など、Webページに掲載する内容を表でまとめたい場合も多々あります。

そんな時に活躍してくれるのが、HTMLのtableタグとそれに関連するタグです。

今回は、HTMLに表を挿入することができる、table・tr・th・tdタグについて紹介していきます。

Webページ構造の基本(header・footer・mainタグ)

*Webページの基本構造についてです

Webページは様々なブロック・パーツから成り立ちますが、基本的な構造はだいたい決まっています。

今回はheader・footer・mainタグを紹介しながら、Webページの基本的な構造について説明していきます。

HTMLのタグとは?

*HTMLのタグの基本についてです

HTMLのタグの種類はたくさんありますが、タグの種類を覚える前に、まずは

「タグってどういうものなの?タグを書く際の基本的なルールは?」

という点をしっかり理解することが大切です。

今回はタグの基本的な概念や、タグを挿入する方法などを説明していきます。

HTMLって何なの?

*HTMLの概要についてです

「そもそもHTMLとは?」をテーマに、HTMLの役割や概念的な部分を解説しています。

プログラミングとの違いも簡単に解説しているので、はじめてHTMLに触れる方におすすめの記事です。