HTML&CSS

イメージマップのリンク部分の青い線を消す

Chromeなどでイメージマップのリンク部分に青い線が表れます。 これを消すにはareaに対してCSSでclassなどを使用して以下の設定をします。

IE  >>続きを読む

floatとdisplay:inlineを一緒に設定する理由〜CSS

時々CSSでfloatとdisplay:inlineを同時に指定するコードを見ることがあります。 なぜ、floatして横並びにしているものをわざわざdisplay:inlineにして幅とか高さとか設定できなくなるのでは?  >>続きを読む

ul要素の構造〜余計な余白は誰?

ul要素とli要素はナビゲーション作成などで使用頻度の高い要素です。 リストは特殊な構造になっています。 ulとliは組み合わせて使用する必要があります。 特にulの直接の子供はliのみとなりますので、ulの入れ子状態で  >>続きを読む

doctypeの変更〜DreamweaverCC

XHTMLなどからHTML5にdoctypeを変更するにはDreamweaverの変換を使用すれば簡単にできる。 CCになってからその機能の場所が変わっていたのでメモ。 CS6の場合はメニューから「ファイル」→「変換」→  >>続きを読む

包含ブロックについて

包含ブロックとは ボックスモデルは次の図で表すことができます。 ボーダーを境界にしてマージンとパディングがあり、パディングの内側にコンテンツ(内容領域)が存在します。 これは例えると自分から見た地球のイメージです。 では  >>続きを読む

CSS ボックスモデルについて解説

ボックスモデルとは どの要素も四角い領域を生成します。この四角い領域を「ボックス」といいます。ボックスを作成する要素はブロックレベル要素に限りません。インライン要素もボックスを作成しますがその表示方法が少しブロック要素と  >>続きを読む

input 要素のサイズ指定

input要素でsize属性を使用した場合は、size属性の値は半角文字の文字数になります。 しかし、フォントの設定やブラウザの種類で表示文字数は思い通りになりません。 次のサンプルはsize属性とstyle属性、そして  >>続きを読む

z-indexの使い方〜詳説

z-indexは要素の重なり順を変更することができる便利なプロパティですが、思わぬところで落とし穴があります。 z-indexの値を変更しても重なり順を変更できずに困った経験がないでしょうか。その原因は正しい仕組みを理解  >>続きを読む

ページの高さを画面いっぱいにする

ページを画面いっぱいの高さにする方法です。 ポイントはCSSでhtml要素とbody要素をあらかじめ100%指定しておきます。 heightをパーセント指定するときは親要素のheight指定が必要になります。 次の例はp  >>続きを読む

HTML5とCSS3のIE8対策

制作課題の作品を夢中で作成しているとついつい自分のPC環境が標準になってしまいます。 自分がChromeだからChromeで表示されれば満足してしまいがちです。 これではIE対策を忘れてしまいす。IE8は2014年4月時  >>続きを読む

スマホサイト用のハンバーガーボタンナビ

スマホサイトのナビゲーションの例は新しい記事を書きましたのでそちらも参考にしてください。(2015/10/23) ハンバーガーボタンをクリックするとナビゲーションがアコーディオン状で展開されます。 jQueryを使用して  >>続きを読む

レイアウト例2

1ページのタブ型レイアウトです。 タブ型のナビゲーションでページ遷移するように見せていますが、各ページはすべて1ページ内のセクションを移動しているだけです。 この例はjQueryを使用します。 jQuery使用のポイント  >>続きを読む

レイアウト例1

