WEBST8

HTMLのdl・dt・ddタグは説明リストタグといい、「用語の説明」や「Q＆A」「お知らせ(日付とタイトル)」などでよく用いられます。 今回はdl・dt・ddの使い方について解説します。       dl・dt・ddタグの概要 dl・dt・ddタグは説明リストタグといい、「用語の説明」や「Q＆A」「お知らせ(日付とタイトル)」などでよく用いられる、HTMLタグです。     ■dl・dt・ddタグ(説明リストタグ)が使用される例 用語の説明 Q&A ...

今回はテキストに下線・上線・訂正線などの装飾する際に使用するCSStext-decorationの使い方を解説します。 ■text-decorationでは線の位置や種類、色、太さを一括指定することができます。 <p>ここに<span style="text-decoration: underline solid red 3px;">テキスト</span>が入ります。</p>   ■よく使う例の一つはリンクaタグの下線を消す例です。text-dec ...

今回はCSSの擬似要素::before、::afterの使い方を解説します。 「CSSで吹き出しデザインを作りたい」「リストの先頭に好きな画像を表示させてオリジナルデザインのリストを作成したい」といった際に擬似要素::before、::afterを使うと非常に便利です。     擬似要素before、afterとは？ before、afterは要素の一部に対してのみCSSを効かせることができる「擬似要素」と呼ばれるものの1つです。 これを使うとCSSで対象となる要素の内側に子要素として ...

今回はHTMLのaタグの使ってリンクを設定する方法を紹介していきます。 aタグを使うことで任意のページへに移動だけでなく、同一ページ内のある箇所に移動する「ページ内リンク」や、クリックするとメールソフトが開くといった「メールリンク」等も作ることができます。 <a href="https://webst8.com/">ここにテキストが入ります</a>       aタグの基本的な使い方 aタグの基本的な使い方は下記の通り。   飛び先の指定には ...

divタグはdivision(分割)から由来しており、「ある部分をグループ化してCSSでレイアウトを変えたい」といった時などに使用されます。 imgタグやaタグと違って直接見た目や動作に変化がないので、いまいち意味や役割がわからない方も多いのではないでしょうか。 今回は、divの意味や利用シーンなど、divタグの使い方を解説します。     divタグとは？ divタグはdivision(分割)から由来しており、「ある部分をグループ化してCSSでレイアウトを変えたい」といった時などに使 ...

今回はHTMLタグの見出しタグ(h1~h6タグ)の使い方について解説します。     HTMLの見出しタグ(hタグ)とは？ HTMLの見出しタグ(h1~h6タグ)は、文章の「見出し」を設定することができるHTMLタグです。 見出しの種類には<h1>から<h6>まで合計6つの種類があり、h1が最も大きい見出しでh6が最も小さい見出しになります。 h1~h6タグの表示をブラウザ上で確認してみると、デフォルトでは以下のようにh1、h2タグなどは文字サイズが大きくなり、 ...

HTMLやCSSでWebページを作成・カスタマイズしようとした際に、Webブラウザによって意図せぬ余白がついていたり、フォントがブラウザによって異なったりすることがあります。   Webブラウザには、ブラウザ固有のスタイル(CSS)が効いているためです。ブラウザ毎の差異をなくすために、リセットCSSを利用してデフォルトのCSSをリセットしてコーディングを行うことが多いです。 今回はリセットCSSの概要や使い方、おすすめのリセットCSSをいくつか紹介していきます。     &n ...

VSCodeはインストールした初期状態でも高機能なテキストエディタでそのまま利用できますが、いくつかのプラグインを入れることでより便利に使えるようになります。 今回は、HTML/CSSを学び始めたばかりの方やコーディング作業を効率化したい方のために、おすすめのプラグインをいくつかご紹介します。 VSCodeは開発が進んでおりデフォルトでも十分高機能になっているため、それほど多くのプラグインを入れる必要はなくなってきています。 とはいえ、作業を効率化するためにプラグインはあったほうが便利なので、最低限必要な ...

Visual Studio Code(以下VSCode)では、HTMLやCSSを記述する際に、便利な拡張機能(プラグイン)が豊富に用意されています。 VSCode単体でも高機能なので、プラグインを使わないでコーディングすることももちろんできますが、プラグインを追加しVSCodeの機能をさらに拡張することで、効率よくコーディングができたり、コードを見やすくしたり、早くコードを打つことができるようになります。 インストール方法もとても簡単で、設定するのに時間もかかりません。今回はVS Codeのインストール方 ...

