HTML/CSS– category –
-
【HTML】labelタグの使い方
本記事では、HTMLのlabelタグの使い方について解説しています。labelタグを使えるようになると、ユーザーが操作しやすいフォームを作成することが出来るようになります。 【labelタグを使用する理由】 <input>を使う時にセットで使用される<label... -
【HTML】テーブル表のセルを垂直方向・水平方向に結合する方法
本記事では、HTMLのテーブル表のセルを垂直方向・水平方向に結合する方法について解説しています。 【サンプルコード】 以降の解説では、下記のサンプルコードを使用しています。自分のパソコンで記述しながら表示確認をしたい人はコピーしてお使いくださ... -
【HTML】テーブル表の作り方
本記事では、HTMLでテーブル表を作成する時に使用する<table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>タグの使い方について解説しています。 【テーブル表の作り方】 まず始めに今回作成するテーブル表を確認しましょう。 完... -
【HTML】上付き文字と下付き文字を表示させる方法(sup,sub)
本記事では、上付き文字と下付き文字を表示させる方法について解説しています。この方法を知ることで、position:relativeやabsoluteを使用して位置を上下にずらす必要がなくなるので、コードの記述量が少なくなります。 【上付き文字(supタグ)】 上付き文... -
【HTML】コメントアウトの書き方
本記事では、HTMLで何かコメントやメモを残したい！という時に使えるコメントアウトの書き方について解説しています。 【HTMLのコメントアウトの書き方】 HTMLのコメントアウトの書き方は少し特殊で、以下のように記述します。 <!-- コメントアウト --&... -
【HTML】aタグで設定したURLを別ページで開く方法
本記事では、aタグで設定したURLを別ページで開く方法について解説しています。自社内のページから外部のページに遷移させる時などに、このテクニックはよく使用されるので使い方を覚えておきましょう！ 【URLを別ページで開く】 aタグで設定したURLは、デ... -
【HTML】テキストを箇条書きにする方法(ul,ol,li)
本記事では、HTMLで表示させているテキストを箇条書きにすることができる、ulタグ・olタグ・liタグの使い方と違いについて解説しています。 【ドットの箇条書き(ulタグ)】 テキストの先頭にドットが付いている箇条書きリストを作成したい場合は、ulタグを... -
【CSS】position:absoluteを背面・後ろに持ってくる方法
本記事では、CSSのposition:absoluteを背面・後ろに持ってくる方法について解説しています。 【position:absoluteを背面に設定する】 position:absoluteはデフォルト設定で、position:relativeを設定している親要素よりも前面に表示されます。 <p>サ... -
【CSS】文字の左右に線を付ける方法
本記事では、CSSで文字の左右に線を付ける方法について解説しています。見出しなどに使うとおしゃれなページに仕上がります。 【文字の左右に線を付ける】 完成形は以下のとおりです。 See the Pen Untitled by WEBエンジニア Wiki (@WEB-Wiki) on CodePen... -
【CSS】要素を透明・半透明にする方法(opacity)
本記事では、CSSで要素を透明・半透明にする方法について解説しています。 【要素を透明・半透明にする】 要素を透明・半透明にするにはopacityプロパティを使用します。 opacity: 0~1; opacityプロパティに設定できる値は0〜1の数値です。0は完全なる透明...
