Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

コーディングテクニック

【スタイルシートで簡単にグラフが描ける方法】

世論調査のようなアンケートページを 作成中の生徒さんから質問がありました。 「アンケートの結果をグラフみたいに 表示したいのですが、できますか?」 中級者以上なら、 ・HTML5のCanvasタグ ・JavaScript この2つを組み合わせれば グラフが描けることを…

【フォーム送信前にプログラムを割り込ませる方法】

登録ボタン、送信ボタンなどフォームのボタンをクリックすると、 サーバー側にリクエストが送信されるので、 ブラウザの画面はリロードされます。 ですから、もし画面がリロードされる前に何かをしたい場合、 ボタンの送信イベントを横取りして、目的の処理…

【疑似要素::before, ::after の使い道】

www.nxworld.net画像を使わないCSSデザインで多用します。 単色の小さなアイコンならともかく、 輪郭が滑らかな(アンチエイリアスが利いた)画像は 高解像度ディスプレイ向けの互換対応をしないと 荒れてダサく見えてしまいます。 PCだと綺麗に見えるのに、…

【マウスを乗せるとふわ~っと浮き出る画像】

ブログ記事のサムネイルやギャラリーに マウスを乗せると、ゆっくり画像が動く。 そんなエフェクト見たことありませんか? 原理は意外と簡単です。 javascriptとか難しそうなプログラムを 使わなくてもスタイルシートだけでOK。 例えばサムネイルの部分のHTM…

【スマホ向けYoutube埋め込み最適化のタネ証し】

まず前提知識から。 全てのウェブページはHTMLタグと呼ばれる構文を使って掲載内容を定義し、 CSSと呼ばれる構文を使ってページ上の配置などを設定することによって ブラウザの画面に表示されます。 ただし、Youtubeなど埋め込み型のコンテンツは自分のサイ…

【iframeを介してデータを伝える方法】

よそのウェブページの全体または一部分を 自分のウェブページに埋め込みたいとき、 簡単なのが iframe タグを使う方法です。 ↓自分のページに記述するHTMLタグ <iframe src="よそのページのURL"></iframe> こうすると、iframeタグの部分に対象URLの ページが埋め込まれたような表示になります。 でも、…

【CSSでinline-block指定時にできる隙間を消す方法】

ギャラリーとかスライドショーでサムネイルを横に並べるとき、 左右が折り返さないようにサイズを計算してCSSを書いたにも関わらず、 小さな余白が空いてしまってレイアウトが崩れた経験ありませんか? float: left ではなく display: inline-block で 横に…

【モバイルファーストなCSS】

モバイルファーストとは、モバイルデバイス向けの 最適化を優先したウェブページの作り方を言います。 コーディングにおいては、 モバイルでアクセスしたとき最小限のリソースのみ 読み込むようにすることで、表示速度を無駄に遅く しないという配慮もモバイ…

【<img>タグのレスポンシブ&Retina】

<img>タグを画面サイズに応じてレスポンシブに切り替え、 なおかつiPhoneのようなRetinaディスプレイの場合は高解像度版の 画像を選択的に読み込ませる方法です。 <picture> <source media="(min-width: 768px)" srcset="images/main_visual_l.jpg"> <source media="(min-width: 320px)" srcset="images/main_visual_m.jpg 1x,images/main_visual_m@2x.jpg 2x"> </source></source></picture>

【ディベロッパーツールでリアルタイム保存コーディング】

使ったことがない方はぜひお試しください。buchineko.website プレビューしながらCSSが書けるから、 ピクセル単位の微調整もラクラク。 入力候補が出るので少し文法を忘れてもOK。 愛用しています。

【全ブラウザ対応 CSS3で作る「流れるテキスト」】

HTML4にあった「marquee」タグを使うと、タグの中に書いたテキストを 右から左へ自動でスクロールさせることができます。ホームページの「新着情報」などによく使われていますね。しかし、「marquee」タグは元々、IE(インターネットエクスプローラー)独自…

【チェックボックスの状態は prop ? attr ?】

jQueryでチェック状態に応じて処理を分けたいとき $.prop("checked") $.is(":checked") $.attr("checked") どっちだったか迷ったときの道しるべ。 http://taneppa.net/jquery-prop/ 要するに、attr() はDOMの属性にアクセスするもの。 だから、DOMが変化しな…

【吹き出しの先端を中央寄せするCSS】

画像でもCSSでもどちらでも可能ですが、 吹き出しなどの先端を中央寄せする方法。 <親要素> <子要素> </子要素> </親要素> のように、吹き出しの枠に相当するボタンなどを 親要素とし、その内側に子要素を配置して先端を 表示するタグの役目を負わせます。 親要素の位置を基準…

【CSSはセレクタを先に書いてしまうのがポイント】

HTMLでタグを構造化したあと、 その構造を外側から内側に向かって過不足なく 辿りながら、CSSのセレクタを書き出します。 そうすると、 「あ!ここもスタイル付けなきゃ!」 「えっと、ここはどういうセレクタがいいかな?」 とか、行き当たりバッタリに悩む…

【CSSで繰り返しブロックの余白設定に使えるセレクタ「+」】

こんなページがあったとします。 ============== ヘッダー ============== <section>ブロックA</section> ============== ←ここ <section>ブロックB</section> ============== ←ここ <section>ブロックC</section> ============== ←ここ <section>ブロッ</section>…