OGPはOpen Graph Protocolの頭文字を取ってできている言葉で、FacebookやTwitterなどSNS上でサイト(の記事)がシェアされた時の表示画面(例: サムネイルやタイトル、抜粋分など)を設定することが出来る仕組みのことを言います。 OGPを正しく設定することで、FacebookやTwitterなどのSNSから新しいユーザーを増やすのに役立ちます。 今回はOGPを設定してサイトがSNSでシェアした時の表示の設定方法をご紹介していきます。   ■(参考)Facebookで記 ...

システムフォントはPCやスマホなどの端末OSにあらかじめインストールされているフォントです。表示速度が早い反面、端末によってフォントが微妙に変わります。 一方、Webフォントはインターネット上の外部にあるフォントです。ネット上からフォントを読み込む分表示速度が少し遅くなりますが、端末によら同じフォントになります。 今回はシステムフォントとWebフォントの違いや両者のメリット・デメリットをご紹介していきます。   システムフォント Webフォント メリット 表示速度が早い ユーザーの閲覧環境に左右 ...

今回はCSSのプロパティであるpointer-event:none;でクリックイベントを無効化する方法とよくある使用例をご紹介します。 「スマホではクリックできる電話発信リンクをPCではクリックできないようにしたい」などといった場面などに活用することができます。 pointer-events:none; 対象要素に対して、クリックやタッチ、ホバーイベントなどを無効化する。 キーイベント(キーボード操作)に関しては無効化されない点に注意         ponter- ...

WordPressなどでaタグでtarget="_blank"を設定した際に、rel="noopener"またはrel="noopener noreferrer"という記述が自動で追加されていて気になった人もいるのではないでしょうか。 noopenerもnoreferrerのどちらもセキュリティ的な意味があります。なおnoreferrerがあるとリファラ取得ができないようになります。 今回は、noopennerおよびnoreferrerの意味と挙 ...

せっかくVisual Studio Code（以降、VSCode）をインストールしたけれど、使い方がいまいちわからない・・そんな方もいらっしゃると思います。 今回は、VSCodeをインストール後に、実際にHTML・CSSファイルを作成してWebページを作っていく方法をご紹介します。 VSCOdeをまだインストールしていない方は「【VSCode】Visual Studio Codeのインストール・設定手順」をあわせてご参照ください。 関連記事 Visual Studio Code(VS Code)を始めたば ...

HTMLやCSSでコードを書く際に「Visual Studio Code(略称VSCode)」というテキストエディターが最近人気が集まっています。 今回はVisual Studio Code（以降、VSCode）のインストールと初期設定方法をご紹介します。 関連記事 Visual Studio Code(VS Code)を始めたばかりの方向けの関連記事はこちら VSCodeでHTML・CSSファイルを作成する手順 VSCodeで拡張機能・プラグインをインストール追加する方法 VSCode 導入しておくと便 ...

今回は、HTMLの学習を始めたばかりの初心者の方を対象に、テーブルタグ(table)を利用して、表を作る方法を説明していきます。     テーブルタグ tableの基本的な使い方 まずはテーブルを使った表作成の基本を説明していきます。   表を作成したい場合は、tableタグを含めて複数のタグを利用して構成します。よく使うタグは下記の通りです。 タグ意味 table【最重要】テーブルを定義 tr【重要】table rowの略。テーブルの行を定義。 th【重要】table he ...

今回は、HTMLの勉強を始めた初心者に、画像を挿入するタグ「imgタグ（イメージタグ）」の基本的な使い方・作り方を説明していきます。       画像・イメージタグとはimgの基本的な使い方 imgタグ(<img>はImageの略)は、画像をWebブラウザ上に表示するHTMLタグの一つです。基本的な書き方は以下のとおり。   <img src="画像がある場所(相対パスまたは絶対パスで指定)" alt="画像の補足説明となるテキスト。日本語可能"& ...

今回は、初心者の方を対象にCSSの基本的な書き方・ルールを説明します。       なお、HTML・CSSはテキストなのでテキストエディターであればなんでも記述することはできますが、Visual Studio Code (以下VS Code)などの開発用エディターを利用するのが一般的です。VS Codeのインストール方法は「【VSCode】Visual Studio Codeのインストール・設定手順」をご参照ください。     CSSとはWebページの見た ...

要素に枠線を入れるにはborder:red solid 5pxのようにborderプロパティで枠線の色＋枠線の種類＋枠線の太さを指定します。 今回は、CSSの枠線borderの基本と注意点や角の丸さを設定するborder-radiusについて説明します。     枠線 borderで枠線を入れる方法 枠線 borderの基本的な使い方 borderは、要素に枠線を設定するCSSプロパティです。枠線の色、枠線の種類、そして枠線の太さと3つの値を指定して利用します。   関連CS ...

