Profile

Cover photo
西村文宏(にしし)
Lived in 大阪府
26 followers|42,015 views
AboutPostsPhotosVideos+1's

Stream

 
記事『仮想環境で古いバージョンのIEやEdgeの表示確認をする』の改訂版(3度目)を公開しました。
現在お使いの環境(WindowsだけでなくMacでも)上で、IE8・IE9・IE10・IE11・Edge14・Edge15などの新旧各バージョンを起動して任意のウェブサイトの表示確認をする方法を解説しています。
Microsoftサイトでは、「特定バージョンのIEやEdgeがインストールされているWindowsそのもの」を仮想マシンイメージの形で無償配布しています。これを使えば、現在の環境を特に汚すこともなく、古いバージョンのIE(新しいバージョンのEdgeもありますが)での見栄えを確認できます。
ウェブ製作現場では、どうしても古いブラウザでの見え方も気にしないといけないケースが多々ありますよね。実験用のPCを別途用意することなく、手軽に表示確認ができるので便利です。
ぜひ、試してみて下さい!
(※3年前に初版を公開した記事の、改訂3回目版です。)
https://allabout.co.jp/gm/gc/435388/

 ·  Translate
IE8・IE9・IE10・IE11といった古いバージョンのIEを複数同時に起動させる方法を解説。Microsoftが無償配布している仮想マシンイメージを使えば、仮想環境上で複数バージョンのIEやEdgeを起動して表示確認ができます。最新版のIEやEdgeがインストールされている環境でも古いIEを同時に併用できますし、LinuxやMac上でもIEやEdgeを起動して表示確認ができます。
1
Add a comment...
 
記事まとめ『CSS3を活用!角丸からアニメーションまで、役立つ小技15選』を公開しました。
All Aboutで公開した記事のうち、CSS3関連の書き方・使い方を解説した記事15本をまとめて紹介しています。ぜひ覗いてみて下さい。
https://allabout.co.jp/matome/cl000000003556/

▶CSS3だけでアニメーションを実現する方法、文字に陰を付けたり縁取りしたりする方法、ボックスの角を丸くしたり斜線を引いたりする方法、文字でも画像でも何でも回転したり引き延ばしたりする方法、段組(マルチカラム)を簡単に実現できる(CSS3で追加された)新しいプロパティの使い方、従来のCSSにあった不便を解消できる新しい単位や新しい仕様……などを解説した記事を集めています。
※新規記事ではなく、既存記事のまとめです。(また、このまとめ自体も2014年に公開したものの増強改訂版です。^^;)

今年(2016年)の、All Aboutでの更新はこれが最後だと思います。よいお年をお迎えください!
 ·  Translate
CSS3では様々なデザインが作れます。CSSだけでアニメーション効果を作ったり、ボックスを角丸にしたり、斜線を引いたり、グラデーションを表示したり、段組を簡単に作ったりできます。セレクタの書き方などCSS3活用方法の解説記事をまとめました。
1
Add a comment...
 
記事『入力フォームが空のときに入力案内を表示する方法』を9年ぶりに全面改稿しました。
テキスト入力欄が空欄のときに、入力欄の内側に案内文字(プレースホルダ)を表示する方法を解説しています。HTML5からはスクリプト不要で(説明が要らないほど)激しく簡単になりました。プレースホルダの文字列をCSSで装飾する方法や、「入力欄内にカーソルを入れただけでプレースホルダ文字を消す」ようにできる書き方なども紹介しています。
また、記事2ページ目以降では、以前のようにJavaScriptを使ってプレースホルダを実現する方法も参考までに解説しています。
https://allabout.co.jp/gm/gc/23942/
 ·  Translate
フォームのテキスト入力欄に何も入力されていないときに「検索語を入力」などの入力案内文字(プレースホルダ)を表示する方法をご紹介。HTML5のplcaceholder属性を使えば簡単。CSSを併用すれば、入力欄にカーソルが入った瞬間にプレースホルダが消える仕様にもできます。なお、古いブラウザ向けにJavaScriptでプレースホルダ機能を作る方法も解説。
1
Add a comment...
 
