リストを自動で3列に分ける
Result リストを自動で任意の列数に振り分ける、みたいなの。マルチカラムレイアウトを使います。 リスト分けたいだけならテキストコンテンツのようにbreak-insideやpage-break-insideを考えなくていいので楽ですね。 CSSではなくJavaScriptを使う方法は過去に書いてます。jQueryを使いますが・・ →リストを任意のカラム数に分ける css.columns {/*分けたいリストの親要素に指定する。column-countはカラム数*/ column-count: 3; column-gap: 26px; list-style: none; margin: 0; padding: 0; }html<ul class="columns"> <li> <label> <input type="checkbox" />1 lorem ipsum </label> <
イメージスライダーを魅力的に！コピペ実装できるHTMLスニペット24個まとめ
ウェブサイトでも使われることが多く、写真イメージをより魅力的に見せることができるイメージスライダー。ヒーローヘッダーとして利用されることも多く、イメージスライダーを効果的に利用することで、ウェブサイトを訪れたユーザーにより魅力的にコンテンツを見せることもできます。 今回は、ウェブサイト制作で利用したいイメージスライダーをまとめてご紹介します。どんな案件にも対応できる万能コードから、ユーザーをあっと驚かすインタラクティブなものまで幅広く揃えています。またHTMLコードはコピー&ペースト可能で、同時にカスタマイズもできてしまうので、今後のウェブ制作に役立ててみてはいかがでしょう。 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ 垂直型イメージスライダー くるりと回転したり、スクリーン
[CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ
Webはその進化が早いと言われ、中でもCSSは日々、新しいテクニックや驚くべき実装方法が発表されています。新しいものに目を向けることはもちろん大切です。しかし、すでに利用可能なもので見落としている有用なテクニックがあるかもしれません。 有用なのに、意外と見落とされがちなCSSのテクニックを紹介します。 9 Underutilized Features in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レスポンシブ対応に便利な「calc()」 2. 目からウロコの「@media」の使い方 3. カラー指定を変数でおこなえる「currentColor」 4. フォームにかなり便利「:valid, :invalid, :empty」 5. ナンバリングするためにol要素は必要ない「counter」 6. 中身が不明な
![[CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/11d487ffaa0d8f97196e7f7cedd83ea94e889a64/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016102601.png)
固定ページで子ページのリンクやタイトル、抜粋を一覧表示させるショートコード
固定ページで子ページを持つ親ページに使うショートコード。子ページを一覧表示させる。 出力されるマークアップは$outputの中身ですので変えたい場合はここを弄れば良いですね。
WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する
WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する ※2013-11-16更新 ブログの記事の下に表示してる関連項目にサムネイルも表示したかったのですが、LinkWithin では精度が物足りませんでした。 Similar Posts でのサムネイルの入れ方がわからずテキストのみで放置だったところ、ウェビメモさんの記事でみごと解決させていただきましたのでそのメモです。 いま製作中の別サイトで、関連記事を各投稿の下にサムネイル付きで表示させたかったんですが、 Similar Postsの設定でいくら{image}と書いてもまったく全然サムネイルを取得してくれなかったので phpを使って表示させてやりましたよ！！！！同じ現象で困ってる人はこの方法を試してみてください！！ 関連記事のプラグインSimilar Postsでサムネイル表示がうまくい
Movable TypeのMTEntriesタグで特定の複数ブログ記事を出力する方法
Movable TypeのMTEntriesタグを使って特定の複数ブログ記事を出力する方法を紹介します。 １．基本 MTEntriesタグは複数のブログ記事を出力するためのテンプレートタグです。 次のように記述すれば最新の10件のブログ記事タイトルを出力します。 <mt:Entries limit="10"> <$mt:EntryTitle$> </mt:Entries> MTEntiresタグには、特定のブログ記事IDを出力するために、idモディファイアが用意されています。 例えば、ブログ記事ID「100」の情報を出力するには、次のように記述します。 <mt:Entries id="100"> <$mt:EntryTitle$> </mt:Entries> ただし、この方法では1つの記事しか出力することができません。 ２．特定の複数ブログ記事を出力する 公式ドキュメントには解説されていま
Movable Typeの記事一覧にユーザー名を表示する「DisplayAuthorNameプラグイン」
Movable Typeの記事一覧にユーザー名を表示する「DisplayAuthorNameプラグイン」を公開します。 １．機能 次のように「ユーザー名：bar」「表示名：foo」のユーザーが登録されていると仮定します。 Movable Typeのデフォルトの状態では、ブログ記事やウェブページ一覧に表示される「ユーザー」は、ユーザー作成時の「表示名」である「foo」になります。 このプラグインを利用すれば、ユーザー作成時の「ユーザー名」である「bar」を表示できるようになります。 既存の「ユーザー」フィールドも使えます。 ２．プラグインのダウンロード・インストール 下記のリンクをクリックして、プラグインアーカイブをダウンロードします。 DisplayAuthorName_0_01.zip プラグインアーカイブを展開し、pluginsフォルダにあるDisplayAuthorNameフォルダを
[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions
画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.js"></script> <script src="js/jquery.hcaptions.js"></script> Step 2: スクリプトの準備 キャプションを表示に付与するclassを定義します。 $(window).load(function(){ $('.hcaption').hcapt
[CSS]レスポンシブ対応、ナビゲーションを水平の真ん中に配置するテクニックのまとめ
リスト要素で配置したナビゲーションをページの中央にフィットさせ、水平方向の真ん中に配置するスタイルシートのさまざまなテクニックを紹介します。 それぞれの利点や欠点、実装のポイント、対応ブラウザなど、今すぐに役立つテクニックです！ How to shrinkwrap and center elements horizontally デモ 実装: display:inline-block 実装: position:relative 実装: display:table 実装: display:inline-flex デモ デモは上から display:inline-block, position:relative, display:table, display:inline-flexで、ナビゲーションを水平の真ん中に配置しています。 デモページ：幅780pxで表示 実装: display:inl
Movable Typeのテンプレート一覧でテンプレートの並び替えができる「DraggableListTemplateプラグイン」
Movable Typeのテンプレート一覧で自由に並び替えができる「DraggableListTemplateプラグイン」を公開します。 １．機能 Movable Typeのテンプレート一覧画面・ウィジェット一覧画面のテンプレートやウィジェットについて、ドラッグ＆ドロップで自由に並び替えることができます。 並び替える前の状態 ドラッグ＆ドロップ 並び替えた後の状態 並び替え以外の主な機能等は下記のとおりです。 並び替えた状態はブログID別にcookieに保存するので、次回読み込み時も状態を保持します 並び替え後にテンプレートが追加された場合、リロード時にテンプレート一覧の一番下に表示します テンプレートの削除にも対応しています 異なる種別のテンプレート一覧にドロップすることはできません システムテンプレートは対象外です ２．価格 3300円/1インストールMT（税込み）。お試しはご自由にど
jQuery Endless Div Scroll | Codicode
Usage : $(window).load(function () { $("#divID").endlessScroll({ width: '100%', height: '100px', steps: -2, speed: 40, mousestop: true }); }); Parameters : width : Desired div's width. height : Desired div's height. steps : pixel step for the scrolling, also controls the direction, a negatif value (left), a positive value (right). speed : animation speed, from 0 (quicker) to infinite (slower). mou
DAD UNION – エンジニア同盟｜世のエンジニアを手助けするテック系サイト
JavaScript JavaScriptで簡単にBase64エンコード＆デコードの完全ガイド 2024-06-10 dad-union
関連記事のプラグインSimilar Postsでサムネイル表示がうまくいく方法
いま製作中の別サイトで、関連記事を各投稿の下にサムネイル付きで表示させたかったんですが、 Similar Postsの設定でいくら{image}と書いてもまったく全然サムネイルを取得してくれなかったので phpを使って表示させてやりましたよ！！！！同じ現象で困ってる人はこの方法を試してみてください！！ 使用したプラグイン 今回使用したのは関連記事を表示できるプラグインSimilar Postsです。 サムネイル設定以外のこまかい設定方法は以下の記事で解説されています。 カスタムフィールドを使ったサムネイルの表示方法も解説されているので、元々カスタムフィールドを使用している方はそちらの方法がおすすめです！ 参考：関連記事をサムネイル付きで表示できるWordPressプラグイン – ミblog : レビューや日常など 早速結論を。サムネイルを取得できる記述方法！ カスタムフィールドは使いません
WordPressで前後記事の一覧を出力する「wp_previous_next_post_linksプラグイン」
WordPressで前後記事の一覧を出力する「wp_previous_next_post_linksプラグイン」を公開します。 １．機能 現在の記事の直前または直後の記事情報を出力するには、previous_post_link()タグまたはnext_post_link()タグを使えばいいのですが、たとえば「現在の記事の前後5件ずつの記事を表示」といった場合、このテンプレートタグでは実現できません。 本プラグインを利用すれば、スクリーンショットのような現在の記事の前後記事のリストを出力することができます。 記事「test6」の前後記事を最大5件表示（test1が最も古い記事、test11が最新記事） 記事「test5」に移動した前後記事一覧の表示 記事「test7」に移動した前後記事一覧の表示 プラグインの動作はWordPress3.5で確認しています。古いバージョンでは正常に動作しない可能
DAD UNION – エンジニア同盟｜世のエンジニアを手助けするテック系サイト
JavaScript JavaScriptで簡単にBase64エンコード＆デコードの完全ガイド 2024-06-10 dad-union
WordPressの「wp_get_archives」のMT版タグ「MTGetArchives」
WordPressの「wp_get_archives」のMT版タグ「MTGetArchives」を作ってみました。 MTGetArchivesタグは、WordPressの「wp_get_archives」とほぼ同等の機能があります。 １．開発の経緯 WordPressの「wp_get_archives」タグは、月別アーカイブ一覧や記事一覧などのHTMLマークアップを返却するようになっています。 例えば次のように記述すれば、12ヶ月分のリストを出力します。 <ul> <?php wp_get_archives('type=monthly&limit=12'); ?> </ul> これと同じリストをMTのテンプレートタグで出力しようとすると次のようなテンプレートを用意する必要があります。 <ul> <mt:ArchiveList type="Monthly" lastn="12"> <li><
角が丸いグループのCSSを組むチュートリアル。あのiOSっぽいやつ。（CSS おれおれ Advent Calendar 2012 – 04日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 04日目 iOSでよくみるあのメニューっぽいのをCSSで組んでみたいと思います。 必要になる知識はこんな感じ: border-radius :first-child, :last-child box-shadow デモ 先に完成品です。 作り方 HTML グループを括る要素と各項目の要素が必要です。 何でも良いですが、今回は愚直にul>liにして、ulの方にクラス名を与えました。 最初のCSS まずは枠を用意します。 全体を括る枠があるのですが、ulではなくliの方に付けます。そして項目の境界部分が太くならないよう、下側を空けます。 ここで:last-childというのが出てきました。疑似クラスというやつで、:hoverの仲間です。この場合は「兄弟の中で最後のもの」を指します。 兄弟？ あ、「兄弟」とかわかりますかね？ HTM
jQuery UIで使えるアイコンの名前を調べるためのチートシート・jQuery UI icon name map - かちびと.net
jQuery UIで用意されてるアイコン のチートシートです。使用頻度が 高いならチートシートを持ってお くと便利かもしれません。調べる の面倒ですしね。自分のようにたま にしか使わないなら不要ですが。 と言うわけでjQuery UIにプリセットされているアイコンの名前を調べるためのチートシート。PDFで保存するやつです。 カテゴリ分けされてます。jQuery UIの使用頻度が高いならあると便利ではないでしょうか。PDF版もDL出来ます。 ul li.ui-icon-carat-1-ne{ padding: 4px 0; } こんな感じで使います。 class名はgooglecodeでToggle textをクリックすれば確認できるっちゃ出来ますが、手元に置きたいと言う方はチートシートの方が便利かも。 お好みでどうぞ。 jQuery UI icon name map
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
12 CSS Lists Styling - csshint - A designer hub
管理画面の記事/固定ページ一覧のテーブルにIDの列を加える - かちびと.net