CSSでボタンの表面(背景色)がグラデーションカラーのボタンを作成するコードを紹介します。グラデーションボタンボタンのキャプションが文字列のグラデーションボタンを作成します。コード以下のコードを記述します。button-gradient.c
ボタンの表面に画像アイコンを表示したボタンを作成します。概要ボタンの表面に画像アイコンを表示する場合はbuttonタグ内に画像を表示するコードを記述します。今回の実装では、displayをinline-blockに設定したspanタグを用い
CSSを用いてHTMLのボタンコントロールの外観を変更するコードを紹介します。コード以下のHTMLファイルを作成します。HTMLファイル<!DOCTYPE html><html xmlns="http://www.w3.o
CSSで画像に対してmin-heightプロパティを設定するとSafariで画像の縦横比が崩れる場合があります。原因IE等のブラウザでは画像の縦横比に合わせてmin-heightが調整されるため、min-heightが大きい数値(100%な
CSSでテキストが枠からはみ出す場合の処理方法を設定するコードを紹介します。概要テキストが枠からはみ出した場合の処理を設定する場合は overflow プロパティを用います。overflowは以下の値をとります。値意味visibleはみ出し
枠から文字がはみ出ないようにするためのCSSを紹介します。概要文字が枠からはみ出す際にはみ出した部分を非表示にする場合、スタイルシートでwhite-spaceとoverflowプロパティを設定します。white-space: nowrap;
枠から文字がはみ出す際に「…」で省略する方法を紹介します。概要文字が枠からはみ出す際に省略させる場合、スタイルでtext-overflow: ellipsis;を設定すると、末尾に"..."を付加してて文字列を省略表示できます。ただし、te
CSSで三角形のマークを表示するコードを紹介します。borderで表現する方法borderプロパティで表現する方法です。トリッキーなコードでもありますので、描画のロジックを含めて紹介します。コード以下のコードを記述します。CssMark.h
CSS,HTMLで複数階層を持つドロップダウンメニューを作成します。アニメーションなし版popupmenu05.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/
CSSで実装したポップアップメニューにアニメーション効果をつけるコードを紹介します。概要こちらの記事で作成したポップアップメニューにアニメーションを追加するコードを紹介します。コードpopupmenu04.css#menu { list-
スタイルシートを用いて文字や枠の表示位置を指定するコードを紹介します。概要表示位置はCSSのTop,Leftプロパティで指定できます。枠の大きさはwidth,heightプロパティで設定できます。Positionプロパティにより表示位置のモ
CSSで要素の描画順・表示順を指定するコードを紹介します。z-indexを指定しない場合sample00.css.box01{ background-color:#6dc448; width:128px; height:128px;
こちらの記事で紹介したドロップダウン型のメニューの余白を調整するコードを紹介します。コードHTMLファイル (popupmenu03.html)<!DOCTYPE html><html xmlns="http://www.
<a>タグはデフォルトでは文章中にタグを挿入した場合でも改行されずに文中にリンクを挿入できます。<span>タグも同様です。一方、<div>タグや<p>タグでは改行されて表示されます。この違い
デザインにこだわったWebサイトではWindows アプリのメニューのようなポップアップメニューが表示されるサイトがあります。この記事ではCSSを用いてポップアップメニューのUIを実現する方法を紹介します。シンプルなポップアップメニューシン
HTMLにてダイアログ風の画面を作成したい場合など、画面の中央にレイヤーを表示したいことがあります。この記事では絶対座標を指定してレイヤーを表示するコードを紹介します。コードScreenCenterLayer.css (HTMLファイル)&
Webページでダイアログ風のレイヤーを表示する際に、背景が暗くなったりする場合があります。ここではCSSを用いてWebページ全体にフェード効果を付ける方法を紹介します。概要画面全体を覆うレイヤーを表示します。レイヤーの透明度を設定することで
複数のパネルの折りたたみ動作がトグルで動作するパネルのコードと実行結果を紹介します。実装方針パネル部分をクリックすると、コンテンツの枠を表示する動作を実装します。表示の切り替えは、サブクラスを追加する方式を利用し、サブクラスが指定されていな
折りたたみの動作がアニメーションする折りたたみ可能パネルを作成します。コード以下のコードを記述します。CssExpandPanel.html<!DOCTYPE html><html xmlns="http://www.w3
クリックをトリガーにしたアニメーションのJavaScript,CSSのコードを紹介します。概要CSSでアニメーションするには、CSSの定義で "transition" プロパティを指定します。"transition" プロパティを指定すると
CSSのみを利用した折りたたみ可能なパネル(折りたたみ可能領域)を実現するコードを紹介します。概要InputタグのCheckBoxを利用して折りたたみ可能なパネルを実装します。チェックボックスのチェックがついている場合とついていない場合でパ
Checked疑似クラスを用いてチェックされている要素のスタイルを設定するコードを紹介します。例1コード以下のコードを記述します。CheckedSelector.html<!DOCTYPE html><html xmlns
JavaScriptを利用して要素のCSSスタイルを動的に変更するコードを紹介します。補足:CSSのクラスを書き換える場合CSSのクラスを動的に変更することでも、スタイルを変更できます。JavaScriptで要素のCSSクラスを書き換えるコ
スタイルシートでサブクラスを指定するコードを紹介します。概要スタイルシートでのクラスの記述をこちらの記事では紹介しましたが、クラスの数が増えてくると、クラスの管理が大変になります。また、同じクラス内でもデザインやスタイルを一部変えたい場合が
特定のクラスの特定のIDのスタイルを指定するコードを紹介します。書式.(クラス名)#(ID名){ (スタイル記述)}例下記のコードを記述します。ClassAndIdSelector.css.bluetext#main
指定したHTMLタグかつ、指定したIDが設定されているタグのスタイルを設定するコードを紹介します。概要特定のHTMLタグでIDが特定の値を持つタグに対して画面表示時のスタイルを設定したい場合があります。この記事では、HTMLタグで指定したI
指定したHTMLタグでかつ、指定したクラスが設定されているタグのスタイルを設定するコードを紹介します。概要特定のHTMLタグでクラスが設定されているタグに対して画面表示時のスタイルを設定したい場合があります。この記事では、HTMLタグで指定
スタイルシートでテーブルの列幅を変更する方法を紹介します。コード以下のコードを記述します。CssTableColumnWidth.css.wTable { border-collapse:collapse; border-spacing
すべての要素にスタイルを設定する場合の記述を紹介します。書式すべての要素を対象とする場合は"*"記号を用います。*{ (スタイル記述)}例コード下記のコードを記述します。AllSelector.css* { font
スタイルシートで隣接する要素に対してスタイルを設定するコードを紹介します。書式隣接する要素へスタイルを設定する場合"+"記号を用います。(要素1)+(要素2){ (スタイル記述)}例コード下記のコードを記述します。Co
要素の中にある直下の子要素に対してスタイルを設定するコードを紹介します。要素内の下位にある要素を選択するセレクタはこちらの記事を参照してください。概要要素の中にある特定の要素に対してスタイルを設定する場合には、「子セレクター (child
スタイルシートで複数の要素に対してスタイルを設定するコードを紹介します。概要複数の要素にスタイルを設定する場合は","で要素を区切ります。書式(要素1), (要素2), (要素3), ... (要素n){ (スタイル記述)}例コード下記の
特定の属性を持つ要素のスタイルを設定する特定の属性を持つ要素のスタイルを設定します。書式 (要素名) [(属性名)]{ (スタイル記述)}要素内に指定した属性が含まれていれば記述したスタイルが設定されます。特定の属性値
スタイルシートで要素の前後にコンテンツを挿入するコードを紹介します。要素の前にコンテンツを挿入する要素の前にコンテンツを挿入する場合は"before"疑似クラスを利用します。書式:before{ content:"(挿
スタイルシートで最初の文字のスタイルを設定するコードを紹介します。最初の文字のスタイル設定最初の文字のスタイルを設定する場合は"first-letter"疑似クラスを利用します。書式:first-letter{ (スタイル記述)}特定のタ
スタイルシートで最初の行のスタイルを設定するコードを紹介します。最初の行のスタイル設定最初の行のスタイルを設定する場合は"first-line"疑似クラスを利用します。書式:first-line{ (スタイル記述)}特
