jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BLACKFLAG
Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
表示が速過ぎても、誰も文句は言いません～CSS Nite「表示速度最適化」レポート
CSS Nite LP, Disk 23「表示速度最適化」 2012年6月30日、ベルサール九段下で「CSS Nite LP, Disk 23」が開催されました。CSS NiteはWeb制作に関わる方のためのセミナーイベントで、マークアップエンジニアやデザイナーの方が多く参加しています。今回のテーマは「表示速度最適化」でした。 パフォーマンス計測の方法、画像の最適化、モバイル向け最適化、そしてフロントエンドからバックエンドまでを考慮した設計段階からの最適化と、幅広いながらとても密度の濃い内容でした。 自己満足で終わらないためのパフォーマンス計測 サイバーエージェントの石本 光司（@t32k）さんから「Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 - 」というタイトルで、サイトの最適化を行う上で重要なパフォーマンスの計測手段や分析方法に
最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS at #SMX Advanced Seattle 2012
[対象: 上級] ページの表示速度が、Googleのランキングを決める指標として日本を含むインターナショナルで導入されていることがSMX Advanced Seattle 2012で判明しました。 そこで今日は、ウェブページの高速化を取り扱ったセッションをレポートします。 スピーカーは、ECサイトのREIでSEOに携わるJonathon Colman（ジョナサン・コールマン）氏です。 ウェブサイトのパフォーマンス最適化 サイトを高速化する理由 コンバージョン率の最適化 カスタマーエクスペリエンスとカスタマー満足度の向上 直帰率を下げる。 競争率が非常に激しいキーワードでオーガニックからのトラフィックを増やす。 全体的な競争力を高める。 運用費を節約する。 数字で見るページスピード Googleではページスピードが検索の1%に影響している。 ユーザーがページ表示に待てるのは2秒まで。 3秒以
HTTPリクエストの削減とWebサイト高速化まわり - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 メモ書き。社内説得用。「HTTPリクエストを減らすと高速化できるよ！」てのはよく聞くけど、それが「どうしてか」ってのを(読込待機時間まわりで)具体的な数字を出してることが意外と少なかったので。詳しくは参考リンクにGo! Webサイトを分析するWebアプリ PageSpeed Insights WebPagetest 参考資料など Webパフォーマンス最適化のためのコーディング手法, MOL @importを使うべきでない理由, Screw-Axis まずHTTPリクエストがコストが高い理由ですが、まあ同時読込できないからですよね。読込に1秒掛かる画像A,B,Cがあると
コードの圧縮や外部ファイル化とページの読み込み速度について
なぜ、ごちゃごちゃしてるのか？ぱっと気づくのがこの2点です。 改行やスペースがほとんど使われていない CSSやJavascriptが外部化ファイル化されていない Googleとしてはソースがきれいなことよりも、読み込み速度を速くすることでユーザーのストレスを軽減したり、ファイルサイズ小さくすることでサーバーへの負荷を減らしたりすることの方が重要だと思います。 もちろんアップする前にこのような状態にしているだけで、それまではきれいに書かれているはずですが。 ということで、「コードの軽量化」と「外部ファイル化」の2点について考えてみます。 コードの軽量化について HTML、CSS、JavaScriptなどのコードは、改行やスペースを使わずサイズを小さくした方が読み込みは速くなります。 これは当然ですね。 コードの見やすさよりも読み込み速度やサーバーの負担軽減を優先するなら、できるだけファイルを
意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
インストールせずに、好きなWeb Fontsを使おう
WebFontsとは WebFontsを利用すると、Web上にあるフォントファイルを読み込んでフォントを表示できます。これまではクライアントPCにインストールされているフォントのみが利用できましたが、WebFontsではクライアントにインストールされていないフォントを表示できるようになります。 以下のサンプルはGoogle Web Fontsで提供されるWebFontsを利用しています。サンプルは IE 9／Firefox 6／Chrome 12／Opera 11.5／Safari 5.1 で動作確認済みです。 このようにWebFontsを利用することで、さまざまなフォントによる表示や表現ができます。 それぞれのフォントにはライセンスがあります。サーバにフォントファイルを格納する場合は、再頒布に該当するため、注意が必要です。フォント提供サービスを使う場合も、ライセンスをしっかり確認しただし
はじめてのWebfonts
今までは、サイト上で意図したフォントを使うには PCに共通してインストールしてあるデバイスフォンを指定するか、 photoshopなどで画像として作る方法が主でした。 しかしCSS3からはwebfonts機能が搭載されたので、 CSSのみで希望のフォントが使える様になりました。 まだ一般化するには時間がかかると思いますが、 webfontsの基本をまとめてみました。 webfontsのメリット・デメリット webfontsで使えるフォントフォーマット Webfontの使い方 CSSの@font-faceを使う方法 Webfontsの使い方 Webfontサービスを利用する方法 Webfontサービス webfontsのメリット・デメリット CSSのみで希望のフォントを指定できるので、 非常にメリットが大きく思えますが、 まだまだ幾つかの問題もあります。 CSSのみでフォントの指定ができる
オシャレで繋ぎ目のないバックグラウンド画像集:phpspot開発日誌
Free Abstract Backgrounds: Seamless Patterns | CreativeFan オシャレで繋ぎ目のないバックグラウンド画像集 次のようなお洒落な背景画像が多数まとまっていましたのでご紹介です。 ちょっと変えるだけでオシャレなサイトに変わるかもしれません 関連エントリ 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニック 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.2ch-search.net/blog/7
cmmntr.com
http://pointcard.me/japanese-free-web-fonts/
http://spky.org/