スタイルシートを用いて特定の位置にある子要素のスタイルを設定するコードを紹介します。書式最初の位置の要素のスタイル設定最初の要素のスタイルを設定する場合は"first-child"疑似クラスを用います。最初の位置にある指定したタグに設定する
スタイルシートで特定の言語のスタイルを定義するコードを紹介します。書式特定の言語でのスタイルを指定する場合:lang((言語名)){ (スタイル記述)}と記述します。特定のタグで言語指定をする場合(タグ名):lang(
スタイルシートでフォーカスのあるコントロールや要素のスタイルを設定するコードを紹介します。書式:focus{ (スタイルの記述)}要素やクラスやIDを指定して記述する場合は以下の記述となります。特定のタグに関して設定する場合(タグ名):f
スタイルシートでリンクの色やスタイルを設定するコードを紹介します。書式リンクのスタイル設定a:link{ (リンクのスタイル)}訪問済みのリンクのスタイル設定a:visited{ (リンクのスタイ
特定のIDのスタイルをスタイルシートで設定するコードを紹介します。書式IDのスタイルを設定する場合は#(タグ名){ (スタイル記述)}と記載します。ID名の先頭に"#"を記述します。コード例IdSelect
特定のクラスのスタイルをスタイルシートで定義するコードを紹介します。書式クラスのスタイルを定義する場合は以下の記述をします。クラス名の先頭に"."を記述します。.(クラス名){ (スタイル記述)}メモ.(クラス名) .(クラス名) .(
特定のタグのスタイルをスタイルシートで定義するコードを紹介します。書式タグのスタイルを定義する場合は(タグ名){ (スタイル記述)}と記載します。(タグ名)に記述したタグのスタイルが中括弧内のスタイル定義で設定されます。コード下記のコード
スタイルシートにてwidthプロパティを設定し枠の幅を設定したにもかかわらず、文字がワードラップされず枠をはみ出してしまう現象と対策方法を紹介します。概要スタイルシートで枠の幅を設定し、枠内のコンテンツに文字列を配置します。通常の英文や日本
CSSでのサイズ指定で使える単位を紹介します。相対単位単位説明例em親要素のフォントの高さ("M"の高さを基準)を1とする単位font-size:2emex親要素の小文字の"x"のフォントサイズの高さを1とする単位font-size:3ex
領域の幅や高さをスタイルシートで設定するコードを紹介します。書式領域の幅の指定領域の幅を設定する場合はwidthプロパティーを用います。width:(サイズ)領域の高さの指定領域の高さを設定する場合はheightプロパティーを用います。he
スタイルシートで文字のフォントを変更するコードを紹介します。フォントを変更する場合はfont-familyプロパティを設定します。フォントファミリーのキーワードで指定する場合フォントファミリーを示すキーワードでフォントファミリーを指定できま
CSSでテキストをイタリック・斜体にするコードを紹介します。概要斜体やイタリックのフォントを表示する場合、font-styleプロパティを設定します。書式font-style: (スタイル値)設定できる値は以下になります。値 意味 nor
領域の境界線を描画するコードを紹介します。概要境界線を描画する場合は スタイルシートの border プロパティを用います。書式下記の書式となります。border:(スタイル) (枠線の太さ) (カラー);記述例 border:solid
CSSを用いてページや枠の背景色を変更するコードを紹介します。ページの背景色を変更するコードPageBackgroundColor.cssbody { background-color:#76cff1;}PageBackgroundCol
HTML,CSS, JavaScriptでの色指定の方法です。カラー指定表記カラーは以下の表記方法で指定できます。 表記方式 値の範囲 記述例 説明 #RGB 0～F #44F R,G,B の16進数の表記値でカラーを表現します
スタイルシートを用いてフォントの色(文字色)を変更する方法を紹介します。概要スタイルシートでフォントの色を変更するには、color プロパティに変更したいカラー値を設定します。書式color:(カラー値);カラー値の代表的な書式は以下が利用
Webブラウザが古くCSSの疑似クラスに対応していない場合は個々の要素にクラスを設定してスタイル設定をする必要があります。この記事では、個々の要素にクラスを設定しテーブルのタイルを変更するコードを紹介します。縞のテーブルを表示する1行ごとに
CSSを利用してテーブルの列のスタイルを変更するコードを紹介します。概要CSSを利用してテーブルの列のスタイルを変更する場合、CSS3の擬似クラスを利用することで、列のスタイルを変更できます。書式クラス名 tr td:nth-child(n
CSS3の擬似クラスを利用してヘッダのスタイルを変更するコードを紹介します。ヘッダのスタイルを変更するには、CSSでテーブルの先頭行(1行目)のスタイルを指定します。概要CSSでテーブルの特定の行のスタイルを指定する場合は、tr:nth-c
CSSを利用して、HTMLのテーブルで1行おきに背景色が違う縞のテーブルを作成するコードを紹介します。概要HTMLのテーブルで1行おきに背景色を変えるには、スタイルシートでCSSセレクタに :nth-child(odd) :nth-chil
CSSのセレクタをうまく利用すると簡単にテーブルにスタイルを設定できます。個々の要素にスタイルを設定する方法CSSファイル (Style.css).MyTable { border: 1px solid green;}.MyTableRo
スタイルシートを用いてフォントのサイズ、文字の大きさを変更する方法を紹介します。CSSでフォントサイズを指定する場合は"font-size"プロパティを用います。書式font-size:(フォントサイズ)フォントサイズは"数値+単位"または
ドロップシャドウのある枠をCSS/HTMLで作成するコードと表示結果を紹介します。補足この記事で紹介する方法はCSSのbox-shadow プロパティが利用できない古いWebブラウザでの表現方法です。新しいWebブラウザでは、CSSのbox
別ファイル(外部ファイル)のスタイルシートをHTMLファイルにリンクして、スタイルを利用する方法を紹介します。補足スタイルシートをHTMLファイル中に埋め込んで記述する方法はこちらの記事を参照して下さい。書式<head><
タグのstyle属性に直接スタイルを記述する方法を紹介します。書式タグにstyle属性を記述します。<タグ style="(スタイルの記述)"></タグ>例HTMLコード<!DOCTYPE html PUBLI
HTMLファイルにスタイルシートを埋め込む方法(埋め込み型のスタイルシート)を紹介します。補足スタイルシートを別ファイルにする方法はこちらの記事を参照して下さい。書式<head></head> タグ間に下記のコードブ
テキストボックスに文字が入力されている場合だけ、テキストボックスの中に消去ボタンを設置するコードを紹介します。概要こちらの記事でテキストボックスの中にクリアボタンを設置するコードを紹介しましたが、紹介したコードでは、消去ボタンが常に表示され
HTMLページのテキストボックスの中に消去ボタンを設置するコードを紹介します。概要テキストボックス内にボタンがあり、クリックすると入力されている文字がクリアされるテキストボックスがあります。この記事では、テキストボックス内に入力文字をクリア
画像を使って角の丸いテキストボックスを作成する方法を紹介します。補足CSSを利用し、背景画像を利用しない方法はこちらの記事を参照してください。画像の準備テキストボックスの画像を用意します。今回は下図の画像を用いました。横140px、縦40p
CSSのopacityプロパティーを設定すると文字や枠などのHTML要素の透明度を指定できます。書式opacity : (0から1.0までの値の透明度)0で完全に透明となり画面から見えなくなります。1.0に設定すると完全に不透明になります。
CSSで背景画像のサイズを指定してサイズ調整するコードを紹介します。概要background-imageプロパティで枠の背景画像を指定した場合、画像をどのようにタイリングするかを設定したい場合があります。background-sizeプロパ
background-imageで設定した背景画像の基準位置を変更するコードを紹介します。概要background-imageで設定した背景画像の基準位置を変更するには、background-originプロパティを利用します。書式back
CSSのbackground-imageで設定した背景の塗りつぶし範囲を変更するコードを紹介します。概要CSSのbackground-clipプロパティーを変更すると、背景の塗りつぶし範囲を変更できます。書式background-clip:
CSSで角の丸い枠を描画するコードと表示結果を紹介します。概要CSSを利用して領域の角を丸くする場合は、border-radius プロパティを利用します。書式border-radius:(左上の水平半径) (右上の水平半径) (右下の水平
DIVで段組みをしたにもかかわらず、高さが外側のボックスに反映されず、枠を突き抜けてしまう場合があります。（下図参照）この現象は、IE7では起きず、IE8,Firefoxで発生することが多いです。原因は多くの場合フッタ部分でclear:le
ネストされた ol ul li リストのインデント幅をそれぞれ変更する場合のCSS記述方法です。概要ULタグ内に記述されたULタグのインデントを変更する場合には、以下の記述によりスタイルを定義できます。 UL UL{同様にULタグ内のULタ
