ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

HTMLとCSS

HTMLとCSSで困っている人のために情報を発信します。

HTMLはウェブサイトの構造化文書を定義し、CSSはその文書のスタイルを定義します。

どちらもプログラミングでないことに注意。(あくまで文書のフォーマット)

かんたんCSS3 vw, vh, vmin, vmax, 端末サイズ単位の使い方

css3 image

CSS3からvw, vh, vmin, vmaxが追加されました。

新しい相対値(倍率)指定ですが、%との違いが分からない人もいると思います。

また、どこで使うのか分からない人のために、ソースコードのサンプルを入れながら、かんたんに分かりやすく説明します。

続きを読む

かんたんCSS em, rem, フォントサイズ単位の使い方

css3 image

CSSのサイズ指定でよく使われるのは、px, %, em, remです。CSS3からem, remが追加されました。

まだ、em, remとpx, %の違い、どこで使うのか分からない人のために、ソースコードのサンプルを入れながら、かんたんに分かりやすく説明します。

続きを読む

かんたんCSS margin, padding, 余白の設定とボーダーとの関係

css3 image

HTMLのコンテンツに余白を入れる方法です。作業はすべてCSSで行います。

余白は2種類あり役割が違います。それが分かると、余白はとてもかんたんです。

また、ボーダー(枠線)と関係しています。それも合わせてソースコードのサンプルで誰でも分かるように説明します。

続きを読む

初心者でも分かる解説。HTMLってなんだ? HTML5とは?

html5 image

HTMLの超入門編です。初心者にも分かりやすく、専門用語を使わずに解説します。

HTMLは、CSS, JavaScriptと並んで、Webサイト作成にはなくてはならない技術です。

これを読めば、HTMLの役割、HTML5の『5』の意味も分かります。

『いまさら見直すのは恥ずかしい』という人にもオススメです

続きを読む

初心者でも分かる解説。CSS(スタイルシート)ってなんだ? CSS3とは?

css3 image

CSSの超入門編です。初心者にも分かりやすく、専門用語を使わずに解説します。

CSSは、HTML, JavaScriptと並んで、Webサイト作成にはなくてはならない技術です。

これを読めば、CSSの役割、CSS3の『3』の意味も分かります。

『いまさら見直すのは恥ずかしい』という人にもオススメです。

続きを読む

CSS position, absoluteとrelativeの違いがページを大きく崩す

css3 image

Webコンテンツの位置を変更するため、CSSでは必ず使うpositionプロパティ。

しかし、absoluteとrelativeを『絶対・相対位置を指定する』という知識だけだと、ページの表示内容を大きく崩すことがあります。

それを防ぐためにpositionプロパティの元々もっている挙動についてご紹介します。

続きを読む