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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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