ほぼ Internet Explorer のサポートが終わったことで、気兼ねなく CSS Grid レイアウトが使えるようになりました。 Bootstrap のような擬似的なものではなく、display: grid / display: inline-grid をつかうことで、自在にレイアウトできるようになります。
![ツクメモ - ウェブやアプリをツクるヒトのメモ](https://cdn-ak-scissors.b.st-hatena.com/image/square/6146b2eef9d743bb5148624deae9748e750a3791/height=288;version=1;width=512/https%3A%2F%2Ftukumemo.com%2Fwp%2Fwp-content%2Fthemes%2Ftukumemo%2Ffavicon%2Fogp.png)
レスポンシブサイトではウィンドウの幅(画面解像度)によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ(画面幅/高さ)の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
ウェブページにPDFを直接表示する方法を紹介します。 1.はじめに PDFをブラウザで表示するには、単純にPDFファイルのURLを記述すればOKです。 ウェブページにそのURLをリンクとして記述すれば、ウェブページからの閲覧も可能です。 が、PDFファイルを直接ウェブページに表示したいこともあると思いますが、その方法が分かりません。 ということで、ウェブページにPDFを直接表示する方法を紹介します。 2.ウェブページにPDFを直接表示する ウェブページにPDFを直接表示するには、PDF.jsを利用します。 PDF.jsのページにアクセスして「Download」をクリック。 ダウンロードした「pdfjs-1.4.20-dist.zip(2016年7月時点のバージョン)」を展開します。 展開した中にあるbuildフォルダとwebフォルダをすべてアップロードします。 そしてHTML(index.
:before, :after, :last-child, :nth-child, :not など疑似classを使った小技、レスポンシブ用のレイアウトやフォントのサイズ指定など、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 前回紹介した時は12個でしたが、アップデートされ、20個まで増えています。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区切りにする 5. ネガティブな「:nth-child」を使用してアイテムを選択 6. SVGファイ
説明 2日にわたって投稿した「query_posts(WP_Queryクラス)でカテゴリーを絞り込む」「query_posts(WP_Queryクラス)で投稿タグを絞り込む」の続き。今日はカテゴリーや投稿タグ以外ののタクソノミーによる絞り込み、複数のタクソノミーの絞り込みの組み合わせについてまとめてみる。 そもそも一連の投稿のきっかけになったのは、新テーマ「Twenty Eleven」の短冊ウィジェットがきっかけだった。その部分はこちら。 'tax_query' => array( array( 'taxonomy' => 'post_format', 'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-status', 'post-format-quote' ), 'field' => 'slug
個人で制作している「食!相模原」というサイトで、 場所とジャンル(例えば、中央区、ラーメンなど)で検索をしたいため、 検索条件のカスタムが必要になります。 当初「Search Everything」というプラグインを使っていましたが、 検索結果が完全一致ではないため、どちらかの検索条件で全てがヒットしてしまいます。 というわけで、プラグインを無効にして、 カスタム方法を探していたところ、下記のサイトを見つけました。 検索対象にカスタムタクソノミーの文字列も含めたい こちらのカスタムが使えたので備忘録として残します。 検索条件を追加するための詳しい説明については、上記サイトをご参照ください。 ます、上記のサイトを参考に検索結果を表示するsearch.phpに下記のソースコードを挿入しました。 <?php //検索キーワードを取得 $keys = get_search_query(); //ス
先日、「WordPress 3.1 RC3 をみんなでテスト! 」に参加し、その際、複数カスタムタクソノミークエリー(en. Multiple Taxonomy Handling)のテストを担当させてもらいました。 ついでに、仕様などについても探ってましたので、まとめてみることにします。 複数タクソノミークエリーとは なるべく正確に言うと、query_posts または get_posts の引数に新たに設けられた tax_query により、カテゴリー、タグ、カスタムタクソノミー等による記事抽出条件を、複数かつ様々なパラメータで細かく設定できる機能。 tax_query の値は、抽出条件毎の配列と各条件の結合方法(パラメータ名:relation)で構成される。 こう書いても、分かりにくいと思いますので、もっとかみ砕いて、粉状にして言うと「これさえ憶えておけば、WordPressでの絞り込
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く