ホーム画面からの起動か判別する
便利なプロトタイプツールはたくさんある。その中でも、AdobeのXDとSketchは、個人的にはトップ2。でも導線確認するには、もっとリアルな感じで作った方がい・・・
マークアップに関する記事は、150件あります。
HTMLやCSS、JavaScript、PHPなど様々な言語やライブラリに関する備忘録です。
便利なプロトタイプツールはたくさんある。その中でも、AdobeのXDとSketchは、個人的にはトップ2。でも導線確認するには、もっとリアルな感じで作った方がい・・・
Object.keys 配列の場合 var a = ["ジョン", "ポール", "ジョージ", "リンゴ"]; a.length; // ・・・
PSDやAIファイルで太さを指定したフォントは、Webでは異なる太さを指定したほうがいい場合があります。 今回は、Noto Sansの3種類のウェイトで調べてみ・・・
inputのplaceholder(プレースホルダー)のテキスト色を変更するでご紹介した内容を踏まえて、修正するだけ。 focus時にplaceholder(・・・
いろいろ調べると、疑似クラス「:placeholder」と「:placeholder-shown」というのにいきつく。 ちょっとハマってしまったので備忘録。ハマ・・・
まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・
配列のコピー。また同じ過ちをしてしまったので、備忘録 とりあえず実例 var a = 1; var b = a; a = 300; この結果、b は ・・・
サンプル a = {}; b = { "b1": "value of b1", "b2": "value of b2", "b3": "value of ・・・
まずはこれ。 // 読み上げます var speech = new SpeechSynthesisUtterance(); 基本セット // 読み・・・
配列の「値」で判別して要素を削除する場合、 spliceメソッドやsliceメソッドでは「値」ではなく「何番目」かでの処理をするためできない。shiftメソッド・・・
ググってよく見かけたのは、Fisher-Yates shuffleというアルゴリズムを利用するもの。ソースのサンプルもほとんどが同じ。 function s・・・
「日本測地 世界測地 変換」でググってみると、変換する計算式はいろいろあることが分かったが、Google Mapsで使われている(た?)というコードをベースに備・・・
「日本測地 世界測地 変換」でググってみると、変換する計算式はいろいろあることが分かったが、Google Mapsで使われている(た?)というコードをベースに備・・・
onscroll や onresize を利用すれば、スクロール時や画面リサイズ時の処理はできるが、スクロールが止まったときや画面リサイズした後にアクションした・・・
「2点間 距離 取得 javascript」でググるとそのまま利用できる記事がたくさん見つかる。 いろいろ試したが、どれも数メートルの誤差はあるものの、似通った・・・
The maximum number of apps for free development profiles has been reached. 実機のシ・・・
プラグインやらを使えばいいのだろうけど、わざわざプラグインを使わなくても「共有用にリンクだけ設置したい」ということがよくあります。 そのたびにググッて調べてい・・・
数年前にも同じことでハマってしまったのに、同じ過ちを繰り返してしまったので備忘録。 今回の調査端末は、SC-04F(Android 5.0)と iPhone 6・・・
ターゲットユーザーが外国人を含む場合、日本語が使える環境がないかもしれません。そこで、日本語が使える環境か判別したり、第一優先言語が日本語か判別してみた。$_S・・・
たとえば下記のような配列(sample)で、配列に格納したオブジェクトの指定したキー(b)の値で並び替えたいとき。また配列(sample2)で、配列に格納した配・・・
dataで日時取得した際に、9時間の時差が出て、日本時間と異なっていた場合 2通りのやり方を備忘録。 php.iniを修正する場合 php.iniのdate.・・・
以前、「History API を使ってみる」という記事を書いた。読み返したら非常に分かりにくかったため、History API の使い方をあらためて調べたので・・・
iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ ・・・
#と6桁(もしくは3桁)の英数字(正確には16進数で表記される0から9、aからfの英数字)からなるカラーを、RGBでの数値に変換、もしくはRGBから16進数に変・・・
http://allinthemind.biz/search.html?p=xxxx たとえば、こんなURLがあって、pの値が数字かどうか判別したいとき。 ・・・
form周り、これまでは要素を特定してループさせやすいようにidやclassを付与して、JavaScriptが結構な行数を使って面倒だったけど、jQueryを使・・・
html5をはじめからウォッチしてきたから、この辺りは確実に把握しておきたい。 下記は仕様から削除されるリスクがあるものたち。 動向が明確になるまで、個人的に、・・・
端末によって画面両サイドのエリアのリンクが認識しづらい現象が発覚。 クリッカブル領域を広げてみたが改善されなかった。 そこでサンプルページを用意し、スマホで調査・・・
スマホやタブレットの普及で、現在地を取得するような位置サービスの需要が多くなるのは用意に想像がつく。 そこで、WebブラウザでJavaScriptを使って現在地・・・
この記事を、下記ページに焼き直しました。 「History API を「あらためて」使ってみる」 2015.7.21 History API を使ってみた・・・
ちょっとハマってしまったので備忘録。 javascriptの「length」に相当する、文字列の長さを得るphpの関数に「strlen」「mb_strlen」が・・・
2つ以上のキーで連想配列を並び替えしたいときの備忘録。 サンプル配列 var arr = []; arr.push(["5", "4", "たちつてと",・・・
ブラウザ、モバイルファースト、メディアクエリー、マルチ画面、タブレット・・・ 想定すべき画面サイズ、利用シーンに適した情報のコントロールが崩壊しつつある。 とい・・・
ライトボックスをお手軽に実装できるためのライブラリは「lightbox」で検索してみると分かるとおりサイト上にたくさんあって、大変ありがたい。 その中で個人的に・・・
継承(擬似クラス型)のサンプルの一つとして、コードを理解しやすいようにもっともミニマムなカタチで、シンプルに用意してみた。 var Test = funct・・・
CSS3で利用できるマルチカラムについて再確認。 カラムサンプル カラム 幅を指定 column-width: 150px; columns: 150p・・・
文字列をオブジェクトにしたいシチュエーションができてしまい、ajaxでcallbackすればいいのかな?とか、JSON.parseでいけるかな?とかいろいろ試し・・・
スマートフォン(以下スマホ)やタブレットでPCでいうところのマウスオーバー処理をしたいときは、touchイベントを使うことで実現できる。 確かAndroid1.・・・
localStorageは、近頃のブラウザやスマホで対応しているのでチョー便利。 そして文字列ではなく、オブジェクトを格納しようとするたびに、その方法を検索しち・・・
もはや他ブラウザでも問題ないようにクロスブラザ対応だけでなく、スマートフォンやタブレット端末などマルチデバイスに対応できるようになっておかなければ、という時代に・・・
html5の要素を調べたことがあれば、下図のようなものを見たことがあるかもしれない。 これは、W3C Editor's Draftを参考に、自分なりかみ砕いたも・・・
<!DOCTYPE html> <html lang="ja"> <head> <meta ch・・・
<!DOCTYPE html> <html lang="ja"> <head> <meta ch・・・
コンテンツの高さだったり、ページ内の指定した要素を表示するようスクロールさせようとした際とか、毎回同じことをネット検索してしまうので、ここで高さを取得する方法に・・・
変数bnにhtmlファイルのファイル名を拡張子なしで取得するサンプル var bn = location.href.split("/"); bn = bn[b・・・
変数bnにphpファイルのファイル名を拡張子なしで取得するサンプル $bn = basename($_SERVER['PHP_SELF'], ".php");・・・
サンプル スクロールバーは、基本ブラウザが用意してるのを使えばいい、という考えでした。そのため、スクロールバーのデザインをカスタマイズしたいと思ったとき、「いや・・・
1ファイルにまとめると <!DOCTYPE html> <html lang="ja"> <head>・・・
ポイントは、「その年月のカレンダーのその日は第何週なのか、第何曜日なのか、何日なのか」をJavaScriptで生成し、祝祭日はCSSで指定していること。 サンプ・・・
border-imageは、一枚の画像で9スライスのデザインが実現できちゃうという優れもの。 残念ながらIE8以下で適用できず、実際にはまだ使えないかなーという・・・
text-shadowプロパティは、その名から想像するとおり、テキストに影をつける(ドロップシャドウ)ことができます。 仕様 text-shadow:右方向 下・・・
box-shadowプロパティは、その名から想像するとおり、ボックスエリアに影をつける(ドロップシャドウ)ことができます。 仕様 外側にドロップシャドウ bo・・・
フォトスライド。 確かに様々な優秀なライブラリがすでにある。 jQueryを使ったもの(たとえば、30 Best jQuery Photo Pluginsで紹介・・・
W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加されて・・・
IEでは、html5で追加されたタグを使用しても認識してくれません。 そのため、html5でマークアップしたIEでは「CSSが効かない!」とか「レイアウトが崩れ・・・
jQuery Mobileを導入するだけで、同ドメイン内の他ページやページ内リンクを使ってページ遷移するときに右から左へスライドします。デフォルトは「右から左へ・・・
jQurey Mobile。まもなくβ版がリリースされるそうですが、現状のα版3を見てみました。 最低限必要なソースまで削り落として、ちょっとjQuery M・・・
スマートフォンが普及し、タッチパネルによるページ切り替えが新たなUIとして浸透してきました。 たとえば、指で横にしゅっとやると画面は右から左にスライドされ、ナビ・・・
AmazonのProduct Advertising APIをアフィリエイトとして使おうと試みて、その概要をつかむまで2,3日かかってしまった。まず、アカウン・・・
スマートフォンが普及していく様を横目に、携帯サイトに対応しなくてはいけないシーンはまだまだある。 とはいえ、どの端末をターゲットにすればよいか悩みどころだったの・・・
上図のように、2カラムレイアウトにおいて、左右のコンテンツ長さが任意で、短い方のカラムの縦位置を長い方のカラムのセンタリングする場合、どうしましょうって話。何・・・
もっとはやくに気づいていたかった・・・。 環境としては、レンタルサーバーhetemlを使用してMovablTypeをインストールしています。 http://he・・・
inputタグ要素の属性、maxlengthが指定されたテキストの文字数について、ちょっと調べてみた。 調査ポイントは2つ。半角英数と全角でmaxlength値・・・
inputタグ要素の属性、maxlengthについて、ちょっと調べてみた。 調査ポイントは2つ。半角英数と全角でmaxlength値のカウント方法が異なるか?文・・・
いまどき「マッシュアップ」という言葉を使うこと自体ちょっぴり恥ずかしいのですが、外部APIを連携する際のお覚書き。 これまで外部APIの連携は、「php」と「・・・
Ajax、Asynchoronous JavaScript + XMLの略。非同期通信を行ってJavascriptからXMLデータやテキストデータを取得し、その・・・
表示オブジェクト オーサリング時に作成できるオブジェクトオブジェクト ボタンインスタンス ムービークリップインスタンス テキストフィールド ダイナミック・・・
イベント処理 イベント処理の基本書式は下記 オブジェクト.addEventListener(イベント,イベントハンドラ関数名); function イベントハ・・・
通常、送信ボタンが押されるとformのactionが実行されますが、formタグに「onsubmit」、もしくは外部化したJavascript内であれば「sub・・・
selectタグの上にコンテンツを乗せる手法。いろいろネット検索したものを総まとめした「覚書」。 これを参考に応用すると、うまくいく。ただW3Cに準拠していない・・・
<?xml version="1.0" encoding="UTF-8"?> <rss versio・・・
意味づけされたマークアップをすることは、 将来性の高いコーディングスキルを身につけると同様の価値があると思うのです。 それが、アマチュアとプロとの違いでもあると・・・
swfファイルをhtmlファイルで指定する際、従来はobjectタグとembedタグをダブルに記述していたが、embedタグはxhtml1.0から非推奨タグとさ・・・
「CSSは記述しているのに適用されない」という質問が多々あるので、あらためて基本をざっくり。 CSSを指定する方法として、大きく分けて2通りの考えをマスターする・・・
Javascriptでブラウザ判別するのはともかく嫌いで、どうにかこれまで避けてきたのだけど。 どうしてもIEかそれ以外の判別をしなければならないシチュエーショ・・・
swfファイルをブラウザ上に表示するために、flash playerの有無やバージョンの判別をする最も普及しているといっても過言ではないライブラリ「swfobj・・・
コンテンツの量に関わらず、スクロールしても、ヘッダーとフッターは常にブラウザ上に表示されるようにする。 ポイント htmlとbodyに高さ100%を指定する ・・・
inputタグの文字間を上手にコントロールする術を模索している。 百聞は一見にしかず、ということでサンプルを見てほしい。 xhtml <ul> ・・・
IE7でブラウザの右下にある数値を変えて拡大してみる。見事にレイアウトが崩れる場合がある。 IE7の拡大時のレンダリングは、Operaと同じように、bodyその・・・
xsltスタイルシートの立ち位置 xml文書とxsltスタイルシートを、xsltプロセッサを通して、別の構造や形式のデータに変換する。 xsltの記述 xslt・・・
JavaScript InternetExplorer Netscape 特徴 JavaScript1.0 IE3.0 N2 基本的なオブジェクト・・・
実際に、簡単なサンプルを用いて、xml文書がどのように変化するのか見てみます。 sample.xml <?xml version="1.0" enc・・・
xml文書は別のxml文書と結合することができる。結合した際に同じ要素名があるときの不具合を、名前空間を使用して回避できる。 記述方法 <プリフィックス:・・・
記述は間違いない(はずな)のに、ブラウザによって思うように動作しないことがある。 実際にどのようなことがあったのか、そしてどのようにすれば対処できたのかを紹介。・・・
記述は間違いない(はずな)のに、ブラウザによって思うように動作しないことがある。 実際にどのようなことがあったのか、そしてどのようにすれば対処できたのかを紹介。・・・
Level 1 (x)html <p> <a href="#" onclick="openConts();">クリックすると、コン・・・
掲載から特定の期間が経過すると削除する(「new」マークや「最新情報」など)場合に便利なスクリプト。 「日数」後まで、の表示設定 javascriptソース ・・・
コンテンツのある一部分の掲載削除日が決まっている場合(「new」マークや「本日更新」)に便利なスクリプト。 「いつまで」の表示設定 javascriptソース・・・
xhtmlソース <div> <ul> <li>navi1</li> <li>navi2</・・・
(x)htmlにテキストを記入し、CSSでマウスオーバー時に背景画像を変更させる。 xhtmlソース <div> <ul> <l・・・
xhtmlの書き順 #cont2(#cont2in) → #cont1 → #cont3 (#cont1と#cont2の書き順はどちらでもよい) widthの・・・
xhtmlの書き順 #cont2 → #cont1 → #cont3 (#cont1と#cont2の書き順はどちらでもよい) #cont1and2{ f・・・
xhtmlの書き順 #cont1 → #cont2 → #cont3 #cont1{ float:left; width:○○px; } #cont2{・・・
3段組み #wrapper{ width:○○px; } #container{ position:relative; width:100%; } #con・・・
2段組み #wrapper{ width:○○px; } #container{ position:relative; width:100%; } #con・・・
本来であれば #wrapper{ width:○○px; margin:0 auto; } の設定だけで充分なのだが、これだとIE5が対応せず左寄せのままで・・・
下記に示す全称セレクタを用いた初期化方法の流行りは影を潜め始め、現在は「必要な要素のみに適切なスタイルを示す」方法が流行りはじめているらしいことを聞いた。ただ、・・・
line-heightを指定してる中にimgが含まれると、WinIE(IE7では修正されている)では行間が狭くなる。 <ul> <li>・・・
.group{ overflow:auto !important; overflow /**/:hidden; } または .group{ overflo・・・
使用例:<meta name="robots" content="nosnippet" /> 「nosni・・・
if(document.getElementById){ IE5.0〜、N6.0〜(「getElementById」をサポートしたブラウザ)用スクリプト } ・・・
DOM値を取得する方法 id属性を使用してタグ要素の属性の属性を取得する document.id名.属性 JavaScriptのオブジェクトと共通のDO・・・
DynamicHTMLとは DOM(Document Object Model)をスクリプトなどを使って操作し、ブラウザに動的な効果を与える技術。 HTMLを・・・
グローバル変数 スクリプトのどこからでも参照できる ローカル変数 ファンクションの中で宣言されたローカル変数はその中にしかない function squa・・・
文字列 ダブルクォーテーションマーク(")、シングルコーテーションマーク(')で囲まれた文字や数字や特定の特殊記号 注意!文字列の一部にシングルクォ・・・
大文字・小文字のアルファベット、あるいはアンダースコア(_)で始まる文字列 変数には文字、数字、ドル記号($)、アンダースコア(_)を含めることができる 日本・・・
従来 <script language="javascript">〜 と記述。更に <script language=&・・・
ナビゲーターオブジェクト navigator Plugin MimeType screen event window frame document ・・・
具体的には、ブラウザ表示領域(ファーストビュー)とコンテンツ高さを比較して、コンテンツ高さの方が短い場合、フッターは下部に固定。コンテンツ高さの方が長い場合、ス・・・
スタイル変更ボタンを設置し、スタイルシートごとごっそり置き換える。 これはCSSとJavascriptの組み合わせで実現させる。 動作確認環境 Windows・・・
sample.xsd <?xml version="1.0" encoding="utf-8" ?> <xsd:schema xmlns:x・・・
出現順序を指定 要素名 説明 sequence要素 内容が順番に出現する choice要素 内容のいずれか1つが出現する all要素 内容・・・
XML SchemaとDTD XML SchemaはDTDと同じように、xml文書の構造を取り決めるための仕様。以下にDTDとの比較を記述する。 DTDよりも・・・
DTDを別ファイルにして共有することができる。DTDの内容を外部のファイルにしたものは、外部サブセットと呼ばれる。 内部サブセット(internal subse・・・
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE m・・・
妥当な文書(valid XML document)とは、整形式文書の規則を守り、かつタグの取り決めを守っている文書。 文書型定義(DTD:Document Ty・・・
<![CDATA[ ここに記号を含めたテキスト ]]> (さらに…)
整形式文書(well-formed XML document)とは、xmlの文法を守った最も簡単な文書。 xml宣言 xhtmlにおいてはxml宣言は必須項目で・・・
文書内にコメントアウトを記述方法 <!--コメントコメントコメント--> 入れ子で構成 &や<、>などの記号は文字参照で・・・
さまざまなデータを表すことができる タグは自由に取り決めることができる(対html) 人間にもコンピュータにも分かりやすい(対csv) (さらに&hel・・・
http://〜 絶対URI /〜 相対URL 絶対パス ./〜、../〜 相対パス 絶対URIと相対URLと相対パスの言い方・・・
<style><script>要素のコメントアウト htmlからコーディングを覚え、xhtmlへ移行したときの落とし穴 実は<st・・・
文字サイズをemで指定する アクセシビリティに配慮して文字サイズ指定にpx指定を行わない(固定にしない)。そこでデフォルトサイズを10pxになるよう%指定する。・・・
テーブルタグの初期設定 table{ border-collapse:collapse; font-size:100%; } セルとセルの間を空けるかどう・・・
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",&quo・・・
html>body モダンブラウザ用 *;first-child+html*:first-child+html IE7のみ用 ちなみに、 <!-・・・
名前空間の名付けは任意に行う(bodyをそのまま名付けることはNG)。 unitモジュールにのみ文書を記述するようにするのがポイント。また固定のレイアウトであ・・・
strictではiframeの利用は廃止されている。そこでobjectを利用する。 <div> <object type="tex・・・
var sentaku = Math.floor(Math.random()*8); document.write(sentaku); 0から7までの数字の中か・・・
dl{ width:○○px; } dt{ float:left; width:△△px; } dd{ margin-left:△△px; } float・・・
とはいえ、正確にコントロールできるわけではないが、縦幅を認識させたいときに有効。 html,body{ height:100%; } 高さの%指定は親要素に・・・
アクセシビリティの観点から文字サイズは固定しない方がいい。 ただ、IE以外のモダンブラウザではフォントサイズを固定しても、実際にはブラウザで拡大表示が可能だ。更・・・
<div class="bg-cover"><img /></div> 画像を取り囲むdiv上にbg・・・
function pageup(){ if(document.all){ posi=document.body.scrollTop; } else{ posi・・・
xhtml1.1 strictでは、新規ウィンドウを開くtarget属性を推奨していません。新規ウィンドウを立ち上げるべきかどうかはユーザーが決めるべきだという・・・
xhtmlソース <div> <ul><!-- --><li><img alt="navi1" />・・・
様々なやり方があるが、どれがベストなんだろう? 気にするポイントは、検索エンジン的に問題がないか?アクセシビリティは確保されているか?ソースが読みづらくないか?・・・
そのボックスにfloat付きの子ボックスが含まれていないか? そのボックス(または親ボックス)内で回り込みを解除されているか? 解除できる要素がなく親ボックス・・・
縦方向のレイアウト崩れ防止、ブラウザによる見え方を統一するため、vertical-alignは「top」の設定がおすすめ。ちなみにデフォルトはbaseline・・・
古いブラウザではidやクラス名に「-」と「_」を含まれていると認識できなくなるらしい。アルファベットに始まり、アルファベット、数字で書いた方がよい レイアウトに・・・
/*¥*/ letter-spacing:0.1em; /**/ letter-spacingの指定はMacIE5ではバグがでてしまうため、ハックを利用して・・・
floatとwidthはペアで使用する CSS2.1の勧告候補ではwidthなしでも自動的に幅がフィットされる。しかし、Mac IE5ではうまく表示されない。 ・・・
正しいCSSを記述しているにもかかわらず、表示が崩れることがある。ブラウザによる解釈の違い(バグ)が原因であるが、IE5や古いブラウザにバグが見られる。・・・
@important "test.css"; ポイントは@importantを設定し、1ファイルかますこと。ただし、この設定ではMacI・・・
<link href="test.css" rel="stylesheet" type="text/c・・・
/*¥*/ MacIE以外 /*/ MacIE用 */ どのブラウザでもOK MacIE以外だけに設定したい場合やMacIEのみに設定したい場合でも、コメント・・・
tableタグを利用する際に意外と知られていないのが、列(縦方向)をコントロールする「colgroup」タグ。また、colgroupタグはcaptionタグの次・・・
「test.html」をサイズ500×500(px)、新規ウィンドウ、画面中央で開くと仮定 function newWinIconOpen(URL){ var・・・
「/」が意味するのは、どの階層にいようが一番上の階層を基準にすること。ナビゲーションが階層が変わった場合でもリンク先を変更する必要がないので便利。ただアップロー・・・
<object data="○○.swf" width="○○" height="○○" ty・・・