記事『CSS3だけで特定の要素をアニメーションさせる方法』を2年半ぶりに少しだけ改稿しました。
スクリプトを一切使わなくても、CSS3で追加された「animation」プロパティや「@keyframes」規則などを使った短いCSSソースを記述するだけで、任意の要素に簡単なアニメーション効果を加えられます。
ぜひ試してみて下さい!
https://allabout.co.jp/gm/gc/441452/
 ·  Translate
CSS3では、「CSSだけ」で簡単なアニメーションを作成できます。スクリプトは一切不要。CSSソースを記述するだけで、文字を動かしたり、背景色を徐々に変化させたりなど、様々なアニメーションが実現できます。古いブラウザで閲覧した場合でも、ただアニメーションしない状態で表示されるだけなので、安心して活用できます。
1
Add a comment...
 
記事『文字に影を付け、画像に重ねた文字を見やすくするCSS3』を5年ぶりに改稿しました。
CSS3のtext-shadowプロパティを使うと、テキストに陰を付加できます。ハッキリした陰でもボカした陰でも自由な色とサイズで陰が付けられます。
また、陰を上下左右の四方向に付加することで「縁取り」効果を出すこともできます。テキストを縁取ると、画像の上に文字を重ねた場合にも読みやすさを維持できます。
文字を画像化する必要がないので、修正も楽々ですし、検索にもヒットできます。
ぜひ、text-shadowプロパティを活用してみて下さい!
https://allabout.co.jp/gm/gc/384274/

 ·  Translate
CSS3では文字の縁取り装飾も簡単に実現できます。CSS3のtext-shadowプロパティを使えば、文字に影を付けられます。この影を文字の四方に加えることで「縁取り効果」を作成する方法を解説。写真など複雑な背景の上にそのまま文字を重ねると読みにくくなってしまいますが、文字に影を付けたり縁取りしたりすれば読みやすくできます。
1
Add a comment...
 
新記事『スマホ対応も!アコーディオンメニューの簡単な作り方』を公開しました。
スクリプト不要の、HTML+CSSだけで、アニメーション効果付きのアコーディオンメニューUIを作る方法を解説しています。
アコーディオンの動作を実現するには、なんとなく「jQueryなどを活用してJavaScriptを書く必要があるのでは?」と思われがちですが、ラジオボタンやチェックボックスを活用するというアクロバットなテクニックを使うことで、HTMLにCSSを加えるだけで実現できます。
とても簡単に作成できますので、ぜひ試してみて下さい!
http://allabout.co.jp/gm/gc/465511/

 ·  Translate
HTML+CSSだけでアコーディオンメニューを作る方法を解説。スクリプトは一切不要。アコーディオンメニューは、質問をクリックすると回答がスライド表示されたり、題名をクリックすると対応コンテンツが表示されたりするUIによく使われます。jQueryなどを活用してJavaScriptを書く必要があると思いがちですが、ラジオボタンやチェックボックスを活用するという意外なテクニックを使うことで、CSSだけで作成できます。
1
Add a comment...
 
記事『2段階に連動するプルダウンメニューの作り方』を9年ぶりに大改稿しました。
HTMLで作った複数のプルダウンメニューを、JavaScriptで連動させる(=選択項目に応じて表示/非表示を切り替える)方法です。例えば以下のような項目の作成に役立つと思います。
●1階層目で「市」を選択させて、2階層目ではその市に該当する「区」だけのプルダウンメニューを提示する。
●1階層目で「月」を選択させて、2階層目ではその月で選択可能な「日」だけのプルダウンメニューを提示する。
●1階層目で「ジャンル」を選択させて、2階層目では詳細な「ページ名」を選択させてページ移動するナビゲーション機能を作る。
……などです。
動作サンプルページを用意していますので、それで動作を確認しつつ、そのHTML(+JavaScript)ソースも眺めつつ読むと、分かりやすいのではないかと思います。
https://allabout.co.jp/gm/gc/23955/
 ·  Translate
