数値の大きい順・小さい順に文字列を並び替える(ソートする)方法
JavaScriptのsortメソッドは、標準では「文字コード順」に並べ替える(ソートする)だけですが、引数に比較用関数を与えてやれば、数値の大きい順・小さい順に並べ替えることもできます。入力文字列を、数値の大きい順・小さい順に並び替える(ソートする)サンプルとソースをご紹介。
View Article複数行の文字列を逆順に並び替える方法
ユーザが入力した文字列や、配列などに格納してある文字列の順序を、ひっくり返して逆順に並び替えたいことがあります。JavaScriptでは、「reverseメソッド」を使うことで、簡単に配列の順序を逆順に並び替えられます。ものすごく簡単です。
View Articleborderと違ってレイアウトに影響しない枠線が引けるoutlineプロパティ
スタイルシート(CSS)を使ってボックスやテキストや画像などの周囲に枠線を引きたいとき、真っ先に思いつくプロパティはborderでしょうが、他にもoutlineプロパティも存在します。borderで引いた枠線は周囲のレイアウトに影響するので(マウスの動きに合わせるなど)動的に追加すると配置がズレたりします。しかし、outlineプロパティなら周囲の配置に影響しないので動的に枠線を引きたい場合に向いて...
View ArticleCSS3なら傍点(圏点)で文字を強調できる
スタイルシート(CSS)を使って文字を強調する方法にはいくつかありますが、CSS3では強調として使える装飾に「傍点」も加わりました。テキストの上に点を描くことで強調できます。傍点の色は自由に指定でき、形も丸形や三角形や読点(ゴマ)型などから選択できます。text-emphasisプロパティを使うだけの簡単な記述で点を打てます。
View ArticleCSSでRGBに透明度を加えて色を指定できるRGBAの書き方
スタイルシート(CSS)で色を指定する際には、光の三原色(赤・緑・青)の量を指定するRGB値のほかに、透明度(アルファチャンネル)を加えたRGBA値も使えます。このRGBA値での色指定を使えば、文字を半透明で表示させたり、背景色を半透明にして背後を透過させたり、枠線の色を半透明にして背後を透けさせたりできます。CSSでのRGBAカラーモデルの書き方を解説。
View Articleキャプション付き画像を縦横に等間隔で並べるHTML5＋CSSの書き方
ウェブ上で画像を縦横に並べたいとき、画像単体だけではなく「画像にキャプション(題名)を加えた『画像ボックス』」を縦横に並べたい場合も多々あります。そのような、キャプション(題名)付きの画像を縦横に等間隔で並べる方法として、「HTML5では専用のfigure要素・figcaption要素を使う」方法と「単にspan要素を使う」方法、CSSの「inline-blockで並べる」方法と「floatで並べる...
View Article単語途中での自動改行を回避するにはnowrapよりもinline-blockが便利
日本語のように単語の区切りが曖昧な言語で、単語の途中で自動改行されるのを防ぐ方法としては、spanとかで囲んだ単語に「display: inline-block;」を指定するのが楽です。昔はwhite-space(nowrap)などを使って改行禁止区間を設ける対処方法とかもありましたが、それだと「どうしても改行が避けられない状況」では困ってしまいますから。
View Article重要ではないCSSファイルを後から遅れて読み込ませる方法
CSSファイルによっては後から遅れて読み込ませたい場合もあります。後から読み込まれるJavaScriptだけで使われるCSSとか、ユーザが何らかのアクションを起こさない限り参照されないCSSとか。そのような「先に読んでも仕方がない」(＝事前に読み込んでもウェブページの表示待ち時間を増やしてしまうだけ)なCSSファイルを、できるだけ後回しにして読み込ませる方法を紹介。
View ArticleCSSだけで画像を文字の形に切り抜く方法
HTML＋CSSで、画像を文字の形にくり抜いて表示（テキストに画像のテクスチャを貼った感じでの表示）を実現する方法を解説。CSSソースをほんの数行書くだけで簡単です。CSS標準ではありませんが（IEを除く代表的なブラウザでは）任意の画像を切り抜くような形で自由な文字を表示できます。最低限必要なのは、くり抜きたい画像を背景画像として指定し、画像の掲載範囲をテキストの部分に限定する指定を追加して、文字色...
View ArticleRSSフィードについて - にしし ふぁくとりー
にししふぁくとりーで配信しているRSSフィード・Atomフィードの一覧です。 ご都合の良い情報・形式を選択してご購読下さい。全フィードを一括してチェックすることもできます。
View Articleにしし ふぁくとりー
にしし(西村文宏／にしむらふみひろ)が運営する個人サイト。RSS作成ソフト・テキストビューアなどのWindows用フリーソフトや、スケジュール表示CGI・簡易ブログCGIなどのフリーCGIを配布。そのほか、CSSやJavaScriptなどウェブ関連の解説、日々の日記、コミケレポートなどのおたくコンテンツも多数。
View Articleカーソルや文字が入っている間だけ、一時的に入力欄を大きく表示する方法
ウェブ上の入力欄では、テキストエリアの表示行数(高さ)をユーザの操作に合わせて動的に変更すると便利な場合があります。複数行の入力を求めるとき、最初から大きな入力欄を表示していると、入力するつもりのないユーザにとっては邪魔になってしまうでしょうから。そこで、ユーザがテキストエリア内部にカーソルを入れた状態のときや、テキストエリア内部に文字が入力されている間にだけ、一時的に入力欄の行数(高さ)を大きく広...
View Articleテキスト入力欄のフォーカス時にChromeなどが自動付加する枠線を消す方法
ChromeやOperaなど一部のブラウザでは、フォーカスのあるテキスト入力欄(＝カーソルの入った状態の編集領域)に独自の枠線を加えて描画します。テキストエリアの枠線を独自にデザインしているページでは、この仕様はちょっと邪魔です。なぜなら、独自デザインの枠線の外側に、ブラウザ側がさらに枠線を加えてしまって、枠が二重に見えてしまうからです。特にテキスト入力欄を角丸にしていると、見た目がおかしくなります...
View Articleテキスト入力欄の枠線や背景を自由に装飾する方法
テキスト入力欄は標準ではただ細い枠線が引かれるだけの四角形ですが、CSS(スタイルシート)を使えば自由に装飾できます。ブラウザによっては、編集欄内に表示される文字サイズが小さめで見えにくい場合もあります。入力欄の枠線を角丸で太枠にしたTwitterのツイート欄っぽい感じにしたり、文字サイズをページの他のサイズと合わせたり、内側の余白をしっかり確保すると、見やすくて使いやすいテキスト入力欄になりそうです。
View Articleページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ
JavaScriptを使って、ウェブページの読み込み完了と同時に何らかの処理をしたい場合など、ページの読込動作とタイミングを合わせて処理を実行したいことがあります。このとき、「ページの読み込み前」・「HTMLの読み込み直後」・「ページの読み込み完了後」など実行タイミングは複数あり、それぞれでJavaScriptの書き方はいくつかあります。それらの記述方法を解説してみます。
View Article表示文章中の、指定の単語だけを動的に強調表示(ハイライト)する方法
ウェブページに掲載されている文章の中から、指定の単語だけを動的にハイライトしたり消したりする機能をJavaScriptで作る方法を解説。文章中の単語に最初からハイライトを加えていると読みにくくなる可能性がありますから、標準では何もせず、閲覧者がハイライトする意思を示したときにだけハイライトするような仕組みを設けておく方が使いやすいでしょう。ボタンを押す度に、ハイライトのONとOFFが切り替わるように...
View Articleテキストリンクを表面がグラデーションのボタン形状に装飾する方法
テキストリンクをボタンに見えるように装飾したいことがよくあります。ボタンとして機能することが一目で分かるよう、表面がグラデーションのボタン形状にCSSで装飾する方法を解説。リンクを作るa要素に若干の工夫を加えて、background-imageプロパティにlinear-gradientを使えば、簡単にグラデーションボタンがCSSだけで作れます。やはり、わざわざボタン形状に見せるからには、現実の物理ボ...
View Article役所が人口推計を出す必要性とは？ 校区単位での予測が必要
将来の市内人口を推計するシステム開発に関わっていたことがあります。なんで人口なんか推計するんだ？と疑問に思われることが多いんですが、人口の動きを予測しないと役所が困る理由があります。公立の小学校や中学校は義務教育ですから、定員オーバーだからといって入学を断ることはできません。当然、新年度になるよりも前の段階で、翌年度に教室や教員が足りるかどうかを把握して調整する必要があります。しかし、人々が引っ越し...
View ArticleTwitterの2段階認証にサードパーティー認証アプリを使うには事前にステップが必要
Twitterの2段階認証でもGoogle Authenticatorなどのサードパーティー製認証アプリが利用可能になったわけですが、それらを使うためには「事前にSMS認証を有効にしている」という前提条件があります。この事実を知らないと、「認証アプリを使うための設定項目が見つからない！」という点で躓いてしまいます。(^_^;;;...
View Articleリンク削除依頼メール(たぶんSEO業者から)ってのは本当に来るんだなあ
とある有名運送会社の担当者を名乗る人物から、数ヶ月前に「リンクを削除してくれ」という依頼メールが届きました。メールアドレスのドメインが gmail.com だったので怪しさ満点です。SEO業者の担当者が、リンク削除依頼メールを送信するためだけに用意したメールアドレスなんでしょう。こういうリンク削除依頼メールを受け取ったのは初めてだったので、本当に来るんだなあ、と感心してしまいました。(^_^;)
View Article
