CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
無料で複数アプリの音量を個別に設定＆再生デバイスをサクッと切り替え可能な高機能音量ミキサー「EarTrumpet」レビュー
Windows 10に標準搭載されている音量ミキサーは、「こっちのアプリではちょうどの音量なのに、別のアプリでは音量が大きすぎる」といったことがままあります。アプリを切り替える度に音量を調節したり、アプリ側の音量ミキサーを細かく調節したりと、複数のアプリを使えば使うほど自分にとってピッタリな音量を設定するのは面倒なもの。「EarTrumpet」ならそんな使い勝手の悪さをズバリ解決してくれるとのことで、実際に使ってみました。 EarTrumpet を入手 - Microsoft Store ja-JP https://www.microsoft.com/ja-jp/p/eartrumpet/9nblggh516xp 上記のMicrosoft Storeにアクセスし、「入手」をクリック。 アプリケーション版Microsoft Storeが起動するので、「入手」をクリックします。 Microso
無料＆ユーザー登録なしで使える複数人でのスケジュール調整も簡単に行える「Meetifyr」を使ってみた
年末の忘年会シーズンがやってきましたが、複数人の予定を合わせるスケジューリング作業は想像以上に面倒なもので、参加者の数が多くなればなるほど「結局どの日が都合良いんだ？」と頭の中がぐちゃぐちゃになってしまいます。そんな時に役立つサービスが「Meetifyr」で、無料＆ユーザー登録なしで簡単に複数人の予定を確認していろいろなイベントを開催するのにベストな日程を導き出してくれます。 Meetifyr | Get Your Friends Together http://www.meetifyr.com/ 「Meetifyr」を使うには、上記URLにアクセスして「Get Scheduling！」をクリック。 移動した画面で、開催予定のイベントに関する情報を入力して、参加予定の人たちに「どの日にちだと参加できるのか？」を聞くためのページを作成します。 まずは画面上部の「What」にイベント名を入力。
イメージギャラリー等で使うようなグリッドレイアウトでアイテムの数に関係なく幅を揃えてくれるスクリプト・「Layout Balancer」
Layout Balancerはイメージギャラリー等でよく使われているグリッドレイアウトで、アイテムの数に関係なく幅を揃えてくれるスクリプトです。jQueryに依存しています。語彙が乏しいのでうまく説明出来ないのでサンプルを上に用意しました。動的に数が変わるようなコンテンツでも空の部分が出ないようにしたい、という目的のようですね。コードもシンプルで良い感じです。 Layout Balancer
[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
横長になったtable要素を2列にしてスマフォ等の小さい画面でも閲覧出来るようにするjQueryプラグイン・stacktable.js
横長になったtable要素を2列にして スマフォ等でも閲覧しやすくできる、 というスクリプトです。単純な作り のtableならこれで対応できますね。 複雑なものはちょっと難しそうでは ありますが・・ table要素をスマフォのような幅の狭いデバイスでも閲覧出来る様にする、というライブラリ。 tableのレスポンシブ対応方法はよく見かけますが、最適とはいえません。なかなか難しいですね。こちらもシンプルな作りのtableに限ります。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="stacktable.js" type="text/javascript"></script>本体とスクリプトを読み込んで $('#foo').stacktable();初期
jQuery UIを使ったタブの数が多くてもレイアウトを崩さないようにするスクリプト・plusTabs
jQuery UIを使ったタブコンテンツ でタブ数が多数有ってもレイアウト を崩さないようにドロップダウン化 するスクリプトです。確かにちょっ と問題だったのでありがたいです。 ドロップダウン+タブメニューという 感じ。 タブでコンテンツをその場で切り替える、という手法はかなり一般的になりました。ブログなどでもサイドカラムでよく見られますね。 ただ、そのタブ数が増えてしまうとボタンが収まりきらずにレイアウトを崩してしまうので複数用意したり、という事で対応している事がしばしばですが、そのタブ数が増えても一箇所に収められるようにしたのが今日のスクリプトです。前置き長いですね。 動作サンプルです。通常横並びになるタブがドロップダウン内に一纏めになっています。通常のタブはワンクリックで済むのに対してこれだともう一回クリックする必要があるので数が少ないと逆効果ですが、数を気にせず1箇所にこうして収め
jQuery plugin: Easy List Splitter
jQuery plugin: Easy List Splitter - Version 1.0.2 Create multiple lists from a single list ordering the items vertically You can choose the number of lists you want to create. The plugin will order the list items vertically by default. In this first sample we've splitted our list into 3 lists: Lorem ipsum 1 Donec pede 2 Fringilla vel 3 Eget arcu 4 In enim 5 Lorem farem 6 Pede justo 7 Vel aliquet 8
複数の画像のレイアウトを自動化できるPhotoshopのエクステンション -Tych Panel
あらかじめ設定したサイズにフィットするように複数の画像を配置するPhotoshopのエクステンションを紹介します。 Tych Panel [ad#ad-2] Tych Panelとは Tych Panelのインストール Tych Panelとは Tych Panelは写真などの画像のレイアウトを自動化するPhotoshopのエクステンションで、レイアウトの設定は事実上無限です。 下記のようなレイアウトも1クリックで簡単にできます。 Tych Panel -ギャラリー 背景色や角丸にも対応。 [ad#ad-2] Tych Panelの主な特徴 横・縦に画像を配置 高さ・幅のリサイズが可 スマートオブジェクト・レイヤーマスク対応 Adobe Bridge対応 背景色、ボーダー、角丸の設定可 Tych Panelのインストール インストールはちょっと面倒かもしれません。 ダウンロードしたファイル
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