1ページリニア構造ぺーじの例です。 ポートフォリオサイト用などにも活用できそうです。 *IE対策は別途必要になります。 1カラムのレイアウトのサンプル HTMLのコード [crayon-5880b7c2c3f186490  >>続きを読む

jQuery Mobileの使い方

準備 jQuery Mobileのページに行って必要なライブラリをダウンロードまたはリンクします。 リファレンス参考 data-role transition テーマ作成 作成 sample.html HTML5の準備を  >>続きを読む

flex レイアウト詳説〜Flex Box Layout

レイアウト作成のためのCSS CSS2.1 にて定義されているレイアウトモードは次の4つです。 文書を配置するために設計されたブロックレイアウト テキストを配置するために設計された行内レイアウト 表を作成するためのtab  >>続きを読む

Modernizrについて

Modernizrは、ブラウザーで使用可能な機能をCSSやJavaScriptを用いて確認できる便利なライブラリです。ユーザーが使用しているブラウザでHTML5の機能やCSS3を正しく使用できるか判定したclass名を付  >>続きを読む

widthをパーセント指定する場合の小数点〜CSS

2015/11/16追記 幅などの値に小数が出る場合は、IE旧バージョン以外ではcalc()を使用しましょう。 calc()についての詳細はこちらのページ スマートフォンサイトを作成する場合、幅などの指定を固定幅で指定す  >>続きを読む

ページの拡大率の指定〜スマホサイト

meta要素でのページ拡大率の設定 ビューポートの設定はmeta要素で指定することができます。「ビューポートとは」を参照。 meta要素で指定できるのはビューポートの横幅だけではありません。ページの拡大率を設定することも  >>続きを読む

高解像度デバイスの画像表示〜Retina対応

Retinaディスプレイをはじめとした高解像度のデバイスで画像表示をすると滲んで見える現象が起こります。 これはdensityにもとずいた解像度で表示するため拡大表示を行っているからです。 PCでも画像を単純に2倍の大き  >>続きを読む

background設定解説〜CSS3

backgroundプロパティ〜CSS3 複数の背景画像による多層化 CSS3 では、ボックスの背景は,複数の 層 ( layer )を持てます。複数の background-image の値は カンマで区切って区別しま  >>続きを読む

densityについて(device pixel radtio)

スマートフォンの表示画面のサイズの仕組み 画面の横幅の表示方法 PCのブラウザでWebページを表示する場合に横幅の寸法はピクセル数で表すことができます。 例えばwidth:980pxとすれば横幅は980pxとなります。   >>続きを読む

background設定解説〜CSS2.1

backgroundプロパティの基本 要素の背景には色または画像のいずれかを表示することができます。 ボックスモデルでのbackgroundプロパティは内容領域(コンテンツ)、パディング領域、に背景を設定することができま  >>続きを読む

Google Chromeの最小フォントサイズ

Google Chromeでは最小フォントサイズが10pxに設定されています。 10px以下でフォントサイズを指定してもすべて10pxで表示されます。 つまり、10px以下のフォントサイズを使用するとChrome以外のブ  >>続きを読む

ビューポートとは 〜HTML

ビューポートについて スマートフォンのブラウザではViewportという仮想ウインドウサイズが設定されています。 もう少しわかりやすい言葉で説明すると、スマートフォンの画面は本来の解像度で表示するのではなく、仮想の解像度  >>続きを読む

ノードの表示と非表示〜CSS

ある要素の表示と非表示の方法をまとめました。 visibilityプロパティ ボックスの表示(visible)と非表示(hidden)を指定するにはvisibilityプロパティを使用します。 visibilityプロパ  >>続きを読む

absoluteで複数の画像を重ねる

p要素の中に複数の画像をimgタグで挿入します。 通常なら横並びに画像が並ぶはずです。 ここでimg要素にposition : absoluteを設定します。 位置は特に指定をしません。 そうするとimgで挿入した画像が  >>続きを読む

nth-child(n)とnth-of-type(n)の違い〜CSS3

CSS3から追加されたn番目の子要素を指定できるnth-child(n)とnth-of-type(n)の違いです。 nth-child(n)は、ある親要素の全ての子要素の中のn番目の子要素を表します。 nth-of-ty  >>続きを読む

背景画像の拡大縮小〜background-size

background-sizeプロパティについて 背景画像をCSSで設定するにはbackground-imageプロパティを使用します。 CSS3のbackground-sizeプロパティは、背景画像の幅・高さを拡大・縮  >>続きを読む

CSS2.1のセレクタの復習

CSS2.1 セレクタ セレクタのパターンマッチ パターン 名称 例    h1,h2,h3 グループセレクタ セレクタをカンマ(,)で区切ってグループ化 * 全称セレクタ あらゆる要素にマッチする。 p タイプセレクタ  >>続きを読む

ネガティブマージン

ネガティブマージンは設定する方向で違った動きをします。 margin-leftとmargin-topはマージンを設定した要素がその方向へ動きます。 margin-rightとmargin-bottomの場合はマージンを設  >>続きを読む