IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する
Result よくある、テキストの文末を省略するやつです。 1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです ↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています ※Winodws10でIE11、Edge、Firefox 68.0.1、Opera 62.0.3331等で表示確認しました cssp {/*基本設定。設定した高さより長くなった場合に文末以降が省略される*/ line-height: 1.4; max-height: 4.2em; overflow: hidden; position: relative; text-align: justify; text-overflow: ellipsis; width:50%; margin:auto; } p::be
hrの使いやすそうなスタイリングいろいろ
Result いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にした的な感じになっています css.hr_b {/*シャドウ付き*/ height: 8px; border: 0; box-shadow: 0 8px 8px -8px #666 inset; } .hr_c {/*フルワイド*/ position: relative; width: 100vw; margin: 10px 0 10px -50vw; left: 50%; } .hr_d {/*両端フェードアウト*/ border: 0; height: 1px; background-image: -webkit-linear-gradient(left, #f0f0f0, #666, #f0f0f0); background-image: linear-gradient(left, #f
汎用性の高そうなjQueryイメージスライダー・Fotorama
よさ気だったので備忘録。jQueryで作るスライダーです。画像や動画にも対応、レスポンシブWebデザインにも対応しており、マークアップもシンプルで済みます。 なかなかいいスライダーでした。タッチイベントにも対応しているのでスマフォでも使えますね。 見た目はよくあるスライダーですが、汎用性は高い印象です。タッチイベント、レスポンシブWebデザイン、ハッシュタグ対応、動画も可能、フルスクリーン化も可能で、マークアップも画像を書けば良いだけ。 動作サンプルがいろいろ用意されています。 Sample コード<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="fotorama.js"></script>本体とプラグインとCSSを読み込みます。 <div class="fotorama"> <
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 LightboxLightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。グル
Lettering.jsを併用して、任意のテキストにCSS3のアニメーションエフェクトを実装するスクリプト・textillate.js
ちょっと面白かったのでメモ的に。タイポグラフィ用のライブラリ、Lettering.jsを併用して、テキストにCSS3によるアニメーション効果を容易に与える事が出来る、というスクリプトのご紹介。 使いどころは限定されますが、動きが面白かったのでメモ的に。以前ご紹介したLettering Animateを少し進化させたような感じ。 エフェクトの種類もかなり用意されているのでデモを見てるだけでも楽しかったです。lettering.jsはjQueryのプラグインなので必然的にtextillate.jsもjQuery依存となります。 lettering.jsで1文字1文字のエフェクトにタイムラグを発生させる事が出来ます。 $('.foo') .fitText(0.5) .textillate({ in: { effect: 'flipInY' }});オプションでエフェクト等をセッティングします。
モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsive
結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が
HTMLコードを解析して問題箇所と理由を知らせてくれるブックマークレット・HTML_CodeSniffer
HTMLの構文チェックをその場で できるブックマークレットです。 問題箇所の数や、問題箇所もお しえてくれます。割と便利そう だったのでご紹介してみます。 HTMLのlintです。ブックマークレットを起動させてその場で解析、問題箇所も教えてくれます。 OSSとしてGithubでも公開されてますので日本語に直しての利用も出来ますね。 ↑ 起動させるとすぐに解析してくれます。 ↑ 表示されたボックス下部のView Reportに進むと個別箇所が一覧で表示され、それぞれの問題箇所を上図のようにアイコンで教えてくれます。 errorとwarningの表示/非表示のスイッチも出来ます。なかなか便利ですね。 HTML_CodeSniffer
パスワードによる閲覧制限機能やQRコード生成機能付きのシンプルな短縮URLサービス・flavr.fi
ユーザー登録不要でパスワード による閲覧制限可能な短縮URL サービスを探してたのでメモ。 短縮URLサービスは既に数多に 存在する、というか乱立に近い 状態ですけど。 個人的にはどの短縮URLサービスもあまり肌に合いませんでしたが、flavr.fiは自分の好みに今までで一番近かったので暫くはこれを使おうと思います。 お洒落な写真を使っていますがコンテンツとは無関係です。 URLを入力するだけ ↑ URLを入れると即座にショートURLとQRコードを発行してくれます。 パスワード制限 ↑ 下部にあるメニューからCustomに進むとパスワード制限をかける事が出来ます。Many Urlsでは複数サイトの短縮URLを同時に作成出来ます。 ブックマークレット ↑ ブックマークレットを使うとその場で短縮URLとQRコードを発行、TwitterやGoogle+、Facebookへの投稿ボタンも表示されま
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery
スマフォにも対応・ディスプレイサイズに自動で幅調整するレスポンシブなjQueryイメージスライダー・Blueberry
どのようなディスプレイサイズでも自動で レイアウトを調整してくれるレスポンシブな イメージスライダーを実装出来るjQueryプ ラグイン・Blueberryのご紹介です。イメージ スライダーを取り入れているサイトは多い のでこういうのは助かりますね。 iPhone等のスマートフォンにも自動でサイズを調整してくれます。痒いところに手が届く系ですね。地味にありがたい。 見た目はシンプルなイメージギャッラリーです。が、閲覧するディスプレイのサイズに依存する事無く、自動で幅を調整、最適化してくれます。MediaQueryと相性良さそうですね。 表示確認 Media Queries Testerでのキャプチャです。 Mobilizerでのキャプチャです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery
拡大時にアコーディオンのように画像が広がるカルーセルを実装するjQueryプラグイン・Accarousel
クリックで画像を拡大する際に アコーディオンのように広がる カルーセルを実装するjQueryの プラグイン・Accarousel。機能 はシンプルですが、動きが好み だったので備忘録。 カルーセルを実装するjQueryプラグインです。 見た目は普通のカルーセルですが、画像をクリックすると以下のように拡大されます。 なんと言うか、横にブワッと広がる感じ。ブワッと。 頭悪いから上手く言えないのでサンプル見てください。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.cjAccarousel.min.js"></scri
Androidアプリ専門のUIギャラリー・Android App Patterns
Androidアプリ専門のUIギャラリー サイト・Android App Patternsの ご紹介。iPhoneのは多いですけど、 Android専門は初見でした。インス ピレーション向上に覚えておいて 損は無いかもですね。 AndroidアプリのUIギャラリーです、パーツごとにカテゴリ分けされています。 Androidアプリのパーツ別ギャラリー。メニューとかリスト、ログインページ、プロフィールページなど様々なカテゴリに分けられています。 サインアップページのインターフェースなどなど。 タッチデバイスを取り入れたスマートフォンアプリにとってUX向上はユーザー獲得のための重要なファクターとなり得ますのでこうしたギャラリーからインスピレーションを高めたり、実際に触れるのは必要不可欠ですね。 今後も数が増えてくれると素敵な感じになりそうです。以下よりどうぞ。 Android App Patte
ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利
昨日知ったWebサービスに久々に感激したので勢いでシェアします。Web制作で必ずと言っていいほど必用になるダミー画像を生成してくれるサービスなんですが、これが個人的にかなり便利でした。 PLACEHOLD.ITはダミー画像の生成サービスなんですが、凄く手軽に生成出来るのでかなりオススメです。 ダミー画像を生成する、というシンプルなサービスですが、これが想像以上に有用的でした。 使い方使い方は至って簡単。placehold.itというドメインの後にサイズを指定すればいいだけ。 例えば350×150ピクセルの画像が欲しいなら http://placehold.it/350×150 にアクセスすれば指定したサイズの画像が表示されます。 なので、 <img src="http://placehold.it/350x150" />これで以下のようにダミー画像を表示させる事ができます。 勿論、細かいサ
ノンデザイナー向けのスライド・「Webデザインのセオリーを学ぼう」
既出なんですが良かったので。空いた時間に、気になっていたスライドがあったので拝見しましたが、内容が素敵だったのでご紹介します。ノンデザイナーさん向けのデザインセオリーのスライドです。 Webデザイナーが読んでおきたい、最近公開されたWeb系のスライドっていうので知ったんですが、どちらかというとWebデザイナーさんなら知ってて当たり前じゃないかという内容かもしれません。 スライドの作成者さんのブログでもノンデザイナー向けの講義向けのスライド、とありました。→福井高専でノンデザイナー向けの講義しました デザインとアートの違い、なぜデザインが必要なのか、Webデザインとは、などなどが解説されています。Webデザイン論では必須の導線、レイアウト、情報のグルーピングにもしっかり触れてくれています。Webデザインには理由がある、というのが分かるかと思います。（「意味」って言っちゃうと語弊がありますよ）
簡単なjQueryコードで動く、レスポンシブWebデザイン対応のカルーセルを実装する為の雛形っぽいやつを作成してみる
レスポンシブWebデザインに対応できる コンテンツスライダーのようなものの 雛形のようなものが欲しかったので、 自分で作成しました。テンプレなので 他の配布スクリプトのように親切な 設計じゃないですけど・・ レスポンシブWebデザイン対応のjQueryで動くカルーセルを作るための雛形っぽいのを作ってみました。全然大したもんじゃないんですがｗ 最初から小さい画面での表示も考慮しているのでプラグインではよくある機能も付けていません。 動作確認 デフォルトの状態を画面いっぱいに広がるようにしてありますので、Webサイトに応じてサイズを調整してください。クリックまたはタップでdiv要素がスライドします。 Sample01 ※responsivepxでレスポンシブWebデザインの対応を確認出来ます。 色々なデバイスで使うための雛形なので必要最低限の機能しかありません。※は理由です。 どんな画面サイズ
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
スマフォのHTML5環境向けに作られたjQueryライクな軽量フレームワーク・jQ.Mobiの日本語サンプル作った
なかなか良さそうだったので備忘録。iOSやAndroidなど、スマートフォンでのHTML5環境に合わせて作られた軽量モバイルフレームワークです。jQuery互換なので慣れてる方は使い方もすぐに覚えられると思います。特に軽量なのが嬉しいですね。 現状、jQueryを使うのであればスマートフォンにはjQuery Mobileという選択肢となりますが、やはりファイルサイズが気になります。そこで、jQueryをなんとか軽量に使おう、という動きが少し目立ってきました。 例えばzepto.js。がそうですし、jquipという、目的に合わせてjQueryを細分、モジュール化するライブラリなどもあります。 jQ.Mobiもその一つで、jQueryっぽく使えるHTML5環境のスマートフォン向け軽量ライブラリです。 用途を絞ることで軽量化できる、って事ですかね？こういう動きは個人的に歓迎ですけど、問題は派生ラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルな矢印いろいろ
Facebookのように、顔文字を絵文字に変換するjQueryのプラグインと、絵文字の作成、共有が出来るサービス
WordPressのカスタム投稿タイプとカスタムタクソノミーを使って新たに別のコンテンツを作ったので、制作プロセスを書きました
