jQuery Coding Standards & Best Practices
All variables that are used to store/cache jQuery objects should have a name prefixed with a $. Always cache your jQuery selector returned objects in variables for reuse. var $myDiv = $("#myDiv"); $myDiv.click(function(){...}); Use camel case for naming variables. Use ID selector whenever possible. It is faster because they are handled using document.getElementById(). When using class selectors, d
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
Wordpress SEO対策 All in One SEO Packのdescription出力の改造 | サイトスパイラル(Sitespiral) - 沖縄で ホームページ制作 / WordPressのことなら
WordPressのSEO対策として、Wordpressプラグイン「All in One SEO Pack」(以下、aioseop)をご利用の方は、多いと思います。わたしもよく利用しています。 といっても、meta keywordとdescriptionは、昔ほどSEO対策としては薄れているようですが、やっぱり、SEO対策として重要なヘッダータイトル(<head><title>～</title></head>)の出力がaioseopはよくできていると思います。 そもそも、meta descriptionとは、検索エンジンが検索結果の説明文に使ってくれる事が多い(ほとんど？)情報です。オーガニック検索で、説明文がしっかりしているものと、そうでないものとでは、説明文がしっかりしているものがクリックされやすいと思います。 さて、aioseopで、このmeta descriptionに値をセットす
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
ul・ol・li要素の備忘録 - NxWorld
かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま
WordPress管理画面の投稿一覧にカスタムタクソノミの列を追加する - Shinichi Nishikawa's
WordPress管理画面の、投稿一覧。 通常は左から順番に、 チェックボックス 投稿タイトル 作成者 カテゴリ タグ コメント数 日時 という順番に列が並んでいます。これをカスタマイズします。 今回は、districtというスラッグを持つ、「地区」というタクソノミを追加します。以下のルールです。 投稿タイプがpostの時だけ追加する＝他のポストタイプの時には表示しない カテゴリの右側に追加する（普通に足すだけだと日時の後ろに来てカッコ悪い） ついでにタグとコメント数も非表示にする
BEMO ｜ 【Wordpress】カスタムタクソノミーでフィルター （絞り込み機能）ができるようにする
function.phpに下記を追加するとタクソノミーで記事を絞り込み検索が出来るようになります。 // カスタムタクソノミーでフィルター （絞り込み機能） add_action( 'restrict_manage_posts', 'add_post_taxonomy_restrict_filter' ); function add_post_taxonomy_restrict_filter() { global $post_type; if ( '●投稿タイプ英語●' == $post_type ) { ?> <select name="●タクソノミー英語●"> <option value="">カテゴリー指定なし</option> <?php $terms = get_terms('●タクソノミー英語●'); foreach ($terms as $term) { ?> <optio
ユダヤ式記憶術 口コミについて調べているのなら・・・ ｜ 口コミ・レビュー投稿 E-BOOKデータベース
ユダヤ式記憶術 口コミについて調べているなら、こちらのサイトをよく見たほうがいいです。 そして「試験に受かるユダヤ式記憶術」を購入したいと考えているなら、上記のサイトで、「試験に受かるユダヤ式記憶術」を使うことで何ができるのか、きちんと理解してからお求めになることをオススメします。 また、口コミや評価が書いてあれば、それもしっかりと見ましょう。 以下の「試験に受かるユダヤ式記憶術」についての情報も役立つかもしれません。 商品名称：「試験に受かるユダヤ式記憶術」 商品紹介：新タイプの記憶術。 従来のイメージ式記憶術を覆す。東大（文Ⅰ）から東大大学院卒業、外国語を４０ヶ国以上マスターし、数多くの難関資格に一発合格してきた著者が指南。 大学受験高校受験難関資格試験の最強の武器になる記憶術。新タイプの記憶術。 従来のイメージ式記憶術を覆す、難関試験向けの論理記憶術。 商品価格：17800円 商品提
PHPコード最適化高速化TIPSまとめ | Webエンジニアのメモ
TweetPocket PHPコード最適化高速化TIPSまとめPHP最適化 ベストプラクティス！ 参考url： http://d.hatena.ne.jp/koto2/20080518/1211070116 01. static にできるメソッドは static として宣言しよう。（4倍速い） 02. echo の方が print より速い。 03. echo ‘文’,’字’; （カンマ区切り）の方が、’文’.’字’ （ドット連結）より速い。 04. ループの最大値は、ループ「内」ではなく「前」にセットしておこう。 05. 大きい配列のような変数は unset() してメモリを解放しよう。 06. マジックメソッド（例： __get, __set, __autoload）は使用を避けよう。 07. require_once はハイコストなのです。 08. include や require
文字コード変換ミスによる文字化けパターンと想定される原因 - drk7jp
とあるシステムでデータベースから引いてきたデータの表示が文字化けするという不具合がありました。 データベース内のデータとしては文字化けしていない状態で格納されていることはわかっていたので、どこかしらの文字変換で化けていることはわかっています。まずはどの誤変換により文字化けするのか原因切り分けのために、decode/encode の組み合わせによる文字化けパターン一覧を作りました。おかげさまでどのパターンに類するものか判別することができ、無事に改修することができました。 その話はまた別にするとして、今も昔も変わらず文字化けに悩む人は意外と多いと思います。誤変換結果一覧は原因解析の参考になると思い、記事としてまとめることにしました。 文字コード変換ミスによる文字化けパターンを可視化するプログラムと一覧表 まずは誤変換を生成する perl スクリプトです。プログラムはとっても簡単で、「文字化けで
Wordpressで1秒切り！目を疑う高速表示の設定はこれだ！1時間で5万PVでも大丈夫 | iPhone 研究室
先日、Yahoo! ニュースからリンクして頂いたのを切っ掛けに、大量アクセスがありました。いつもは後で気がつくんですけど、たまたま Google Analytics のリアルタイム画面を開いたらその直前にアクセスが爆発していました。通称「Yahoo!爆弾」ってヤツですね。 【追記】現在はコアウェブバイタル対応を完璧にするため、もっとモダンな設定にしています。 iPhone 研究室は WordPress で運営していますが、全く動じないでこの大量アクセスをこなしてくれました。 11時半頃にリンクがあったみたいなんですけど、世の中がお昼休みに入った12時頃から更にアクセスが倍増しました。 だいたい、11時半から12時までの30分で2万ページビュー（PV）、12時から13時までの1時間だけで5万PV位の大量アクセスになりました。 新型iPhoneに関する噂という記事からのリンクだったので、興味を
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
WordPress で記事の公開期間を簡単コントロール！カスタムフィールドに開始・終了日時を指定するだけでOKのクラス
WordPress で記事の公開期間を簡単コントロール！カスタムフィールドに開始・終了日時を指定するだけでOKのクラス Dec 29, 2012 大規模・企業サイトでは必須 公開日時の範囲指定はマストですよね… プラグインを使うと独自の UI が追加されてしまって、あぁカスタマイズ工数が… とつらくなることもあります。そんなときに便利な、管理画面を作り込んである場合でも、WordPress デフォルトのままでも、カスタムフィールドで公開範囲の日時さえ指定すればあとはよろしくやってくれるクラスを作りました。 このコードをテーマの functions.php またはプラグインファイルに貼り付けるか、ファイル自体をインクルードします。クラスを有効にするには以下のように書きます。 add_action( 'after_setup_theme' , create_function( '', 'new
印刷対応サイト｜Webクリエイターネット
Category CSS Webサイトをブラウザ経由で印刷できるようにする場合、CSSで印刷用のスタイルを作成し、別途読み込ませることで対応する場合が多いと思います。 ですが、制作案件で完璧に対応するのは時間(工数)やコストもかかってしまうため、難しいのが現状かもしれません(私の場合、そうなんですよね...)。 そこで、今回の記事は、WEBページを制作する際、「できる限り印刷対応も意識した作りにしたい」と考えた時に、覚えておいた方がよい点を書き残しておこうと思います。 Keyword：印刷対応,@media print 対応するブラウザ・バージョンを選定する 全てのブラウザに対応できるのが望ましいのですが、それぞれのブラウザに実装されている印刷機能に関しても把握しておく必要があります。 ●Internet Explorer 印刷対応状況○ バージョンごとに表示が異なる場合が多い [特徴]
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
JavaScriptでうっかりやってしまいそうなこと色々
こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか？ String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Contact Form 7 よくあるカスタマイズ
