【HTML入門】
HTMLのスキルアップ記事一覧↓
【初心者向け】これからHTMLを始めたい人・始めたばかりの人が知っておきたい内容をご紹介しています。
HTML(エイチティーエムエル) 【HTML】::before の概要と使い方について
::beforeとは？ ::before は、指定した要素の内容の前に仮想の要素を追加し、そこにスタイルを適用するためのCSS疑似要素です。 これにより、HTMLを変更することなく、スタイルシートだけで特定の内容を追加できます。 使用例 基...
HTML(エイチティーエムエル) 【HTML】data-align属性とは？（要素の配置を指定するための属性）
data-align属性は、HTMLやウェブ開発で、要素内のコンテンツの配置を指定するために使用されます。これは通常、プラグインやフレームワーク、またはカスタム実装の文脈で見られ、コンテンツの配置を明示的に定義する必要がある場合に使用されま...
HTML(エイチティーエムエル) HTMLの target 属性における “_blank” と “blank” の違いについて
HTMLの target 属性における "_blank" と "blank" の具体的な違いは、主にブラウザがリンクの目的地をどのように扱うかに基づいています。 target="_blank" target="_blank"は、HTMLのリ...
HTML(エイチティーエムエル) 【HTML】HTMLの属性とは？要素の性質を制御する機能について
HTMLの属性はHTML要素の追加情報を提供し、その振る舞いや表示を制御するために使われます。ここではよく使われるいくつかのHTML属性を一覧で紹介します。 HTMLの属性とは？ HTMLの属性は、HTML要素の振る舞いや表示を制御するため...
HTML(エイチティーエムエル) 【HTML】電話発信リンクを設定する方法（tel:リンク）
HTMLでの電話発信リンクの基本 ウェブサイトに電話発信リンクを追加するには、HTMLの<a>（アンカー）タグを使用します。 aタグは通常、ウェブページ間のリンクや、同一ページ内の特定のセクションへのリンクを作成するために使われますが、hr...
HTML(エイチティーエムエル) 【HTML】HTMLコードのテンプレート（シンプル）
以下は、シンプルなウェブページのテンプレートの例です。このテンプレートは、ナビゲーションバー、ヘッダー、コンテンツエリア、フッターの基本的なセクションで構成されています。 コピーして使用ください。 HTMLコードのテンプレート1 <!DOC...
HTML(エイチティーエムエル) 画像の代替テキスト（alt属性）とは？【HTML】
代替テキスト（alt属性）とは？ 代替テキスト（alt属性）とは、Webページに掲載される画像に対して、視覚障がい者や画像の読み込みに失敗した場合に代替となるテキスト情報を提供するための属性です。 この属性によって、スクリーンリーダーなどの...
HTML(エイチティーエムエル) HTMLのaタグの基本とアンカーの設定方法
HTMLのaタグとは？ HTMLのaタグは、リンクを作成するために使用されます。HTMLでアンカー（特定の場所にジャンプするための場所を示す）を作成するために使用される要素です。 この要素は、id属性を持つ別の要素に対してハイパーリンクを作...
HTML(エイチティーエムエル) 【HTMLテンプレート】シンプルなテンプレート
HTMLのテンプレート 以下はHTMLの基本的なテンプレートです。 <!DOCTYPE html> <html> <head> <title>{タイトル}</title> <meta charset="UTF-8"> <meta name=...
HTML(エイチティーエムエル) 【HTML】metaタグで他のページに自動転送させる方法
あるページを開いた時に、別のページにリダイレクトさせる方法です。 いくつか方法がありますがmeta refreshによる転送（リダイレクト）も可能です。 meta refreshによる転送（リダイレクト）方法 方法は簡単です。下記のコード（...
HTML(エイチティーエムエル) 【HTML】iframeのスクロールバーを非表示・無効にする
ページ内にiflameで埋め込みをすると、画面に収まらない場合はスクロールバーが表示されてしまいます・・・。こちらをCSSを使って、消してみます。 <iframe src="" width="500" height="500"></ifra...
HTML(エイチティーエムエル) 【初めてのホームページ制作入門】FTP接続でWEBサーバーにファイルをアップロードする方法｜WinSCP
HTMLファイルを公開 ホームページを世界中に公開するためには、HTMLファイルをレンタルサーバーにアップロードする必要があります。 FTP接続する レンタルサーバー上にファイルをアップロード際に使う方法のひとつがFTPです。 FTPとは？...
HTML(エイチティーエムエル) 【HTML】古いInternet Explorerの表示をHTML5に対応させる方法｜IE=edge
meta要素にIE=edgeを追加 以下を記述することで、IEの最新のレンダリングが適用されます。 content="IE=edge" <meta http-equiv="X-UA-Compatible" content="IE=edge"...
HTML(エイチティーエムエル) BracketsでHTML・CSSのインデントを超速整形！便利アドオン｜Beautify
あ、インデントが面倒だな・・・ BracketsでHTMLを書きまくっていて、「あ、インデントが面倒だな・・・」という時がありませんか？ そんな時に超役立つ拡張機能です！ まずは拡張機能の画面に移動します。 Beautify さっそく一番上...
HTML(エイチティーエムエル) 【アメブロ】メールアドレスをクリックした時にメールソフトを起動させる方法｜HTMLタグ/リンクタグ
アメブロの記事内のメールアドレス アメブロの記事内に記載したメールアドレスをクリックすると「メールソフト・メールアプリ」が起動するようにする方法です。 ※メールアドレスを記入しただけではクリックできないような状態になっています。 クリックす...
HTML(エイチティーエムエル) 【CodePen（コードペン）】HTML、CSS、JSのコードをオンライン上で編集・画面の確認が出来る便利サービス！
CodePen（コードペン） コードペン HTML、CSS、JSのコードをオンライン上で編集・画面の確認が出来る無料のコードエディタ（オンラインエディタ）・ウェブデザイン開発の支援ツール。 WEBサイトを開くとすぐに利用開始できます。 HT...
HTML(エイチティーエムエル) オンラインHTML・CSSエディター「Thimble」が便利！！｜HTMLのコーディングならThimble
Thimble Thimble は、HTML や CSS、JavaScript のコードをWebブラウザの上で書く・学ぶことが出来るmozilla製の無料HTML・CSSエディターです。 オンライン上にデータが保存出来るので、データがクラウ...
HTML(エイチティーエムエル) オンライン上でHTMLやCSSの編集・確認・保存が出来る「Liveweave」が便利！
サイトを開くといきなり編集画面が表示されます。 あれこれ考えずにすぐに使えるので便利です。 このままでも便利ですが、より活用するために「アカウント登録」をしておくと便利です。 右上のLoginから「Sign up for new accou...
HTML(エイチティーエムエル) WEBサイト作成で最高に使いやすいAdobeのHTMLエディタ！／Brackets
Webデザインを理解する最新のオープンソースのテキストエディタ。 Bracketsは最新のテキストエディタで、ブラウザで簡単に設計できます。 これは、Webデザイナーやフロントエンド開発者のために作られたものです。 インストールファイルをダ...
HTML(エイチティーエムエル) HTMLの＜! DOCTYPE＞と基本構造について
<! DOCTYPE html> <! DOCTYPE html> 文書がHTML5で作成されたものであることを宣言する決まり文句。文書の先頭に記述します。 <!DOCTYPE html><html> <head><meta charset...
HTML(エイチティーエムエル) target=”_blank” のセキュリティリスク？rel “noopener noreferrer”の設定
"noopener noreferrer"の設定について target="_blank"を設定している場合で、 rel="noopener noreferrer"を設定していない場合、リンク先のサイトがwindow.opener.locat...
HTML(エイチティーエムエル) 【script async(HTML5)】非同期で読み込み、読み込み終わり次第実行する
script async(HTML5) 「非同期で読み込み、読み込み終わり次第実行する」 ページのレンダリングをブロックすることなくスクリプトを実行できます。 ※asyncはHTML5から加わった属性です。 これはインラインスクリプト (す...
HTML(エイチティーエムエル) WEBサイト制作の知識・スキルを試すなら！「HTML5プロフェッショナル認定試験」を受験してみましょう｜HTML5
▶ Web資格なら「HTML5プロフェッショナル認定試験」公式サイト HTML5やCSS3、JavaScriptなど最新の次世代Web標準言語に関する知識と技術力を認定する資格試験である。 特定非営利活動法人エルピーアイジャパンが2014年...
HTML(エイチティーエムエル) HTML・CSS 画像を横並びに整列させるときに参考になるサイト
divボックスを横に並べる divボックスを作るのは簡単でした。縦に、ボックスを積み上げていくのも簡単です。ただ順番に前回のボックスを書き加えて行けばいいだけです。 <display: inline-block;></div> HTML+C...
HTML(エイチティーエムエル) HTML・CSSを学ぶきに参考にしたいサイトまとめ２
サルワカのWebデザイン入門 サルワカのWebデザイン入門では、どの書籍よりも、またどのウェブページよりも分かりやすくオシャレなWebサイトを作るための知識を解説していきます。 タグ素材・HTMLタグであそぼう - 3Web メモ帳で作るホ...
HTML(エイチティーエムエル) HTML5&CSSを学ぶ時に参考になるサイト｜HTML5&CSS入門
HTML5&CSSを学ぶ時に参考になるサイトを集めてみました。 制作や修正の際にご参考にして頂ければと思います。 レスポンシブWebデザインの基礎知識 「レスポンシブWebデザインとは？」という極々基本的なことから、そのメリット、デメリット...
