Profile cover photo
Profile photo
西村文宏(にしし)
28 followers -
All About「ホームページ作成」ガイド。著書5冊発売中です。本を書いたり、記事を書いたり、萌えたりしています。このGoogle+アカウントでは主に、All About等での新着記事の案内や、ブログ更新情報のお知らせなどを垂れ流しております。お気軽にフォロー下さい!
All About「ホームページ作成」ガイド。著書5冊発売中です。本を書いたり、記事を書いたり、萌えたりしています。このGoogle+アカウントでは主に、All About等での新着記事の案内や、ブログ更新情報のお知らせなどを垂れ流しております。お気軽にフォロー下さい!

28 followers
About
Posts

Post has attachment
記事『別窓を開かずに その場で拡大画像を表示する4つの方法』を改稿しました。
ウェブページに掲載したサムネイル画像(縮小画像)がクリックまたはタップされた際に、ページ移動せずその場で拡大画像を表示できるLightbox系スクリプトのおすすめ4本を紹介しています。

jQueryを使う本家Lightbox2、スマホでの全画面表示に便利なIntense Images、画像以外にも使えるColorbox、jQueryなしのJavaScriptで動作するLightboxPlusなど、選び方の参考としてそれぞれの特長を簡単にご紹介。
各スクリプトの使い方を解説した記事はそれぞれについて別途ありますので、気になったスクリプトについてはそれらの記事もぜひご参照下さい!(記事中からリンクしています。)
https://allabout.co.jp/gm/gc/23975/
Add a comment...

Post has attachment
記事『タブやブックマークに独自アイコンを表示する方法』を改稿しました。
ブラウザのタブやブックマーク項目に表示されるアイコンとして、ウェブサイト独自の画像を設定する方法を解説しています。
favicon.icoファイルやapple-touch-icon.pngファイルを作って、短いHTMLを書くだけの簡単な方法で、自身のウェブサイトを表すアイコンを付加できます。

PC用ブラウザのタブやアドレスバーやブックマーク項目、スマートフォン用ブラウザのブックマーク項目やホーム画面などに自作のアイコン画像を表示させてみて下さい。
https://allabout.co.jp/gm/gc/23917/
Add a comment...

Post has attachment
記事『画像拡大スクリプトLightbox2の簡単な設置方法&使い方』を改稿しました。
ページ移動せず、別窓も開かずに、サムネイル画像をその場で拡大表示するための定番スクリプト「Lightbox2」の使い方を解説しています。

使い方からカスタマイズ方法まで、表示サンプルと共に1ページで解説。
Lightbox2はjQueryと共にCDN経由で読み込めるので、自サイトに何のファイルも設置することなく簡単に使えます。
ぜひ試してみて下さい。
https://allabout.co.jp/gm/gc/470618/
Add a comment...

Post has attachment
新記事『拡張子とは?Web初心者向けに解説&主な拡張子一覧』を公開しました。
編集部から「ファイル拡張子について解説する記事を書いてくれ」という要望が出たので書きました。PC全般というよりはWeb寄りの解説にしてありますが。
そもそも拡張子って何なのか、拡張子を表示する設定にする方法、ウェブ上での拡張子の扱い、ウェブ上では拡張子がデータの種類を表すとは限らない話、HTMLやJPEGの拡張子に何故3文字版と4文字版があるのか、……などを簡単に解説しています。
1ページで完結する記事ですので、ぜひ覗いてみて下さい。
https://allabout.co.jp/gm/gc/471588/
Add a comment...

Post has attachment
記事『HTMLの表示/非表示を切り替える2つの方法』をちょっとだけ改稿しました。
ウェブ上に存在する、ある要素の表示・非表示をJavaScriptで切り替える際には、displayプロパティの値を変える方法と、visibilityプロパティの値を変える方法の2通りがあります。どちらでも表示状態と非表示状態を切り替えられますが、周囲に及ぼす影響が異なります。それらの違いと記述方法を解説しています。
https://allabout.co.jp/gm/gc/23973/
Add a comment...

