リストを自動で3列に分ける | かちびと.net
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
要素の横並び＋複数行ならflex-wrapが便利 - コンパイラかく語りき
CSSのflex-wrapを最近知ったのでメモ。 display: flex; で要素を横並びにしつつ、２行や３行にしたいときがあるじゃないですか。そんなときに便利です。 flex-wrap指定なし まず、flex-wrapの指定が無いバージョン。display: flex;のみ指定。flex-wrapの値はデフォルトのno-wrapになります。 gistabb6fdc10b786d856f22 すると、子要素（div.box）のwidth: 200px;が無視されます。画面に１行に収まるようにwidthが自動調整されるのです。 flex-wrap: wrap;措定 次に、flex-wrap: wrap;を指定します。 すると、子要素のwidthは200pxのままで横並びになります。改行が許容されるので、溢れでた子要素は次の行に落ちます。 良かったですね！もうfloatを使う必要はありませ
画像をFacebookやTwitter等のソーシャルサービスに投稿できる様にするjQueryプラグイン・Slingpic - かちびと.net
画像のみをシェア出来るようにするjQueryのプラグイン、というかWebサービスのご紹介です。プラグインではあるんですけどCDNで提供している、みたいなやつ。 画像を様々なソーシャルサイトで共有出来る様にするためのjQueryのプラグインです。ファイルをDLするのではなく、CDNを使って導入するのでタイトルは語弊があるかもしれませんけど、語彙に欠けるせいか上手い言葉が見つかりませんでした。御免なさい。 上図を見ればどんなものかはおおよそ把握出来るかと思いますが、マウスホバーでシェアボタンが表示されるようにする、というスクリプトです。 Sample 動作サンプルです。 コード 上記のようにCDNをコピペさせるページがあるのでそのまま使います。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.
CSS3 PIEでIEでも背景に複数の画像を使用する | ライラックミモザライラックミモザ
ホームページ制作（Webデザイン、HTMLコーディング、WordPressカスタマイズ、ライティング）の「ライラックミモザ」 仕事でHTML5／CSS3を本格的に使用しはじめました。 HTML5にしても、CSS3にしても、まず悩ましいのがIEへの対応。もちろん、IEを対応させないわけにはいかず、CSS3をIEで使用するために、コリスさんの「たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE」で紹介されていた「CSS3 PIE」というスクリプトを利用しました。 下記はCSS3 PIEの簡単な使用法と備忘録です。 CSS3 PIEでできること CSS3 PIEは、現在CSS3のすべての機能を実現できるわけではありませんが、下記の機能に対応しています。 ・border-radius（角丸） ・box-shadow（シャドウ） ・border-image（境界線に画像
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つの記事しか出力することができません。 ２．特定の複数ブログ記事を出力する 公式ドキュメントには解説されていま
[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js
複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。 タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート コンテンツにあったページタイトルを表示 戻る・次へボタンのサポート コンテンツのネストをサポート スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意 AJAXサポート Google Analytic
Movable Typeの日付カスタムフィールドを2つ使って「開催中」を表示する方法
Movable Typeの日付カスタムフィールドを2つ使って「開催中」を表示する方法を紹介します。 １．概要 先日「Movable Typeの日付カスタムフィールドを使って現在時刻と比較する方法」を紹介しましたが、本エントリーではカスタムフィールドに設定した開始日と終了日をチェックして、現在の日付が期間内であれば「開催中」と表示します。 下のスクリーンショットは「最近のブログ記事」の右側に状況を表示させてみたものです。 完成例 前のカスタマイズ同様、jQueryを使ってリアルタイムに判定します。 ２．事前準備 次のようなカスタムフィールドを事前に2つ作成してください。 まず、開始日用のカスタムフィールドです。 システムオブジェクト：ブログ記事 名前：開始日（任意の名称でOK） 種類：日付と時刻 オプション：日付と時刻 ベースネーム：（任意の名称） テンプレートタグ：EntryCFStart
[JS]1.9から仕様が大きく変わったjQueryの複数のバージョンでのテストを簡単にできるスクリプト -version.js
jQueryは1.9から大きく仕様がかわり、プラグイン開発者やウェブ制作者は今まで以上に各バージョンの互換性に苦労するようになりました。 たった一行加えるだけで、jQueryの複数のバージョンでのプラグインやウェブサイトの動作テストを簡単にできるスクリプトを紹介します。 ※jQuery以外のスクリプトにも対応しています。 デモページ version.jsの使い方 使い方は簡単！ テストページに一行加えるだけです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="version.js" data-url="google" data-lib="jquery" data-ver="1.5.0"></script> Step 2: スクリプトの実行 あとはjQueryのバージョンをパラメータに付与し、ページをロードするだけです。 http://
複数ブックマークレットを一纏めに・「Bookmarklet Combiner」
Bookmarklet Combinerは複数のブックマークレットを一つのブックマークレットに纏めてくれるWebツールです。多数のブックマークレットを使用しているなら使う価値はありそう。 Bookmarklet Combiner
[JS]スライド内の複数の要素それぞれに異なるアニメーションを設定できるスライダー -Fraction Slider
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。 デモ：Animation Basic それぞれ対角にアニメーションでスライドします。 Fraction Sliderの使い方 実装は非常にシンプルです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="fractionslider.css"> <script src="jquery-1.9.0.min.js" type="text/javascript"></script> <script src="jquery.fractionslider.js" type="text/javascript" ></script>
Movable Typeで承認ワークフローを実現する「Workflowプラグイン」
Movable Typeで承認ワークフローを実現する「Workflowプラグイン」の紹介です。 （クリックで拡大） このプラグインは書籍「Movable Type 5.1プロの現場の仕事術」のために数ヶ月かけて開発したものです。 動作が多岐にわたることと状態遷移が複雑なため、開発するにあたって設計から行いました。 ネットではすでに公開しているのですが、これまでブログで一度も紹介したことがありません。その割にかなり多くの方々に使っていただいてます。 ということで、本エントリーでも改めて紹介したいと思います。 １．主な機能 本プラグインで用意した権限を利用したロール「ライター（承認つき）」と「承認者」を使って、ブログ記事・ウェブページの承認ワークフローが行えます。 以下、ワークフローの流れです。 ライターは承認者に承認依頼を行う場合、記事の状態を「未公開（承認待ち）」にします。 同時に、承認者
jQuery multiselect
I'm a user-friendlier drop-in replacement for the standard <select> with multiple attribute activated. Free (under WTFPL license) Works in an unobtrusive fashion Fully open sourced Keyboard support Provides some callbacks Fully customizable via CSS Depends on jQuery 1.8+ Tiny code ~8kb minified HTML <html> <head> <link href="path/to/multiselect.css" media="screen" rel="stylesheet" type="text/css">
様々なスタイルのツールチップを実装できるスクリプト・opentip
様々なスタイルでツールチップを実装する為のJavaScriptフレームワーク・opentipのご紹介です。噴出しの形状や表示場所、Ajax対応など、状況に応じて実装する事が出来ます。 ツールチップ実装用のJSライブラリです。様々なスタイルで実装可能です。 ツールチップのJSフレームワークです。OSSとして公開されています。 複数のツールチップを一括で出すことも可能です。 <div data-ot="Shown after 2 seconds" data-ot-delay="2"></div>カスタムデータ属性でセッティングできるみたい。 new Opentip("#foobar", "Shown after 2 seconds", { delay: 2 });上記のようにAPIを使用する方法でもOKとの事。 ライセンスはMITです。詳細は以下よりどうぞ。 opentip
[JS]多彩なアニメーションを備えたスライドショーがスクリプトを一行も書かずに実装できるスクリプト -Cycle.js
スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。 こういう実装方法がこれから増えてくるかもしれませんね。 Cycle.js Cycle.js -GitHub 対応ブラウザは下記の通り。 IE8+ Chrome Firefox Safari Opera TODOとして、ARIAのサポート、キーボード操作、IE7対応、エフェクトの追加を予定しているそうです。 いつもは、デモ、使い方、の順番で紹介していますが今回はデモと使い方を併せてご紹介。 Cycle.jsのセットアップ Cycle.jsのバリエーション Cycle.jsのセットアップ ベースとなるHTMLは非常にシンプルです。 スタイルシートをhead内に、スクリプトを</body>の上に外部ファイルとして記述します。 <title>Cycle.js</titl
複雑な条件の画像リサイズがドラッグ＆ドロップで完了、事前に4つの設定を保存して組み合わせ可能な「VarieDrop」
4つのリサイズ設定が保存できるので、決まった処理をする場合に設定変更をする手間が省くことができ、操作はドラッグ＆ドロップで簡単に実行できるフリーソフトが「VarieDrop」です。出力フォーマットはGIF・BMP・PNG・JPEG・GIF・TIFFで、Windows XP・Vista・7・8上で起動可能となっています。 ダウンロード、インストール、設定・操作方法については以下から。 Software - Vieas Web http://www.vieas.com/en/soft.html 上記サイト中段のVarieDrop項目にある「EXE」をクリック。「ZIP」も選択できます。 ダウンロードしたインストーラーを実行。 「OK」をクリック 「次へ」をクリック 上にチェックを入れて、「次へ」をクリック 「次へ」をクリック 「次へ」をクリック 「次へ」をクリック 「インストール」をクリック
[JS]簡単で便利でしかもかっこいい！ソーシャルメディアのボタンを複数パターン同時に設置できるスクリプト -#50C1AL
ページ上のボタンやテキストなどにclassを追加するだけで、簡単にソーシャルメディアのボタンをかっこよく設置できるjQueryのプラグインを紹介します。 #50C1AL #50C1AL -GitHub #50C1ALの特徴 #50C1ALのデモ #50C1ALの使い方 #50C1ALの特徴 主要なソーシャルディアを簡単にウェブページに設置できます。 46種類のかっこよくデザインされたアイコンを用意。 ページへの設置は、classを書くだけ！ 同じページに複数の設定を設置可能。 アニメーションやブラーなど多彩なオプション。 #50C1ALのデモ デモでは、ページ内に2つの設定を配置しています。 まずは、ボタンの方から。 テキスト選択で表示 #50C1ALの使い方 Step 1:外部ファイル まずは、head内に外部スタイルシートを配置します。 <link rel="stylesheet" h
ドロップシャドウのバリエーションを増やしたい人用、ボックスに美しいさまざまなシャドウを適用した画像素材
昨日の記事でも扱ったシャドウの美しい繊細な画像素材を紹介します。 シャドウも単にボックスの下につけるだけでなく、さまざまなパターンがあります。
webcreatornote.com - webcreatornote リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
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で確認しています。古いバージョンでは正常に動作しない可能
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#