HTML

CSS

【HTML・CSS】3カラムレイアウトのwebページのつくり方

この記事では、3列で構成されたレイアウトのwebページを、HTMLとCSSでつくる方法について説明します。 つぎの画像は、3カラムレイアウトで構成されたwebページの例です。 3つのカラムが色分けされて、左側と右側で並べています。 ...
CSS

【HTML・CSS】2カラムレイアウトのwebページのつくり方

この記事では、2列で構成されたレイアウトのwebページを、HTMLとCSSでつくる方法について説明します。 つぎの画像は、2カラムレイアウトで構成されたwebページの例です。 2つのカラムが色分けされて、左側と右側で並べています。 ...
HTML

【HTML】margin-left:autoでdivのようなブロック要素を右寄せにする

次のようにdivのようなブロック要素が3つ横に並んでいるときに、そのうちの1つだけを右に寄せたいとします。 See the Pen margin-left: autoで要素を右寄せにする part1 by aiiro (@ai...
CSS

【HTML・CSS】CSSでボタンをクリックしたときの枠線を消す方法

デフォルトのHTMLのボタンは、次の図のように、クリック時にボタンに枠線が表示されるようになっています。 この記事では上記のような、ボタンをクリックしたときに表示される枠線をCSSで消す方法を説明します。 ボタンの周囲に表示される枠...
CSS

【HTML・CSS】角が丸い枠(角丸)のボタンのつくりかた

はじめに 本記事ではHTMLとCSSを使った角丸ボタンの作り方を説明します。 角丸ボタンのつくり方 以降では角丸ボタンを作成する方法を順を追って説明します。 最初に角を丸くする前のベースとなるボタンを作成し、すべての角を丸くしたボタ...
GitHub

HTMLのheadタグに何を書くかをまとめたjoshbuchea/HEAD

はじめに この記事ではHTMLのheadタグに書く内容をまとめて、GitHubで公開しているjoshbuchea/HEADというリポジトリを紹介します。 内容 HTMLのheadタグにはmeta, link, title, s...
CSS

【HTML・CSS】ドロップダウンメニューの作り方

この記事では、JavaScriptを使わず、HTMLとCSSだけでドロップダウンメニューを作る方法を解説します。 ドロップダウンメニューを作るには、ドロップダウンで表示するメニューの要素のdisplay属性を切り替えてメニューを表示したり...
CSS

【HTML&CSS】パンくずリストの作り方を順を追って解説

この記事では「HTMLとCSSでパンくずリストを作る方法」について、1つずつ順を追って解説します。 パンくずリストのリンクを作成する まずはパンくずリストで表示するリンクを用意します。 <div class="bread"&gt...