Post has attachment
新規記事『HTMLのhref属性の書き方!リンクの指定と活用』を公開しました。
HTMLのa要素でリンク先を指定する際などに記述するhref属性の基本的な書き方を解説しています。
単にリンク先URLを書く以外にも、ページ内リンクを作ったり、最上部へ戻るリンクを作ったり(※HTML5で仕様が追加されました)、メールアドレスへのリンクを作ったり、いろいろできます。
href属性と併用して使うtarget属性やdownload属性の書き方などもご紹介。
この機会に基礎を見直してみてはいかがでしょうか。
https://allabout.co.jp/gm/gc/475758/
Add a comment...

Post has attachment
(過去記事紹介)『CSSで幅や高さ等の指定に計算式が書けるcalcの使い方』 https://allabout.co.jp/gm/gc/466094/
例えばCSSで横幅を指定する際、「横幅100%から35px引いた長さを半分にしたサイズ」を指定したいなら、計算式をそのまま値にして「width: calc(( 100% - 35px ) / 2);」と書けます。
この calc(計算式) の記法は、特別なプラグインやスクリプトなどは不要で、いつも記述しているCSSソースにそのまま書ける方法です。

あまり需要がないのか、単にこのような書き方ができることが知られていないのか、昨年の公開以後もあまり閲覧数の伸びていない記事ですが。
割合や単位付きの数値を加減乗除して値を決定したい場合に、CSSソース内に直接計算式を書ける便利な calc() の書き方と、使い方の注意点、効かない場合の対処方法などを解説しています。
ぜひ、試してみて下さい。
Add a comment...

Post has attachment
記事『SSL証明書を取得してHTTPS化する設定方法』を改稿しました。
SSL証明書を取得して、自サイトを常時 https://~ のURLでアクセスできるようにする方法を解説しています。今月(2018年7月)下旬あたりにリリースされるChrome68以降では、HTTPで通信するだけ(=URLが http:// で始まっているだけ)で警告が表示される予定です。

記事では、HTTPとHTTPSの違い、HTTPS化しなかった場合の表示例、無料で取得可能なLet's EncryptによるSSL証明書、常時SSL化のための.htaccessファイルの書き方など、自サイトをHTTPSで通信可能にするための概要をざっと解説しています。
自サイトを訪れた人々に、「保護されていません」などと警告を見せずに済むよう、今のうちに対策してみて下さい。
https://allabout.co.jp/gm/gc/464365/
Add a comment...

Post has attachment
記事『CSS flexの簡単な書き方! flex-direction/orderを駆使』を改稿しました。
displayプロパティに値flexを指定した上で、flex-directionプロパティやorderプロパティを併用すれば、複数ブロックの縦横配置や並び順序をCSSだけで自在に指定できる……という、flexの書き方を解説しています。

flex-directionプロパティを併用すれば、HTMLソース上の記述順序に関係なく、複数ブロックの並び方を「横並び・縦並び・正順・逆順」など自在に指定できます。
さらにorderプロパティを併用すれば特定要素の掲載順序を番号で指定できるため、「本来なら中央に表示されるボックス」を右寄せして表示するなど、とても柔軟な配置調整ができます。
未対応の古いブラウザへの配慮がもはや不要になったと言っても良い今なら、気軽に使えます。
https://allabout.co.jp/gm/gc/459917/
Add a comment...

Post has attachment
記事『簡単なドロップダウンメニューの作り方(jQuery活用編)』を改稿しました。

「マウスに合わせて自動でサブメニューが展開、メニュー外のどこかをクリックすると消える」というドロップダウンメニューを、jQueryで作成する方法を解説しています。
ドロップダウンメニューは、スクリプトを使わずにHTML+CSSだけでも実現できますが、その場合は「マウスを外すと即サブメニューが消える」仕様になるため、マウス操作をミスするだけでサブメニューが見えなくなる点がちょっと不便になる可能性があります。
そこで、JavaScript(jQuery)を活用することで、明示的にメニュー外をクリックしなければサブメニューは消えずに残る機能を加えると使いやすくなります。

本記事では、わずか9行のjQueryソースで、ウェブサイトのメニューバーにドロップダウンメニュー機能を加える方法を解説しています。
ul+li要素で作るリスト形式のHTMLを、メニューらしく見えるようCSSで装飾し、JavaScript(jQuery)を使ってサブメニューの開閉を制御するだけで、簡単に「マウスに合わせて自動でサブメニューが展開、メニュー外のどこかをクリックすると消える」という使いやすいドロップダウンメニューが作れます。
https://allabout.co.jp/gm/gc/416557/
Add a comment...
Wait while more posts are being loaded