0から目指すWebマスター Web制作に関する備忘録
検索

マークアップ

マークアップに関する記事は、149件あります。

HTMLやCSS、JavaScript、PHPなど様々な言語やライブラリに関する備忘録です。

objectの中身(キーと値)があるか判別する

Object.keys 配列の場合 var a = ["ジョン", "ポール", "ジョージ", "リンゴ"]; a.length; // ・・・

JavaScript

Webフォント Noto Sans

PSDやAIファイルで太さを指定したフォントは、Webでは異なる太さを指定したほうがいい場合があります。 今回は、Noto Sansの3種類のウェイトで調べてみ・・・

html

inputのfocus時にplaceholderの値を非表示にする

inputのplaceholder(プレースホルダー)のテキスト色を変更するでご紹介した内容を踏まえて、修正するだけ。 focus時にplaceholder(・・・

CSS

inputのplaceholder(プレースホルダー)のテキスト色を変更する

いろいろ調べると、疑似クラス「:placeholder」と「:placeholder-shown」というのにいきつく。 ちょっとハマってしまったので備忘録。ハマ・・・

CSS

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・

JavaScript

配列のコピー

配列のコピー。また同じ過ちをしてしまったので、備忘録 とりあえず実例 var a = 1; var b = a; a = 300; この結果、b は ・・・

JavaScript

オブジェクト(object)の中身があるか判別する → Object.keys().length

サンプル a = {}; b = { "b1": "value of b1", "b2": "value of b2", "b3": "value of ・・・

JavaScript

文字列を読み上げる → Web Speech API / Speech Synthesis API

まずはこれ。 // 読み上げます var speech = new SpeechSynthesisUtterance(); 基本セット // 読み・・・

JavaScript

配列から値で判別して要素を削除する

配列の「値」で判別して要素を削除する場合、 spliceメソッドやsliceメソッドでは「値」ではなく「何番目」かでの処理をするためできない。shiftメソッド・・・

JavaScript

配列をランダムシャッフルする

ググってよく見かけたのは、Fisher-Yates shuffleというアルゴリズムを利用するもの。ソースのサンプルもほとんどが同じ。 function s・・・

JavaScript

日本測地系←→世界測地系 変換

「日本測地 世界測地 変換」でググってみると、変換する計算式はいろいろあることが分かったが、Google Mapsで使われている(た?)というコードをベースに備・・・

php

日本測地系←→世界測地系 変換

「日本測地 世界測地 変換」でググってみると、変換する計算式はいろいろあることが分かったが、Google Mapsで使われている(た?)というコードをベースに備・・・

JavaScript

スクロール移動後や画面リサイズ後に処理をする

onscroll や onresize を利用すれば、スクロール時や画面リサイズ時の処理はできるが、スクロールが止まったときや画面リサイズした後にアクションした・・・

JavaScript

2点間の距離を取得する

「2点間 距離 取得 javascript」でググるとそのまま利用できる記事がたくさん見つかる。 いろいろ試したが、どれも数メートルの誤差はあるものの、似通った・・・

JavaScript

実機のシミュレータ実行しようとしたら、突然エラー → App削除!

The maximum number of apps for free development profiles has been reached. 実機のシ・・・

Swift

SNSボタンをリンクで設置する

プラグインやらを使えばいいのだろうけど、わざわざプラグインを使わなくても「共有用にリンクだけ設置したい」ということがよくあります。 そのたびにググッて調べてい・・・

php

touchendがAndroidで効かない?!

数年前にも同じことでハマってしまったのに、同じ過ちを繰り返してしまったので備忘録。 今回の調査端末は、SC-04F(Android 5.0)と iPhone 6・・・

JavaScript

日本語が使える環境かPHPで判別する

ターゲットユーザーが外国人を含む場合、日本語が使える環境がないかもしれません。そこで、日本語が使える環境か判別したり、第一優先言語が日本語か判別してみた。$_S・・・

php

連想配列(オブジェクトの値)の並び替え

たとえば下記のような配列(sample)で、配列に格納したオブジェクトの指定したキー(b)の値で並び替えたいとき。また配列(sample2)で、配列に格納した配・・・

JavaScript

dateで日時取得したら日本時間じゃない場合

dataで日時取得した際に、9時間の時差が出て、日本時間と異なっていた場合 2通りのやり方を備忘録。 php.iniを修正する場合 php.iniのdate.・・・

php

History API を「あらためて」使ってみる

以前、「History API を使ってみる」という記事を書いた。読み返したら非常に分かりにくかったため、History API の使い方をあらためて調べたので・・・

JavaScript

iframeの高さを自動調整する

iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ ・・・

JavaScript

JavaScriptで補色や反転色、RGBを取得する

#と6桁(もしくは3桁)の英数字(正確には16進数で表記される0から9、aからfの英数字)からなるカラーを、RGBでの数値に変換、もしくはRGBから16進数に変・・・

JavaScript

パラメータ値が数字かどうか判別する

http://allinthemind.biz/search.html?p=xxxx たとえば、こんなURLがあって、pの値が数字かどうか判別したいとき。 ・・・

php

jQueryでformを操る【nameの値を取得する】

form周り、これまでは要素を特定してループさせやすいようにidやclassを付与して、JavaScriptが結構な行数を使って面倒だったけど、jQueryを使・・・

JavaScript

html5から見送りになりそうなタグ(2012年12月17日付け)

html5をはじめからウォッチしてきたから、この辺りは確実に把握しておきたい。 下記は仕様から削除されるリスクがあるものたち。 動向が明確になるまで、個人的に、・・・

html

スマホでイベントをちゃんと認識するか確認

端末によって画面両サイドのエリアのリンクが認識しづらい現象が発覚。 クリッカブル領域を広げてみたが改善されなかった。 そこでサンプルページを用意し、スマホで調査・・・

JavaScript

Geolocation API

スマホやタブレットの普及で、現在地を取得するような位置サービスの需要が多くなるのは用意に想像がつく。 そこで、WebブラウザでJavaScriptを使って現在地・・・

JavaScript

History API を使ってみる

この記事を、下記ページに焼き直しました。 「History API を「あらためて」使ってみる」 2015.7.21 History API を使ってみた・・・

JavaScript

文字数を知る(javascriptでいうところのlength)→ mb_strlen

ちょっとハマってしまったので備忘録。 javascriptの「length」に相当する、文字列の長さを得るphpの関数に「strlen」「mb_strlen」が・・・

php

[連想配列]2つ以上のキーで並び替えをする

2つ以上のキーで連想配列を並び替えしたいときの備忘録。 サンプル配列 var arr = []; arr.push(["5", "4", "たちつてと",・・・

JavaScript

画面が縦向きか横向きかを知る

ブラウザ、モバイルファースト、メディアクエリー、マルチ画面、タブレット・・・ 想定すべき画面サイズ、利用シーンに適した情報のコントロールが崩壊しつつある。 とい・・・

JavaScript

Lightbox 2 を使うための最小設定

ライトボックスをお手軽に実装できるためのライブラリは「lightbox」で検索してみると分かるとおりサイト上にたくさんあって、大変ありがたい。 その中で個人的に・・・

ライブラリ

継承(擬似クラス型)

継承(擬似クラス型)のサンプルの一つとして、コードを理解しやすいようにもっともミニマムなカタチで、シンプルに用意してみた。 var Test = funct・・・

JavaScript

マルチカラムをCSS3で実装

CSS3で利用できるマルチカラムについて再確認。 カラムサンプル カラム 幅を指定 column-width: 150px; columns: 150p・・・

CSS

文字列をオブジェクトに変換

文字列をオブジェクトにしたいシチュエーションができてしまい、ajaxでcallbackすればいいのかな?とか、JSON.parseでいけるかな?とかいろいろ試し・・・

JavaScript

スマホでマウスオーバー

スマートフォン(以下スマホ)やタブレットでPCでいうところのマウスオーバー処理をしたいときは、touchイベントを使うことで実現できる。 確かAndroid1.・・・

JavaScript

localStorageでオブジェクトを格納する

localStorageは、近頃のブラウザやスマホで対応しているのでチョー便利。 そして文字列ではなく、オブジェクトを格納しようとするたびに、その方法を検索しち・・・

JavaScript

デバイス別、クロスブラウザ別対応 - not useragent

もはや他ブラウザでも問題ないようにクロスブラザ対応だけでなく、スマートフォンやタブレット端末などマルチデバイスに対応できるようになっておかなければ、という時代に・・・

JavaScript

html5の要素とコンテンツモデル

html5の要素を調べたことがあれば、下図のようなものを見たことがあるかもしれない。 これは、W3C Editor's Draftを参考に、自分なりかみ砕いたも・・・

html

スマホでアドレスバーを非表示にする

<!DOCTYPE html> <html lang="ja"> <head> <meta ch・・・

JavaScript

スマートフォン用に最適化したサイトを作る際の<実践>最小マークアップ

<!DOCTYPE html> <html lang="ja"> <head> <meta ch・・・

html

offsetTopやらoffsetHeightやら

コンテンツの高さだったり、ページ内の指定した要素を表示するようスクロールさせようとした際とか、毎回同じことをネット検索してしまうので、ここで高さを取得する方法に・・・

JavaScript

ファイル名を拡張子なしで取得するサンプル

変数bnにhtmlファイルのファイル名を拡張子なしで取得するサンプル var bn = location.href.split("/"); bn = bn[b・・・

JavaScript

ファイル名を拡張子なしで取得するサンプル

変数bnにphpファイルのファイル名を拡張子なしで取得するサンプル $bn = basename($_SERVER['PHP_SELF'], ".php");・・・

php

スクロールバーのカスタマイズ

サンプル スクロールバーは、基本ブラウザが用意してるのを使えばいい、という考えでした。そのため、スクロールバーのデザインをカスタマイズしたいと思ったとき、「いや・・・

JavaScript

html5でマークアップするときの最小設定

1ファイルにまとめると <!DOCTYPE html> <html lang="ja"> <head>・・・

html

Javascriptでカレンダーを作ってみた

ポイントは、「その年月のカレンダーのその日は第何週なのか、第何曜日なのか、何日なのか」をJavaScriptで生成し、祝祭日はCSSで指定していること。 サンプ・・・

JavaScript

borderで背景画像を表示する border-image

border-imageは、一枚の画像で9スライスのデザインが実現できちゃうという優れもの。 残念ながらIE8以下で適用できず、実際にはまだ使えないかなーという・・・

CSS

text-shadowを極める

text-shadowプロパティは、その名から想像するとおり、テキストに影をつける(ドロップシャドウ)ことができます。 仕様 text-shadow:右方向 下・・・

CSS

box-shadowを極める

box-shadowプロパティは、その名から想像するとおり、ボックスエリアに影をつける(ドロップシャドウ)ことができます。 仕様 外側にドロップシャドウ bo・・・

CSS

スマートフォンでも使えるフォトスライド

フォトスライド。 確かに様々な優秀なライブラリがすでにある。 jQueryを使ったもの(たとえば、30 Best jQuery Photo Pluginsで紹介・・・

ライブラリ

背景画像の拡大・縮小 → background-size !

W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加されて・・・

CSS

IEでhtml5のタグを認識させるJavaScript

IEでは、html5で追加されたタグを使用しても認識してくれません。 そのため、html5でマークアップしたIEでは「CSSが効かない!」とか「レイアウトが崩れ・・・

JavaScript

jQuery Mobileを使ったページ遷移時のトランジション

jQuery Mobileを導入するだけで、同ドメイン内の他ページやページ内リンクを使ってページ遷移するときに右から左へスライドします。デフォルトは「右から左へ・・・

JavaScript

jQuery Mobileを使った最小ソース

jQurey Mobile。まもなくβ版がリリースされるそうですが、現状のα版3を見てみました。 最低限必要なソースまで削り落として、ちょっとjQuery M・・・

JavaScript

ページ切り替え時のトランジション効果

スマートフォンが普及し、タッチパネルによるページ切り替えが新たなUIとして浸透してきました。 たとえば、指で横にしゅっとやると画面は右から左にスライドされ、ナビ・・・

html

Amazon Product Advertising API(署名入り)をアフィリエイトとして使う

AmazonのProduct Advertising APIをアフィリエイトとして使おうと試みて、その概要をつかむまで2,3日かかってしまった。まず、アカウン・・・

php

携帯サイトのターゲット端末

スマートフォンが普及していく様を横目に、携帯サイトに対応しなくてはいけないシーンはまだまだある。 とはいえ、どの端末をターゲットにすればよいか悩みどころだったの・・・

mobile

floatとvertical-align? → display:table-cell; !

上図のように、2カラムレイアウトにおいて、左右のコンテンツ長さが任意で、短い方のカラムの縦位置を長い方のカラムのセンタリングする場合、どうしましょうって話。何・・・

CSS

html拡張子でありながらphpを動作させる

もっとはやくに気づいていたかった・・・。 環境としては、レンタルサーバーhetemlを使用してMovablTypeをインストールしています。 http://he・・・

php

maxlengthで指定されたテキストのlength

inputタグ要素の属性、maxlengthが指定されたテキストの文字数について、ちょっと調べてみた。 調査ポイントは2つ。半角英数と全角でmaxlength値・・・

JavaScript

maxlength属性

inputタグ要素の属性、maxlengthについて、ちょっと調べてみた。 調査ポイントは2つ。半角英数と全角でmaxlength値のカウント方法が異なるか?文・・・

html

JSONP Javascriptがちょっと分かってきた人のために

いまどき「マッシュアップ」という言葉を使うこと自体ちょっぴり恥ずかしいのですが、外部APIを連携する際のお覚書き。 これまで外部APIの連携は、「php」と「A・・・

JavaScript

Ajaxに挑戦!

Ajax、Asynchoronous JavaScript + XMLの略。非同期通信を行ってJavascriptからXMLデータやテキストデータを取得し、その・・・

JavaScript

表示オブジェクト

表示オブジェクト オーサリング時に作成できるオブジェクトオブジェクト ボタンインスタンス ムービークリップインスタンス テキストフィールド ダイナミック・・・

ActionScript3

イベント処理

イベント処理 イベント処理の基本書式は下記 オブジェクト.addEventListener(イベント,イベントハンドラ関数名); function イベントハ・・・

ActionScript3

フォーム、送信前にJavascriptで入力チェックを行う方法

通常、送信ボタンが押されるとformのactionが実行されますが、formタグに「onsubmit」、もしくは外部化したJavascript内であれば「sub・・・

JavaScript

selectタグの上にコンテンツを乗せる

selectタグの上にコンテンツを乗せる手法。いろいろネット検索したものを総まとめした「覚書」。 これを参考に応用すると、うまくいく。ただW3Cに準拠していない・・・

html

RSS2.0 フォーマット

<?xml version="1.0" encoding="UTF-8"?> <rss versio・・・

xml

よく使われるタグ要素(マークアップの基本)

意味づけされたマークアップをすることは、 将来性の高いコーディングスキルを身につけると同様の価値があると思うのです。 それが、アマチュアとプロとの違いでもあると・・・

html

DOMでswfファイルを呼び出す際の注意

swfファイルをhtmlファイルで指定する際、従来はobjectタグとembedタグをダブルに記述していたが、embedタグはxhtml1.0から非推奨タグとさ・・・

JavaScript

適用されるCSS [CSS初心者向け]

「CSSは記述しているのに適用されない」という質問が多々あるので、あらためて基本をざっくり。 CSSを指定する方法として、大きく分けて2通りの考えをマスターする・・・

CSS

JavaScriptでIEかどうかの判別

Javascriptでブラウザ判別するのはともかく嫌いで、どうにかこれまで避けてきたのだけど。 どうしてもIEかそれ以外の判別をしなければならないシチュエーショ・・・

JavaScript

Javascriptでflash playerのバージョン判別

swfファイルをブラウザ上に表示するために、flash playerの有無やバージョンの判別をする最も普及しているといっても過言ではないライブラリ「swfobj・・・

JavaScript

ブラウザ表示領域の上部(ヘッダー)と下部(フッター)を固定する

コンテンツの量に関わらず、スクロールしても、ヘッダーとフッターは常にブラウザ上に表示されるようにする。 ポイント htmlとbodyに高さ100%を指定する ・・・

CSS

inputタグをコントロールする

inputタグの文字間を上手にコントロールする術を模索している。 百聞は一見にしかず、ということでサンプルを見てほしい。 xhtml <ul> ・・・

html

IE7の拡大機能、仕様?バグ?

IE7でブラウザの右下にある数値を変えて拡大してみる。見事にレイアウトが崩れる場合がある。 IE7の拡大時のレンダリングは、Operaと同じように、bodyその・・・

CSS

xsltとは?

xsltスタイルシートの立ち位置 xml文書とxsltスタイルシートを、xsltプロセッサを通して、別の構造や形式のデータに変換する。 xsltの記述 xslt・・・

xslt

Javascriptの歴史

JavaScript InternetExplorer Netscape 特徴 JavaScript1.0 IE3.0 N2 基本的なオブジェクト・・・

JavaScript

動作確認

実際に、簡単なサンプルを用いて、xml文書がどのように変化するのか見てみます。 sample.xml <?xml version="1.0" enc・・・

xslt

名前空間

xml文書は別のxml文書と結合することができる。結合した際に同じ要素名があるときの不具合を、名前空間を使用して回避できる。 記述方法 <プリフィックス:・・・

xml

DOMトラブル:getAttribute('class')

記述は間違いない(はずな)のに、ブラウザによって思うように動作しないことがある。 実際にどのようなことがあったのか、そしてどのようにすれば対処できたのかを紹介。・・・

JavaScript

DOMトラブル:getAttribute('href')

記述は間違いない(はずな)のに、ブラウザによって思うように動作しないことがある。 実際にどのようなことがあったのか、そしてどのようにすれば対処できたのかを紹介。・・・

JavaScript

コンテンツを開いたり閉じたりする

Level 1 (x)html <p> <a href="#" onclick="openConts();">クリックすると、コン・・・

JavaScript

期間を限定した表示 2

掲載から特定の期間が経過すると削除する(「new」マークや「最新情報」など)場合に便利なスクリプト。 「日数」後まで、の表示設定 javascriptソース ・・・

JavaScript

期間を限定した表示

コンテンツのある一部分の掲載削除日が決まっている場合(「new」マークや「本日更新」)に便利なスクリプト。 「いつまで」の表示設定 javascriptソース・・・

JavaScript

リストとナビゲーション「横」編

xhtmlソース <div> <ul> <li>navi1</li> <li>navi2</・・・

CSS

リストとナビゲーション「縦」編

(x)htmlにテキストを記入し、CSSでマウスオーバー時に背景画像を変更させる。 xhtmlソース <div> <ul> <l・・・

CSS

floatを利用した段組み例3

xhtmlの書き順 #cont2(#cont2in) → #cont1 → #cont3 (#cont1と#cont2の書き順はどちらでもよい) widthの・・・

CSS

floatを利用した段組み例2

xhtmlの書き順 #cont2 → #cont1 → #cont3 (#cont1と#cont2の書き順はどちらでもよい) #cont1and2{ f・・・

CSS

floatを利用した段組み例1

xhtmlの書き順 #cont1 → #cont2 → #cont3 #cont1{ float:left; width:○○px; } #cont2{・・・

CSS

positionを利用した3段組み

3段組み #wrapper{ width:○○px; } #container{ position:relative; width:100%; } #con・・・

CSS

positionを利用した2段組み

2段組み #wrapper{ width:○○px; } #container{ position:relative; width:100%; } #con・・・

CSS

レイアウト全体を画面のセンターに設定する

本来であれば #wrapper{ width:○○px; margin:0 auto; } の設定だけで充分なのだが、これだとIE5が対応せず左寄せのままで・・・

CSS

デフォルトで設定すべき事項

下記に示す全称セレクタを用いた初期化方法の流行りは影を潜め始め、現在は「必要な要素のみに適切なスタイルを示す」方法が流行りはじめているらしいことを聞いた。ただ、・・・

CSS

line-heightとimgによるWinIEバグ

line-heightを指定してる中にimgが含まれると、WinIE(IE7では修正されている)では行間が狭くなる。 <ul> <li>・・・

CSS

float段組みした場合のclear設定の方法

.group{ overflow:auto !important; overflow /**/:hidden; } または .group{ overflo・・・

CSS

Googleにスニペットやキャッシュを非表示にさせる

使用例:<meta name="robots" content="nosnippet" /> 「nosni・・・

html

クロスブラウザDynamicHTMLを作るには

if(document.getElementById){ IE5.0〜、N6.0〜(「getElementById」をサポートしたブラウザ)用スクリプト } ・・・

JavaScript

DOMの値を取得・設定する方法

DOM値を取得する方法 id属性を使用してタグ要素の属性の属性を取得する document.id名.属性 JavaScriptのオブジェクトと共通のDO・・・

JavaScript

DOMの基本事項

DynamicHTMLとは DOM(Document Object Model)をスクリプトなどを使って操作し、ブラウザに動的な効果を与える技術。 HTMLを・・・

JavaScript

変数のスコープ(領域)

グローバル変数 スクリプトのどこからでも参照できる ローカル変数 ファンクションの中で宣言されたローカル変数はその中にしかない function squa・・・

JavaScript

JavaScriptで取り扱える型の種類

文字列 ダブルクォーテーションマーク(")、シングルコーテーションマーク(')で囲まれた文字や数字や特定の特殊記号 注意!文字列の一部にシングルクォ・・・

JavaScript

オブジェクト、関数、変数などに設定可能な名前

大文字・小文字のアルファベット、あるいはアンダースコア(_)で始まる文字列 変数には文字、数字、ドル記号($)、アンダースコア(_)を含めることができる 日本・・・

JavaScript

scriptを記述する際の注意事項

従来 <script language="javascript">〜 と記述。更に <script language=&・・・

JavaScript

オブジェクト

ナビゲーターオブジェクト navigator Plugin MimeType screen event window frame document ・・・

JavaScript

コンテンツの量によってフッターの位置を変える

具体的には、ブラウザ表示領域(ファーストビュー)とコンテンツ高さを比較して、コンテンツ高さの方が短い場合、フッターは下部に固定。コンテンツ高さの方が長い場合、ス・・・

CSS

スタイルシートを変更する

スタイル変更ボタンを設置し、スタイルシートごとごっそり置き換える。 これはCSSとJavascriptの組み合わせで実現させる。 動作確認環境 Windows・・・

JavaScript

XML Schemaサンプル

sample.xsd <?xml version="1.0" encoding="utf-8" ?> <xsd:schema xmlns:x・・・

xml

XML Schemaの内容モデルをもっと詳細に取り決める

出現順序を指定 要素名 説明 sequence要素 内容が順番に出現する choice要素 内容のいずれか1つが出現する all要素 内容・・・

xml

XML Schema

XML SchemaとDTD XML SchemaはDTDと同じように、xml文書の構造を取り決めるための仕様。以下にDTDとの比較を記述する。 DTDよりも・・・

xml

DTDを別ファイルにする

DTDを別ファイルにして共有することができる。DTDの内容を外部のファイルにしたものは、外部サブセットと呼ばれる。 内部サブセット(internal subse・・・

xml

妥当な文書サンプル

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE m・・・

xml

妥当な文書

妥当な文書(valid XML document)とは、整形式文書の規則を守り、かつタグの取り決めを守っている文書。 文書型定義(DTD:Document Ty・・・

xml

文字参照を使用しない記述方法

<![CDATA[ ここに記号を含めたテキスト ]]> (さらに…)

xml

整形式文書

整形式文書(well-formed XML document)とは、xmlの文法を守った最も簡単な文書。 xml宣言 xhtmlにおいてはxml宣言は必須項目で・・・

xml

xhtmlと同様のルール

文書内にコメントアウトを記述方法 <!--コメントコメントコメント--> 入れ子で構成 &や<、>などの記号は文字参照で・・・

xml

xmlの3つの魅力

さまざまなデータを表すことができる タグは自由に取り決めることができる(対html) 人間にもコンピュータにも分かりやすい(対csv) (さらに&hel・・・

xml

絶対URIと相対URLと相対パスの関係

http://〜 絶対URI   /〜 相対URL 絶対パス ./〜、../〜 相対パス 絶対URIと相対URLと相対パスの言い方・・・

html

<style><script>要素のコメントアウト

<style><script>要素のコメントアウト htmlからコーディングを覚え、xhtmlへ移行したときの落とし穴 実は<st・・・

html

emを使ってpx感覚で操作する

文字サイズをemで指定する アクセシビリティに配慮して文字サイズ指定にpx指定を行わない(固定にしない)。そこでデフォルトサイズを10pxになるよう%指定する。・・・

CSS

tableのこと【CSS編】

テーブルタグの初期設定 table{ border-collapse:collapse; font-size:100%; } セルとセルの間を空けるかどう・・・

CSS

font-family フォントファミリー

font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",&quo・・・

CSS

Internet Explorer 7対策

html>body モダンブラウザ用 *;first-child+html*:first-child+html IE7のみ用 ちなみに、 <!-・・・

CSS

モジュール化の一案

名前空間の名付けは任意に行う(bodyをそのまま名付けることはNG)。 unitモジュールにのみ文書を記述するようにするのがポイント。また固定のレイアウトであ・・・

html

strictに対応するためのiframe代替

strictではiframeの利用は廃止されている。そこでobjectを利用する。 <div> <object type="tex・・・

html

ランダムに選択する

var sentaku = Math.floor(Math.random()*8); document.write(sentaku); 0から7までの数字の中か・・・

JavaScript

dlを使って、dtとddを横並びにする

dl{ width:○○px; } dt{ float:left; width:△△px; } dd{ margin-left:△△px; } float・・・

CSS

高さをコントロールする

とはいえ、正確にコントロールできるわけではないが、縦幅を認識させたいときに有効。 html,body{ height:100%; } 高さの%指定は親要素に・・・

CSS

フォントサイズ

アクセシビリティの観点から文字サイズは固定しない方がいい。 ただ、IE以外のモダンブラウザではフォントサイズを固定しても、実際にはブラウザで拡大表示が可能だ。更・・・

CSS

リキッドレイアウトで画像の背景に一工夫

<div class="bg-cover"><img /></div> 画像を取り囲むdiv上にbg・・・

CSS

「このページのトップへ」に動きをつける

function pageup(){ if(document.all){ posi=document.body.scrollTop; } else{ posi・・・

JavaScript

xhtml strictで新規ウィンドウを開きたい場合

xhtml1.1 strictでは、新規ウィンドウを開くtarget属性を推奨していません。新規ウィンドウを立ち上げるべきかどうかはユーザーが決めるべきだという・・・

JavaScript

リスト「画像」とナビゲーション「横」編

xhtmlソース <div> <ul><!-- --><li><img alt="navi1" />・・・

CSS

ロールオーバーで画像を切り替える

様々なやり方があるが、どれがベストなんだろう? 気にするポイントは、検索エンジン的に問題がないか?アクセシビリティは確保されているか?ソースが読みづらくないか?・・・

CSS

背景やボーダーが意図した表示をしないとき

そのボックスにfloat付きの子ボックスが含まれていないか? そのボックス(または親ボックス)内で回り込みを解除されているか? 解除できる要素がなく親ボックス・・・

CSS

imgのvertical-align

縦方向のレイアウト崩れ防止、ブラウザによる見え方を統一するため、vertical-alignは「top」の設定がおすすめ。ちなみにデフォルトはbaseline・・・

CSS

idとクラス名

古いブラウザではidやクラス名に「-」と「_」を含まれていると認識できなくなるらしい。アルファベットに始まり、アルファベット、数字で書いた方がよい レイアウトに・・・

html

文字間

/*¥*/ letter-spacing:0.1em; /**/ letter-spacingの指定はMacIE5ではバグがでてしまうため、ハックを利用して・・・

CSS

floatの使用上の注意

floatとwidthはペアで使用する CSS2.1の勧告候補ではwidthなしでも自動的に幅がフィットされる。しかし、Mac IE5ではうまく表示されない。 ・・・

CSS

ブラウザによるwidthプロパティの解釈の違い

正しいCSSを記述しているにもかかわらず、表示が崩れることがある。ブラウザによる解釈の違い(バグ)が原因であるが、IE5や古いブラウザにバグが見られる。・・・

CSS

Windows/Mac IE version4の排除

@important "test.css"; ポイントは@importantを設定し、1ファイルかますこと。ただし、この設定ではMacI・・・

CSS

Netscape version4の排除

<link href="test.css" rel="stylesheet" type="text/c・・・

html

MacIEだけを分離するハック

/*¥*/ MacIE以外 /*/ MacIE用 */ どのブラウザでもOK MacIE以外だけに設定したい場合やMacIEのみに設定したい場合でも、コメント・・・

CSS

tableのこと【xhtml編】

tableタグを利用する際に意外と知られていないのが、列(縦方向)をコントロールする「colgroup」タグ。また、colgroupタグはcaptionタグの次・・・

html

新規ウィンドウをサイズ指定のセンター表示する

「test.html」をサイズ500×500(px)、新規ウィンドウ、画面中央で開くと仮定 function newWinIconOpen(URL){ var・・・

JavaScript

「/」から始まるパス指定

「/」が意味するのは、どの階層にいようが一番上の階層を基準にすること。ナビゲーションが階層が変わった場合でもリンク先を変更する必要がないので便利。ただアップロー・・・

html

swfファイルをxhtml1.0 strictに取り組む記述

<object data="○○.swf" width="○○" height="○○" ty・・・

html