【WordPressで拡張性に富んだテーマを作るには?】

WordPressのテーマ(テンプレート)には あらかじめいろんな独自機能がついています。 そこがテーマ作成者の「売り」なのですが、 もしあなたがテーマを作成して配布や販売したいとお考えなら、 バージョンアップで拡張していきやすい作り方を心がけると良い…

【CSSだけで見出しをデザインするスニペット50選】

CSSだけで美しいタイトルの装飾ができるスニペット集です。www.nxworld.net あまりやり過ぎると「ウザッ!」と感じさせてしまいかねないのですが、 よく見かけるCSSデザインですね。 疑似要素とCSS3の使いこなしがポイントです。一度使ってみて仕組みがわか…

【CSSは影響範囲を明確にすべき】

たとえばHTMLに<div class="slide">というタグがあったとして、 CSSのサンプルが .slide { ほにゃらら; } だったとします。 局所的な対応としてはコピペで良いのですが、使用しているテンプレートや プラグインに備わっているCSSとclass名が重ならないか調…

【iPhone(iOS Safari)の独自仕様】

拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする – wevdeviPhone(iOS Safari)では、フォントサイズが実質16pxより小さい フォームにフォーカスを当てた時に、自動的に画面が拡大するという 独自仕様があります。「文字が小さいと…

【WordPressにも共通するCSSカスタマイズの王道】

CMSのカスタマイズは、難易度に応じてできることとできないことが分かれます。 テンプレートやプラグインが用意してくれるメニュー画面を操作することで かなりのカスタマイズが叶います。 しかし、それらは全て他人が用意した「想定」の範囲内でしかありま…

【横並びのボックスの高さを揃える方法】

divタグなど、CSSのdisplayプロパティがボックスタイプに分類されるタグは 基本的に縦に並びます。 それを横に並べたいとき、CSSで float:left; を使うのは常套手段ですが、 float には横に配置するという役目しかありません。 そのため、並べたボックスの高…

【LPや画像の多いブログに必須。速度改善lazyLoad】

画像がブラウザの視野に入る直前まで 読み込まれないように抑制することで、 ページの読み込み時間を改善。 <仕組み> ブラウザのスクロールが発生するたびに JavaScript(jQuery)でスクロール量を検出。 画面の一番上から画像のタグまでの距離と、 スクロ…

【CSS3でマウスオーバーの簡易アニメーションエフェクト】

CSSでこういうエフェクトが表現できるということも踏まえた ウェブデザインができると、お客様に喜ばれるかも。 ※以下のコードが抜けていました(訂正) #post:before { content:''; } どうしてもデザインって、『静止画』のイメージがまだまだ強いようです…

【CSSだけでリストマークを表現する方法】

やり方だけならネットでいくらでも紹介記事が見つかるので、 コピペで使っている方も多いかと思いますが、 「なぜこう書くとそうなるのか?」 という、原理原則を理解しておけばいちいちネットを見なくても自分で 「こう書いたらこうなるだろうな」 という予…

【検索エンジンを意識したワンランク上のコーディングをしよう】

ブログの新着記事一覧など、リスト(箇条書き) の意味を持つ部分はHTMLの<li>タグで記述する ことが多いかと思います。 しかし、 ”<li>には箇条書きという以上の意味はない” ので、 検索エンジンにはただの文字の羅列にしか見えません。 そこで、定義リスト(<dl>,<dt>,<dd>タグ</dd></dt></dl></li></li>…

【レスポンシブ。iPadでPCと同じレイアウトにする方法】

レスポンシブなサイトを作るとき、 工数や予算の関係で、iPad向けの表示まで 最適化することができない(手が回せない) 場合の1つの対処法です。 ━━━━━━━━━━━━━━━━━━━━ 基本方針 ━━━━━━━━━━━━━━━━━━━━ iPadで表示した場合はPCで表示した場合と 同じレイア…

【ディベロッパーツールでトレペを作る発想】

ウェブサイトのカスタマイズにおいて一番難しくて一番大事なことは、 お客様に「変更後のイメージ」を正確に伝えることだと思います。 文字の大きさや余白の広さなど、実際の表示イメージに限りなく近い 「絵」を、カスタマイズをする前に、しかもなるべく時…

【ウェブページで10px以下の文字を表示する裏ワザ】

ウェブページで、とても小さい文字を表示したい場合、 スタイルシートで10pxより小さい数値を指定しても効きません。これはブラウザの仕様なのでどうしようもありません。 そんなときは、CSS3のscaleプロパティで解決できます。scaleは、1を基準として対象要…

【PHPで配列要素のnull判定を省略するテクニック】

PHPで配列を使って繰り返し処理をやりたいとき、 foraech($products as $product) : //ここに繰り返し処理を書く endforeach; このように記述すると、もし配列 $products の中身が1件もない場合に エラーが発生してしまいます。かといって、いちいちnull判定…

【プラグイン不要。超カンタンにフッターを固定する方法】

フッタをコンテンツ量が少ない時は最下部に固定表示、 コンテンツ量が多い時は成り行きで表示させるスタイルシートです。わざわざプラグインを使うまでもありません。 プラグインを使うと、プラグイン自体の js ファイルや css ファイルの 読み込みが加わる…