読者です 読者をやめる 読者になる 読者になる

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

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

【モバイルファーストな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 ファイルの 読み込みが加わる…

【CSSコーディングの効率アップにお勧めしたい自動整形ツール】

CSS(スタイルシート)が増えすぎて管理し辛いと感じたら、 自動整形の恩恵に預かりましょう。 .hoge { color: #eee; transition: all 0.3s ease; text-decoration: none; } というフォーマットに整形してくれるだけのツールだと、 CSSが長くなるとどうして…

【DOMアクセスはquerySeletorよりもgetElementByが高速】

スマホ用のメニューボタンをタップすると 横からヌルッとメニューが出てきますよね。 このようにウェブページを表示したままで ページの一部をアニメーションさせたり するとき、JavaScriptを使ってHTMLタグの 階層構造(DOMといいます)にアクセスを します…

【Android4.2以前はflex互換性に要注意】

メニューを横並びにするためにfloatを使わずflexを使う場合の注意点です。 Android4.2以前の古い機種はflexの古い文法に準拠していて現在の(新しい)文法と互換しないため、表示が崩れます。 なので、古いAndroidスマホにも対応するためには、新旧両方の文…

【HTML5フォームの入力チェックはpatternを使う】

HTML5ではメールフォームなどに使う<input>タグに、 入力チェック用の属性を設定することができる。 ▼構文 <input type="●●●" pattern="■■■"> typeには、HTML4の頃からあったtext以外に、 email(メールアドレス用)やtel(電話番号用)などが使える。 textとの違いは、ブラウザによってはemailを指…

【戻るボタンに type="submit" はNG】

問い合せフォームなどの確認ページで 入力ページに戻るボタン。 <button type="submit" onclick="history.back();">戻る</button> これ、Firefoxだとhistory.back(); が効かず submitされてしまう(送信される)。 <button type="button" onclick="history.back();">戻る</button> これでOK。 原因:Firefoxはtypeの指定を優先するFirefoxの挙動はもっともらしいと考えることもで…

【CSSだけでテキストにグラデをかける方法】

シャドウ(影)をつけるだけなら、text-shadow でOK。 いや、最初から画像ソフトでグラデつけておけばいいじゃん? って思う方もおられるでしょうけど、 文字の内容(文言)が途中で変更になったら画像作り直しですよね? テキストならHTMLちょっと書き換え…

【ノンプログラマなWebデザイナさん必読】

ある程度jQueryかじった人なら たった30分ぐらいでjQueryの 頭のてっぺんからつま先まで、 丸わかりですよ。 スライドめくって読むだけだし。 一見の価値あり。 プログラマも知識の交通整理に 役立つと思いますよ。 ノンプログラマーのためのjQuery入門 fr…

【どんなに複雑なHTMLでも打ち負かす方法】

プログラミング講座で扱っている HTMLの実習課題は比較的階層が 浅いものばかりですが、実務では 添付のように10階層以上の深~く 折りたたまれたコードに遭遇する ことがよくあります。 「こんなの理解できないし書けないよ!」 と尻込みしてしまいそうにな…

【ファビコンが簡単に作れる無料サービスご紹介】

ブラウザのタブに表示されるアイコンを ファビコンと言います。 ファミコンじゃないですよ。(懐かしっ) ファビコンです。(添付の赤枠) これ、自動的に付くものではありません。 きちんとアイコンの画像ファイルを用意して HTMLの中に埋め込む記述をしな…

【レスポンシブなプラグインの正体を暴いてみた】

Page Layout Builder というWordpress用 プラグインが便利です。 ▼紹介記事はこちら http://design-plus1.com/tcd-w/2014/06/page-layout-builder.html私も触ったことはあります。確かに手軽です。 でもお客様向けのサイト制作には使いません。 こういうのを…

jQueryが動かない原因を調べる

調べないことは自分を無知にする大罪である jQueryのプラグインは配布元の公式サイトを見れば、組み込み方法やオプションの説明、デモページなどが載っていることがほとんどです。GitHubなどクラウドで開発プログラムごと管理・配布されているものもあり、英…

CSSデザインという発想

PhotoShopが使えなくてもデザインする方法 先日、某ネットショップのスマホページのカスタマイズを完了させました。ところで、スマホページは画像を多用すべきではありません。ページの読み込みが遅くなり、ユーザーをイライラさせ、購入率にも影響するから…

プログラムを綺麗に書くコツ

綺麗なプログラミングは作法から 間違いの少ないプログラムを書くには、 間違を犯す可能性が少ない書き方をするのが上策です。一番簡単なのは、右端で折り返さないエディターに移してから編集することです。ワードプレスやネットショップにはHTMLを編集する…

CSSを勉強している皆さんへ

新しい情報を追いかけるときの注意点です。 「前提条件を意識する」 例えば、 '-webkit 等のベンダープレフィックスがついたスタイルは、 まだ標準化されておらず、特定のブラウザ向けの独自の 実装であることを忘れてはいけません。 jQuery のようにインタ…

【抜け道プログラミングにリスクあり】

Facebookアプリやサイト制作において FacebookのAPIを利用するとき、 APIを使うための認証が必要になります。 アクセストークンもその1つですが、 現在はFacebookの仕様変更によって アクセストークンの有効期限は最大 2ヶ月になっています。 現在使ってい…

【コーディング=設計】

トップページのコーディングは設計が命 今、某ネットショップのTOPページをコーディングしています。 サイトのTOPページは、他ページの雛型にもなりますので、「とりあえずデザイン通りの表示になればいい」などと安易な作り方をしてしまうと、保守性が低下…

【サイトが思うように動かないときの解決STEP】

1.正常に動いているサイトにソースコードを 限りなく近づける 2.徐々にソースコードを元に戻していく 3.動かなくなった直前に戻したコードが原因 4.修正と確認の繰り返し ネットのサンプル通りにやったのに動かない という経験をした方は多いと思い…

【切り捨てできないIE対策にこのツール】

最近のIEのディベロッパーツールには レンダリングモードの切り替え機能が 付いているのである程度古いIE向けの 表示確認ができると思われています。 が、それは真っ赤な嘘だと断言します! 事実、同じサイトを実機のIE9と、 IE11付属のディベロッパーツール…

【プログラムアレルギーの克服法】

得体のしれないモノへの拒否反応 先日、新規の生徒さんがWordPressをカスタマイズしたいというので 簡単なCSS変更のコードをお見せしたところ、「うわ・・・英語・・(´Д`)」と、拒否反応を示されました。テーマに備わっているカスタマイザーをダッシュボー…

【総当たりテストはロジカルに】

「もしこの場合はこっちのレイアウト」 「そうでなければこっちのレイアウト」 このような条件分岐をテンプレートに 組み込むとき必ず行うべきは総当たり テストです。 全パターンを漏れなくテストするには 簡易でもよいので表(マトリックス) を作るのが確…

【jQueryの変数名 ハイフンの代わりにアンダースコアを使おう】

jQueryの変数名にハイフンを付けると動かない 自分が書いた jQuery などのスクリプトが動かないとき、 よくある原因の1つに変数名のルール違反があります。プログラム言語の変数名には、命名ルールがあります。 言語によってルールは違いますが、例えば jQu…

【難しく見えるでしょうか?】

Wordpressのテンプレートです。 右側を見ると難しく見えるかも知れませんが 左側に書いた簡易ロジックを文法に照らして 書き直したものが右側です。 日本語やHTMLといった単純なコトバで書き、 それをプログラムに落とし込むのがポイント。 これがプログラム…

【プログラムの文法をネットから手繰り寄せるために必要なたった1つのこと】

それは適切な検索キーワードを知ることです。 ちょうど良い例があったのでシェア致します。 PHPで数字の0埋めをする2つの方法 - sprintf関数とstr_pad関数例えば日付を「9/8」ではなく「09/08」 と表示させたい時、どんなキーワードで 検索しますか? PHP 日…

【HTMLやCSSの字下げは何のためにするのか?】

HTMLやCSSの字下げは何のためにするのか? HTMLとCSSの基礎からお教えしている生徒さんからこのような質問をいただきました。 字下げとは上の画像のように、プログラムコードの行頭を階層毎に揃える作法を言いますが、何のために字下げするのでしょうか?「…

【WordPressでCSSが効かない場合の対処法】

ワードプレスだとCSSが効かないことがある 「静的なHTMLサイトの場合は問題なくCSS(スタイルシート)が書けるのに、ワードプレスだとCSSが効かないことがある 。いったい何故?」という体験をしたことはありませんか? なぜワードプレスでCSSが効かないこと…

【CSS3のbox-sizingで余白計算の煩わしさから解放される方法】

こんな経験ありませんか? 960pxのコンテナにCSSで余白を調整するために左右10pxずつpaddingを設定したら、枠をはみ出して横スクロールバーが表示されてしまった。そんな経験ありませんか? お勧めできない方法 横幅が左右10pxずつ(合計20px)広がってしま…

【ドラクエ公式サイトに学ぶコーディングテクニック】

ゲームの公式サイトは、コーディングスキルがいっぱい詰まっていることをご存知でしたか? 例えば赤枠で囲ったボックスの4隅。よくありますよね、装飾付きのフレーム。昔は掲示板サイト等でよく使われました。 <TABLE>タグでフレーム全体を9分割して、4隅のセル</table>…