HTML要素の内側に余白をつけるには、padding:100px;のようにpaddingを指定します。 今回は、CSSの内部余白paddingタグの基本と注意点、外部余白marginとの違いを説明します。       内側余白 paddingタグの使い方 内側余白 paddingの基本 下記は内部余白paddingの一番シンプルな例、「padding:100px」と内部余白を指定した例です。   ■使用例 divタグの内部余白を100pxとる   ■表示例 ...

今回は、CSSの外部余白marginの基本的な書き方、およびmargin:autoを利用した要素の真ん中寄せの方法・text-align:centerとの違いを説明します。         外部余白marginの基本的な書き方 marginは、要素の外部余白(外側の余白)を調整するCSSです。margin:100px;のように設定すると、対象要素の対して100pxの外側余白をとってくれます。   ■使用例 divタグの外部余白を100pxとる <!D ...

フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。   フレックスボックスは、display:flexで実現でき、従来のfloatよりも柔軟なレイアウトを組むことができます。     フレックスボックス display:flexの使い方 フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。 display:flexを設定することで、 ...

今回は、CSSのtransitionプロパティを利用して、下記のように手軽にアニメーションを作成する方法を紹介します。         transitionの使い方 CSSのtransitionプロパティを利用すると、あるHTML要素の状態の変化をアニメーションとして動作させることができます。     3秒間で、右に伸びていって、色が水色からオレンジ色に変化します。カーソルを外すと(スマホの方は別のところにタッチすると)、元に戻っていきます。 & ...

divやaなどのHTML要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。   CSSでレイアウト装飾するためには上記の違いを理解している必要があります。ここでは、インライン要素・ブロックレベル要素の説明と要素のブロックレベル・インラインの表示形式を変更する際に利用するCSS「display」をについて説明していきます。       HTMLのブロックレベル要素とインライン要素の違い <div>や<a>などの ...

ここでは、HTML要素をpxや%で位置を調整できるCSSプロパティ「position」の使い方について説明します。       位置に関するスタイル position 基準位置を設定してから、要素をpxや%で配置する方法として「position」というスタイルがあります。 positionで配置方法を指定しつつ、位置指定のプロパティ「top(上)、bottom(下)、left(左)、right(右)」と合わせて要素の位置を指定することができます。   ■positi ...

今回はHTMLを勉強したい初心者向けにHTMLとはどのようなものか、実際によく使うHTMLタグの一覧を中心に紹介していきます。 HTMLの使い方を覚えてホームページやブログの作成・カスタマイズにぜひ役立ててください。     HTML・CSSはテキストなのでテキストエディターであればなんでも記述することはできますが、Visual Studio Code (以下VS Code)などの開発用エディターを利用するのが一般的です。VS Codeのインストール方法は「【VSCode】Visual ...

ここでは、HTMLフォームタグ「FORM」の使い方、およびフォームの部品となるINPUTタグ、SELECTタグ、TEXTAREAタグなどについて説明していきます。           フォームタグ form   「お問い合わせはこちら」などでよく見かけるフォームは<form>タグを利用します。   フォームタグの中には、フォーム部品（例. テキスト入力欄、ラジオボタンやドロップダウンメニュー、送信ボタンなど)を追加していきま ...

CSSでbackgroundプロパティを利用すれば背景色を設定したり、背景画像を設定することができます。 ここでは、CSSの背景プロパティbackgroundの使い方について紹介します。     よく使うbackgroundプロパティ ここで説明するbackgroundプロパティ一覧は下記の通りです。   カテゴリプロパティ意味 背景に関するスタイルbackground-color背景の色 background-image背景の画像 background-repeat背景の画 ...

PCやタブレット用のレイアウトとスマートフォン用のレイアウトをそれぞれ分けて画面表示しているホームページは多いと思います。   そこで今回はCSSのメディアクエリとViewPort(ビューポート)という機能を利用してレスポンシブデザインを作る方法についてご紹介します。         メディアクエリとViewPortを使ったレスポンシブデザイン CSSメディアクエリを使って横幅サイズで場合分けする PC用の画面とスマートフォン用の画面を切り替えたい人は多い ...

今回は、CSSのfloatを使った要素を横並びにする方法とfloatを解除するclearプロパティをご紹介します。             floatを利用して要素を横並びにする方法   floatを使った横並び <div>タグなどのブロックレベル要素は、基本的に上から下に向かって順番に縦に並んで表示されます。   ■縦に並ぶdivタグ(水色とピンク色)　     ■上記のソースコード < ...