テーブル(表)の行方向のみにセルの間隔をあける、または、列方向のみにセル間隔をあけるコードを紹介します。概要テーブルの行方向、列方向を指定してセルの間隔をあける場合は、border-collapse を separate に設定した状態で、
Webページで表示するためのアイコンWebフォントを作成する手順を紹介します。概要Webページでアイコンを表示するために、アイコンの図形のWebフォントを作成します。Webフォントを作成することで、アイコンを文字として扱え、フォントサイズや
CSSを利用して表のキャプションの表示位置を設定するコードを紹介します。概要tableタグによる表のキャプションはcaptionタグで設定できます。キャプションの表示位置は captionタグのalign属性に表示位置を設定することでキャプ
CSSでマージンやパディングを含めないビューポートの幅や高さの割合でオブジェクトのサイズを指定するコードを紹介します。概要CSSで%指定をすると、親要素の幅からマージンとパディング除いた、コンテンツ表示の有効な幅を100%として幅が設定され
CSSのcalc関数を利用について紹介します。概要CSSで枠の幅などを設定する際に、%での指定と、Pixelでの指定を組み合わせて設定したい場合があります。calc関数を利用することで単位の違う値を演算してCSSのプロパティに指定することが
Google Chrome と Internet Explorer でスタイル指定がない場合、テキストボックスのフォントが異なる現象について消化思惟します。現象の確認下図のHTMLファイルを準備します。<!DOCTYPE html&g
複数行のテキストボックス(textareaタグ)でフォントを指定しない場合、複数行テキストボックス(TextArea)で Google Chrome と Internet Explorer の英文字フォントが異なる現象について紹介します。現
CSSでOpenTypeのフォントで文字の間隔を詰めるコードを紹介します。概要HTMLページで、游ゴシックや游明朝のフォントを利用すると文字の間隔が開き、見た目がスカスカに見えます。スカスカな見栄えを防ぐため、游ゴシックや游明朝の文字間隔を
CSSメディアクエリで Microsoft Edge を指定するコードを紹介します。概要CSSで Microsoft Edge の場合に限り、スタイルを変更したい場合があります。ユーザーエージェントを判定してプログラムで出し分けすることもで
CSSのメディアクエリで、Internet Explorer 10, Internet Explorer 11 の場合を指定するコードを紹介します。概要CSSで Internet Explorer 10, Internet Explorer
Google Chrome で英数文字のフォントが太く表示される現象について紹介します。現象同じWebページをInternet ExplorerとGoogle Chrome で表示しているにもかかわらず、Google Chromeのほうが英
Google Chrome の複数行テキストボックスでInternet Explorerに比べて行間が狭い現象について紹介します。現象の確認下図のHTMLファイルを作成します。<!DOCTYPE html><html>
CSSのmarginプロパティのマージン相殺の動作を紹介します。概要CSSでmarginプロパティに値を設定したにもかかわらず、設定した余白が開かない場合があります。これは、CSSのマージンの相殺の仕様によるものです。この記事では、マージン
CSSを利用して、領域の内側に余白を取るコードを紹介します。概要領域の内側に余白を取る場合は、padding プロパティを利用します。上下左右のマージンを個別に設定する場合は、padding-left, padding-top, paddi
CSSを利用して、領域の外側に余白を取るコードを紹介します。概要領域の外側に余白を取る場合は、margin プロパティを利用します。上下左右のマージンを個別に設定する場合は、margin-left, margin-top, margin-r
CSSスタイルシート中の . # + > 記号の意味を紹介します。記号 意味 . クラス名を選択するセレクターの記号です。クラスを指定したセレクターの詳細はこちらの記事を参照してください。 # IDを選択するセレクターの記号です
HTMLで段落の先頭行をインデントするコードを紹介します。概要段落を字下げするには、スタイルシートの "text-indent" を利用します。書式text-indent : (インデント幅)記述例p {text-indent:1em;}コ
CSSを利用して、透明度が変化するアニメーションを実装します。フェードイン、フェードアウトの効果が得られます。概要CSSで透明度が変化するアニメーションを実装するには、transition プロパティを利用します。transitionプロパ
ブロック要素に影をつけるコードと表示結果を紹介します。概要ブロック要素に影を付ける場合は、box-shadow プロパティを利用します。書式box-shadow の書式は以下です。box-shadow: (横方向の距離) (縦方向の距離)
CSSを利用して影付き文字を表示するコードを紹介します。概要CSSで影付き文字を表示するには text-shadow を利用します。書式text-shadow : (x方向の距離) (y方向の距離) (ぼかしのサイズ) (影の色);カンマで
Float プロパティによる段組みの解除に関するコードを紹介します。概要CSSによるfloat解除のコードを紹介します。float解除の方法にはいくつか方法がありますが、この記事ではオーソドックスなblock要素でclearスタイルを指定し
Webフォントを利用するコードを紹介します。Webフォントの準備 - woff形式への変換woffフォントが無い場合は、フォントファイルをwoff形式に変換します。今回はhttp://www.fontconverter.org/を利用して、
ページのテキストのフォントに 游ゴシック 游明朝 を利用するコードを紹介します。游ゴシック、游明朝とはWindows 8.1で新たにデフォルトでインストールされるフォントです。字の大きさがやや小さめで、字間が広めになる特徴があります。補足：
Floatプロパティを利用したCSSによる2列段組みについて紹介します。オーソドックスな実装float:left を用いて段組みする方法です。オーソドックスな実装です。コードLRColumnSimple.html<!DOCTYPE h
CSSを利用して、行間を広くする。行の高さを指定するコードを紹介します。概要行間を変更するには、行の高さを明示的に指定します。行の高さはCSSのline-heightプロパティで指定できます。コード:絶対値を指定する場合以下のコードを記述し
印刷時にCSSを利用して、画面のデザインやスタイルを変更するコードを紹介します。概要印刷時にスタイルを変更するには、htmlファイルでスタイルシートのリンクをするlinkタグでmedia属性を指定するか、CSSファイル中でメディアクエリを利
ウィンドウ幅に応じて枠の表示、非表示を切り替えるコードを紹介します。概要CSSのメディアクエリを利用すると、Webブラウザのウィンドウ幅に応じて、枠の表示や非表示を切り替えられます。この記事では、CSSのメディアクエリを利用してWebブラウ
CSSメディアクエリー(CSS Media Query)を利用してスPCで表示した場合には枠が表示され、スマートフォンでページを閲覧した際には枠が非表示になるコードを紹介します。概要CSSメディアクエリーを利用し、Webブラウザの横幅が狭い
CSSで高さのあるテーブルセルでのテキストの縦方向の表示位置を指定するコードを紹介します。概要テービルセルでの縦方向の表示位置を指定するには、vertical-alignスタイルを利用します。コード下記のコードを記述します。TableTex
Tableタグを利用せずに、スタイルシートで表を作成するコードを紹介します。1行のテーブルを表示する場合1行のテーブルを表示する場合のコードを紹介します。コード以下のHTMLファイルを作成します。SimpleTable.html <!
レスポンシブページで、複数のDIV枠などのブロック要素を中心で折り返すコードを紹介します。動作の確認 (通常のfloat:left)下記のコードを記述します。ResponsiveFrameLeft.html<!DOCTYPE html
CSSでwidthを100%指定しても 横スクロールバーが表示されるとスクロール分の長さだけ幅が足りなくなる現象について対策を紹介します。現象の確認以下のコードを作成します。index.html<!DOCTYPE html>&l
要素の領域は確保しつつ、表示内容のみを非表示にしたい場合があります。この記事ではCSSで表示内容のみを非表示にする方法を紹介します。概要表示領域を確保しつつ、要素を非表示にするには、CSSのvisibility プロパティを利用します。メモ
概要HTMLタグではTableのセル内の余白は、tableタグの属性値として cellpadding="(間隔)" を指定します。同様の処理をCSSで表現する場合のコードを紹介します。書式Tableのセル内部の余白をCSSで指定する場合は、
現象CSSのvisibilityプロパティで hiddenに設定しても、表示内容は消えますが、表示領域はそのまま残り、間が空いてしまうことがあります。原因visibilityプロパティでは、表示の切り替えはできますが、表示領域は確保されるた
CSSで要素を非表示にする場合のコードを紹介します。概要CSSを用いて要素を非表示にする場合は、display プロパティを利用します。display プロパティの値を none に設定します。メモ要素の領域を確保したまま、内容のみを非表示
