タグ

関連タグで絞り込む (44)

タグの絞り込みを解除

CSSに関するhalohalolinのブックマーク (91)

  • CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する

    Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi

    CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
    halohalolin
    halohalolin 2021/02/05
    jQueryのプラグインを使わずCSSだけで画面外の画像を表示タイミングになるまで遅延ロードさせることができる
    リンク

  • 【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | Recruit Tech Blog

    ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ

    【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | Recruit Tech Blog
    halohalolin
    halohalolin 2017/10/10
     JavaScriptを使わずCSSのみで、特定の複数行を越える場合、末尾に三点リーダー︵…︶を使う方法。text-overflow: ellipsis;のみだけでは複数行には対応できないので、その解決策。  

    ●CSS
      
    リンク

  • [CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル


    画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと
    halohalolin
    halohalolin 2017/10/08
    CSSだけで角丸タブを実現するための実装例。Bootstrapの場合、＃menu > ul.nav.nav-tabs、＃menu > ul.nav.nav-tabs > li.nav-item、＃menu > ul.nav.nav-tabs > li.nav-item > a.nav-link.active等に対して設定する
    リンク

  • CSSMENUMAKER.COM

    Get a price in less than 24 hoursFill out the form below. One of our domain experts will have a price to you within 24 business hours.

    halohalolin
    halohalolin 2014/08/06
    サイトのヘッダーや左カラムによくあるCSSで構成されたメニューをダウンロードできるサービス、自分でサンプルソースを修正するなら無料だが、編集ツールはソース出力の際に料金が要求される
    リンク

  • App.js | Mobile webapps made easy

    Mobile webapps made easy. Download Get Started App.js is a lightweight JavaScript UI library for creating mobile webapps that behave like native apps, sacrificing neither performance nor polish.

    halohalolin
    halohalolin 2014/05/27
    iOS7風のUIデザインが容易にできるJavaScript/CSSフレームワーク、Android対応
    リンク

  • UnCSS·使っていないスタイル設定を探してスタイルシートをリファクタリングしよう！ MOONGIFT


    プログラマーにとって過去のコードに手を加えていくことで負の資産を生み出すように、デザイナーにとってもスタイルシートの度重なる修正は負の資産を生み出していきます。その結果、全体のバランスが崩れたり、リファクタリングもできずに破綻したりします。 スタイルシートの場合、プログラミングのようにUnit Testを書いてリファクタリングしたりできないのが難点です。そこで使ってみたいのがuncss、利用していないスタイルシート設定を洗い出してくれるソフトウェアです。UnCSSのインストール インストールはnpmコマンドでできます。npm install -g uncss ヘルプです。ファイルまたはURLを渡します。 $ uncss --help Usage: uncss [options] <file or url, ...> e.g. uncss http://getbootstrap.com/
    UnCSS·使っていないスタイル設定を探してスタイルシートをリファクタリングしよう！ MOONGIFT
    halohalolin
    halohalolin 2014/04/08
    UnCSSを用いることで資料していないスタイルシート設定を洗い出せる、PhantomJSを使っていますので、JavaScriptを使っているサイトでもチェックできる、Node.jsのnpmからインストールする
    リンク

  • http://www.uiplayground.in/css3-icons/

    http://www.uiplayground.in/css3-icons/
    halohalolin
    halohalolin 2014/03/20
    CSS3対応ブラウザにおいて、各種アイコンを画像データ無しで描画する為のまとめ、コピペでOK!
    リンク

  • AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT


    これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
    AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
    halohalolin
    halohalolin 2014/03/14
    管理画面/コントロールパネルテンプレート、ボックス・設定・グラフ・アラート・アイコン・ボタン・スライダー・タイムライン・フォーム・テーブル・カレンダー・メールボックス・請求書・ログイン・ロック・エラー
    リンク

  • 知っておくと速い！CSS3に関する「便利」なまとめ


    作成‥2013/11/25 更新‥2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で﹁知っておくと効率的﹂なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ1．カウント数を出力2．要素の前後に文字や画像3．カーニング4．画像フィルタ5．均等幅にレイアウト6．アニメーション一覧 スマホサイト対策7．viewport ８．改行削除9．Webクリップアイコン10．UIリセット／入力フィールド拡張11．横並び12．ボタンサンプル13．画像を使わない矢印14．自動改行15．はみ出しを隠す1
    知っておくと速い！CSS3に関する「便利」なまとめ
    halohalolin
    halohalolin 2013/11/28
    カウント数を出力/要素の前後に文字や画像/カーニング/画像フィルタ/均等幅にレイアウト/アニメーション一覧/viewport/改行削除/Webクリップアイコン/UIリセット／入力フィールド拡張/横並び/ボタンサンプル/矢印
    リンク

  • Liveweave HTMLエディター

    Initializing... Liveweave expand_more home Home data_object CSS Explorer arrow_outward Palette Color Explorer arrow_outward Polyline Graphics Editor arrow_outward build Tools expand_more restart_alt Load base template post_add Generate Lorem ipsum... code Format HTML code_blocks Format CSS data_object Format JavaScript library_add Library expand_more AAlgolia JS Animate CSS Apex Charts JS BBulma C

    halohalolin
    halohalolin 2013/09/15
    JQueryやJavaScriptおよびCSSの挙動がWebブラウザ上のみで手軽にすぐ試せるHTMLエディター、外出時のネットカフェ上でテストコードを組んだりブログ更新するのに便利かも
    リンク

  • JavaScript Compression - Compress JavaScript Code Free with this JavaScript Compressor (CSS Too) - from Creativyst

    Creativyst® JavaScript Compressor Compress CSS Too!

    halohalolin
    halohalolin 2013/09/02
    CSS/JavaScriptの圧縮ツール、何％圧縮できたか表示してくれる
    リンク

  • これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 小さい頃はエラ呼吸


    はじめに 今、Twitter Bootstrapが一部のエンジニアで人気です。 Twitter BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 そこで、これからTwitter Bootstrapをはじめてみようと思うエンジニアの人たち向けに、役立つ記事の数々をまとめてみました。 このエントリを書こうと思ったきっかけは、以下のスライドでした。とても分かりやすく、はじめて知るようなサービスなども網羅されており、とても参考になりました。 Twitter bootstrap入門 #twtr_hack jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at
    これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 小さい頃はエラ呼吸
    halohalolin
    halohalolin 2012/10/09
    今風のWebサイトを作るのに役立ちそうなフレームワーク
    リンク

  • http://www.stylish-style.com/csstec/hi-level/print-css.html

    halohalolin
    halohalolin 2012/08/02
    <link REL="stylesheet" type="text/css" HREF="印刷用のスタイルシートアドレス" media="print">としていするなど
    リンク

  • HTMLのテーブル枠が印刷されない！ - OKWAVE


    pygmyさんが閲覧しているサイトのテーブル枠が印刷されない、という意味ですよね・・・？IEを使っているのでしたら、ユーザースタイルシートに以下のようにしてみてはどうでしょうか？ @media print{table, td { border:solid 1px black; border-collapse:collapse; } } メモ帳などに上記をコピーして、mystyle.cssなど適当な名前で保存してください。その後、IEのツールのオプションでユーザー補助を開き、ユーザースタイルシートに上記cssファイルを指定します。 逆に、テーブル枠が印刷されるようなサイトを作りたい、という意味でしたら、そのサイトに上記のようなスタイルシートを組み込んでください。
    HTMLのテーブル枠が印刷されない！ - OKWAVE
    halohalolin
    halohalolin 2012/08/02
    IEではHTMLのtableで枠を指定しても消えることがあるので、@media print{ table, …云々…}とCSS指定したほうが良いようだ
    リンク

  • Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime


    結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
    Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime
    halohalolin
    halohalolin 2012/01/23
    HTML/CSSフレームワーク99limeの紹介、素早くデザインの整ったサイトが構築できる/リスト・メニュー・ボタン・画像・イメージスライダ－・パンくず・グリッドレイアウト・フォーム
    リンク

  • HugeDomains.com

    Captcha security check matomematome.com is for sale Please prove you're not a robot View Price Processing

    HugeDomains.com
    halohalolin
    halohalolin 2011/04/09
    サイトが遅い場合は、Page Speed Onlineで原因を調べる→HTTPレスポンスヘッダにExpiresを追加、ロゴやボタンなどの画像をまとめひとつの画像にし、スタイルシートをつかって、切り出す/イメージマップの活用/画像の最適化
    リンク

  • 短いときは中央、長いときは左寄せになるテキスト | ヨモツネット


    概要 テキストが1行で表示できる場合には中央揃え、2行以上になる場合は自動で左揃えとなるスタイルを実現するための HTML の構造と CSS のコードについてです。 ただ、これを実現するために、HTML のタグが3重のネストになってしまいます。(Firefox 2 をサポートしない場合は、ネストは2重。) 短いときは中央、長いときは左寄せになるテキストのdemo説明 全体では中央揃え(text-align:center)、内包されるinline-block では左揃え (text-align:left) とします。inline-block は text-alignが有効でありながら箱を形成するので、箱自体は中央揃え、箱の中は左揃えとなります。この箱の横幅は内容量によって伸縮するので、短いときは中央揃え、2行以上になる場合は横幅は限界まで伸びている状態なので、箱の中身全体が左寄
    halohalolin
    halohalolin 2010/12/29
    CSSのみで、テキストの中央配置の左寄せをする方法。外枠でtext-align:center;、内枠でdisplay:-moz-inline-box;display:inline-block;text-align:left;すれば大半のブラウザでいける！
    リンク

  • 【レビュー】自由に使えるiPhone/iPad/Android/PC向け切り分けCSSテンプレート | エンタープライズ | マイコミジャーナル


    Fantastic website design in Flintshire, North Wales from Stuff and Nonsense iPhoneやAndroid携帯といったスマートフォンからiPadのようなポータブルデバイス、従来のPCやノートPCにいたるまで、ネットワークにアクセスするデバイスの種類は多様化している。こうしたディスプレイサイズも解像度密度も異なるデバイスに対してそれぞれに適したデザインを提供するというのが、最近のWebデザイナの間で取り上げられることが多いトピックになっている。 こうしたトピックで取り上げられることが多いテクニックがCSS3のMedia Queryを使う方法だ。デバイスの解像度や密度の情報を取得して、それに応じて適用するCSSを切り替えるというもの。これまで多くのブログでこのテクニックが取り上げられ、サンプルコードとともに紹介されている
    halohalolin
    halohalolin 2010/10/12
    CSS3のMedia Queryを利用して、スマートフォン、PC/ノートPC、iPad、iPhone、大きなディスプレイ、縦方向と横方向の区別、またはその両方に対応したスタイルを区別して適用するためのテンプレートファイル
    リンク

  • ブログアフィリエイトで稼ぐのに役立った「最強ツール」２７選【保存版】


    検索キーワードを調べるツールまとめ キーワードを調べる決定版﹁Google キーワード プランナー﹂ Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。 キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。 一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナー キーワードの組み合わせが分かる﹁ラッコキーワード﹂ キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。 ラッコキーワード 検索順位を調べるツールまとめ 業者も使う順位チェックツール﹁GRC﹂ 他のツールだと毎回キーワードを入力
    ブログアフィリエイトで稼ぐのに役立った「最強ツール」２７選【保存版】
    halohalolin
    halohalolin 2010/09/15
    ホームページ制作者・WEBデザイナー向けの便利で使えるサービス/CSS・ワードプレス関係/SEO関連/お役立ちツール/画像関連/写真素材/フリーフォント/アイコン/デザイン/ボタン作成/XHTML・CSSテンプレート...
    リンク

  • たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

    IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

    halohalolin
    halohalolin 2010/07/15
    「CSS3 PIE」を利用することで、10/07/15現在、CSS3のプロパティの一部が使えます/border-radius/box-shadow/border-image/multiple background images/linear-gradient as background image
    リンク
  • 1 2 3 4 5 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.