HTMLで作った2つのプルダウンメニューを、JavaScriptで連動させる方法を解説。メイン(1階層目)のプルダウンメニューの選択項目に応じて、サブ(2階層目)のプルダウンメニューを動的に表示する方法です。2段階に連動させると2階層目の表示項目数を絞れるため、選択肢をシンプルに分かりやすく表示できる効果があります。
1
Add a comment...
 
記事『JavaScriptで入力文字を制限(入力チェック)する方法』を11年半ぶりに改稿しました。11年半前! 自分で言って驚きました。(^_^;)
ウェブ上のテキスト入力欄に対して、ユーザの入力内容をチェックして制限する方法を解説しています。本記事では主にJavaScriptを使ってチェックする方法を解説していますが、実はHTML5ではわざわざスクリプトを使わなくても入力チェックができる機能があります。記事冒頭では、そんな「スクリプトを使わずにHTMLだけでチェックする方法」も紹介しています。簡単なチェックだけなら、1ページ目を読むだけで事足りるのではないかと思います。
ぜひ、試してみて下さい!
https://allabout.co.jp/gm/gc/23854/
 ·  Translate
入力可能な文字種が制限されたフォームに書かれた文字を、送信前に自動チェックできると便利です。JavaScriptを使って、input要素やtextarea要素に入力された文字列の簡単なチェック機能を作る方法を解説。HTML5ではブラウザ側でも正規表現を使った入力チェックが可能なので、その方法もご紹介。
1
Add a comment...
 
記事『Enterキーでフォームが誤送信されるのを防ぐ方法』を8年ぶりに改稿しました。
ウェブページ上にあるフォームで一行のテキスト入力欄に文字を入力している際、うっかり[Enter]キーを押すと入力内容が送信されてしまうことがあります。入力内容が日本語の場合は、漢字変換結果を確定する目的で[Enter]キーを使いますから、うっかり打ち過ぎて誤送信してしまうケースがあります。そのような誤送信を防止できるフォームの作り方を解説した記事です。
誤送信はユーザ側も苛立ちますし、ウェブ側も余計な処理が走ってしまう点で避けたいですよね。ぜひ、対策してみて下さい。
https://allabout.co.jp/gm/gc/23972/
 ·  Translate
ウェブ上のフォームで一行入力欄内にカーソルがあるときは、[Enter]キーを押すだけでフォームの内容が送信されてしまうことがあります。そこで、[Enter]キーによる誤送信を防ぐ方法として、[Enter]キーを押してもフォームの内容が送信されないようにする方法と、送信する前に確認ダイアログを表示する方法の2通りをご紹介いたします。
1
Add a comment...
 
記事『CSS3の新単位「rem」で文字サイズを分かりやすく指定』を4年ぶりに少しだけ改稿しました。
親要素の文字サイズに関係なく、ルート要素の文字サイズを基準にして大きさを指定できる便利な単位の話です。
単位emや%を使う場合は、継承を考慮しないと「実際にどれくらいの大きさで表示されるのか?」が分かりません。だからといって単位pxやptを使うと、後々に(他の要素との)相対的な大きさの調整がしたい場合に不便です。
この新単位「rem」なら、常に「ルート要素の文字サイズ」を基準にできるので、どれくらいの大きさで表示されるのかが分かりやすい上に、(ルート要素の文字サイズを変更するだけで)相対的に大きさが変化するので、後々のカスタマイズ時にも面倒がなくて便利です。
CSS3で追加された単位ですが、今では代表的などのブラウザでも使用可能です。IE8以下さえ除外して構わないなら、何も気にせず使えます。
ぜひ、活用してみて下さい!
https://allabout.co.jp/gm/gc/402548/

 ·  Translate
