細かい文字列ノードが邪魔なら正規化 (normalize) してみては。（DOMおれおれAdvent Calendar 2015 – 11日目） | Ginpen.com
DOMおれおれAdvent Calendar 2015 – 11日目 画面上では連続したひとかたまりの文字列でも、実は複数の文字列ノードから成っている場合もあります。普通にHTML書いてもそうはならんのだけど、JavaScriptからあれこれ挿入したりするとそうなります。 var el = document.createElement('span'); for (var i=0, l=10; i<l; i++) { var t = document.createTextNode(i + ' '); el.appendChild(t); } console.log(el.childNodes.length); // => 10 // el = <span>0 1 2 3 4 5 6 7 8 9 </span> var el = document.createElement('span');
[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack
デモページ: フィールドセット FormHackの使い方 FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。 カスタマイズは、Sassファイルの上部にまとめられています。 /* FormHack v1.0.0 (formhack.io) */ // Config ----------------------------- // Font $fh-font-family: 'Raleway', sans-serif $fh-font-size: 16px $fh-font-color: rgb(40, 40, 40) // Borders $fh-border-radius: 5px $fh-border-width: 1px $fh-border-style: solid $fh-border-co
![[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack](https://cdn-ak-scissors.b.st-hatena.com/image/square/db8b9840475a6890e8fd894a96d4d6cf1d2d7f90/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060801.png)
異なるサイズが混在するPDFをそれぞれのサイズでまとめて印刷する方法
異なるサイズが混在するPDFを、それぞれのサイズでまとめて印刷する方法を紹介します。 １．問題点 次のように異なるサイズが混在するファイルがあります。 （クリックで拡大） これを一回の印刷でそれぞれのサイズにあわせて印刷したいのですが、印刷する方法が分かりません。 ２．混在するPDFをまとめて印刷する 混在するPDFをまとめて印刷するには、次の手順で操作します。 メニューから「ファイル」→「印刷」をクリック。 「印刷」ダイアログボックスの「ページ処理」セクションで、「PDF のページサイズに合わせて用紙を選択」にチェックを入れます。 （クリックで拡大） なお「ページの拡大 / 縮小」の設定をいろいろ変えてみましたが、影響はないようです。 これで、各ページのサイズに応じてプリンタの出力トレイが切り替わります。 ちなみに、PDFに出力するときも同様の手順で各ページのサイズを変更せずに出力するこ
ボックスの高さを一番高いものに合わせる
Result jQueryvar maxHeight = 0; //もしdivがmaxHeightの値より大きい場合はdivの高さを全部合わせる $("div").each(function(){ if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } }); //divの高さを取得する $("div").height(maxHeight);cssdiv{ height:auto; width: 70px ; background:#eee; margin:3px; float:left; }html<div>1<br />2<br />3<br />4<br />5</div> <div>div</div> <div>div</div> <div>div</div> <div></div> <div>1<br
[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
rel=canonical 属性に関する 5 つのよくある間違い
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
複数ブックマークレットを一纏めに・「Bookmarklet Combiner」
Bookmarklet Combinerは複数のブックマークレットを一つのブックマークレットに纏めてくれるWebツールです。多数のブックマークレットを使用しているなら使う価値はありそう。 Bookmarklet Combiner
複数のページを1ページにまとめて表示するFirefoxアドオン「AutoPager」
複数のページを1ページにまとめて表示するFirefoxアドオン「AutoPager」を紹介します。 １．機能 このアドオンを適用すれば、複数ページにまたがるページを1ページにつなげてくれます。スクリーンショットはGoogleの検索結果です。 適用前 適用後 ある程度スクロールをするとページが読み込まれます。読み込むページ数は設定メニューで決めておくことができます。 ２．インストール 「AutoPager」のページにアクセスして、「Add to Firefox」のリンクをクリックすればダウンロード画面が表示されます。 ３．設定 アドオンを有効にしたあとサイトを閲覧すると、ページの上部に「このサイトでこの設定を使いますか？」というバーが表示されます。「はい」をクリックすればスクロールによってページがどんどん表示されるようになります。 オプションをクリックすれば次のようなメニューが表示されます。
クロスドメイン URL の選択 - 複数のドメイン間の重複コンテンツの正規化について
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
[JS]複数行の異なる高さのブロックをそれぞれ同じ高さに揃えるスクリプト
画像のサムネイルやテキストを配置したボックスなど、異なる高さのブロックが数多くあっても全ての高さを等しく揃えるスクリプトを紹介します。 Equal Height Blocks in Rows 一行目と二行目では、違う高さで揃えていることに注目してください。 [ad#ad-2] デモでは異なる高さのブロック（スクリプトオフ時）が、スクリプトによって行ごとに同じ高さに等しく揃えています。 デモページ 実装のアイデアとなったのは、「Making DIVs, using the CSS "Float Left" property...」とのことで、そのdiv要素がどの横列に属しているか調べ、その中で一番高いものに揃えています。 [ad#ad-2] 実装方法 HTML 画像やテキストを配置できるdiv要素を使用しています。 <div id="page-wrap"> <div></div> <div>
ブラウザ標準の正規表現を拡張し、差異もなくしてくれるJavaScriptライブラリ「XRegExp」:phpspot開発日誌
XRegExp: JavaScript regex library ブラウザ標準の正規表現を拡張し、差異もなくしてくれるJavaScriptライブラリ「XRegExp」。 各種ブラウザで共通に使えるよう設計されており、追加機能やプラグインも実装できるみたい。 たとえば、次のように、分かりやすい正規表現でURLを分割したりすることができる模様。 APIのドキュメントはこちら。 標準の正規表現では満足いかないという方は参考にしてみるとよいかも。
[CSS]モバイル端末にも対応、ブラウザごとに異なるデザインのフォームを美しくするフレームワーク -Formalize CSS
既存のフォームにも簡単に適用できる、各ブラウザ、各OSや各モバイルごとのフォームの異なるデザインのギャップを埋め、美しくするフレームワークを紹介します。 Formalize CSS デモページ [ad#ad-2] サポートしているOSはWindow, Mac OS X, Linux、ブラウザはIE6/7/8/9, Firefox, Chrome, Safari, Opera、モバイルはAndroid, iOS(iPhone, iPad)などです。 下記のキャプチャは、Windows XP + Firefox 3.6のものです。 他の各ブラウザやモバイルでの表示は、元記事の下部「Screenshots」に掲載されています。 Formalize CSS Formalize CSS：ノーマル時の表示
[JS]カラムの高さを揃える多機能なスクリプト -Equal Column Heights
カラムの高さを単に揃えるだけでなく、アニメーションで揃えたり、指定した値に揃えることができるスクリプトを紹介します。
rel=
rel="canonical"（属性）は、検索エンジンにインデックスさせたいURLを認識(正規化、canonicalization）させるために使用される「link要素の属性に指定する値」です。 ウェブサイトは長らく運営していると、コンテンツの追加や削除、移動、改修等を行っていくうちに、異なるURLで同一のコンテンツが存在してしまうことがあります。 （例：ECサイトの商品一覧ページにおける価格順や人気順といった並び替えページ、印刷用ページとWeb閲覧用のぺージなど） こうした場合、検索エンジンは同一の検索結果画面に同一コンテンツを保有するページが複数表示されないように、最も適切なURLを選択し、その他のURLを除外します。この時、サイト運営者が希望するURLが必ずしもインデックスされるとは限りません。 この処理をサイト運営者側でコントロール可能にする方法の1つがrel="canonical
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
重複コンテンツが発生してしまう19の具体的なパターン - 重複コンテンツ対策完全ガイド #3 | Moz - SEOとインバウンドマーケティングの実践情報