単位emや%を使って相対的に文字サイズを指定すると、複数のボックスを経由した先などでの表示サイズが把握しにくいことがあります。CSS3の新単位「rem」を使えば、常にルート要素の文字サイズが基準になるため、文字サイズを分かりやすく指定できます。
1
Add a comment...
 
記事『QRコードをGoogle Chart APIで作成して表示する方法』を7年ぶりに改稿しました。
ウェブページ上でQRコードを動的に生成して表示する方法の解説です。
わざわざ「事前にQRコード画像を作成しておいて、そのファイルをアップロードする」といった面倒なことをしなくても、HTMLソース中に「QRコードに含めたい文字列」を記述しておくだけで簡単にその場でQRコードが表示できます。(なので、内容を変更したい場合もHTMLソースを修正するだけで済むので楽々です!)
例えば、「いま表示中のページのURLを携帯端末向けに案内する」といった用途にも便利です。
https://allabout.co.jp/gm/gc/24013/

 ·  Translate
ウェブページ上にQRコードを簡単に表示する方法を解説。別途フリーソフトなどのツールは不要。HTMLソース内でGoogle Chart APIを呼び出すだけで動的にQRコードを作成でき、その場に掲載できます。事前に画像を作っておく必要がない方法なので楽で便利。URLやメールアドレスだけでなく、何でも自由な文字列を含んだ2次元コード「QRコード」の簡単な作り方をご紹介!
1
Add a comment...
 
記事『CSS3で偶数行・奇数行など「n番目」を限定装飾する』の内容を5年ぶりに少し改稿しました。
ボックスを1個おきに装飾したいとか、表を1行おきに装飾したいとか、使うと便利な場面は多々あると思います。CSS3のnth-child疑似クラスの書き方を解説しています。

●表を見やすく掲載するには、1行おきに別の背景色を付けるのが良いでしょう。そんな「偶数行と奇数行とで装飾を分けたい場合」にも便利です。
●ボックスを3つずつ一塊にして掲載したい際には、「3の倍数番目のブロック」・「3の倍数+1番目のブロック」・「3の倍数+2番目のブロック」のような感じで、3つおきに装飾を分けられると便利です。そんな複雑な装飾も簡単に指定できます。
●ランキングなどの長いリストでは、最初の5つだけを大きく表示して、残りは小さく表示したい、ということもありそうです。そんな場合も「先頭の5項目だけ」を装飾対象にできます。

なかなか便利な疑似クラスです。ぜひ、活用してみて下さい。
http://allabout.co.jp/gm/gc/383707/

 ·  Translate
リストやテーブルなどたくさんの項目が連続する要素は、1行おきに装飾を変えると見やすくなります。CSS3で用意された「nth-child疑似クラス」を使えば、装飾対象を「偶数番目のみ」・「奇数番目のみ」などに簡単に限定できます。他にも「3つおき」や「先頭の5つ」など柔軟に指定できる便利なCSSです。
1
Add a comment...
Story
Tagline
All About「ホームページ作成」ガイド。著書5冊発売中です。本を書いたり、記事を書いたり、萌えたりしています。このGoogle+アカウントでは主に、All About等での新着記事の案内や、ブログ更新情報のお知らせなどを垂れ流しております。お気軽にフォロー下さい!
Introduction
にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(ウェブ製作系解説書4冊+小説1冊)。著書や記事は「西村文宏」名義。記事はAll Aboutで連載。本の最新刊は2011年3月発売のライトノベルでございますよ。
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Previously
大阪府 - 兵庫県 - 萌えの国
Work
Occupation
文筆業, プログラマ
Basic Information
Gender
Male
Other names
にしし
西村文宏(にしし)'s +1's are the things they like, agree with, or want to recommend.
JavaScriptで入力文字制限!(入力チェック)
allabout.co.jp

JavaScriptで入力チェックをして、入力制限をする方法を、初心者にもわかりやすく解説します。この数字チェック・文字チェックで快適な入力規制をしましょう。