タグ「CSSファイル」

タグ CSSファイル

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 59件)

インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」 - WEBマーケティングブログ

2011/05/03 707 users iPhone ホッチキスコクヨ一撃 CSS

とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。しかし、これを手作業で進めるのはとても手間がかかり、０から作り直したほうが速いことがほとんど。今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。針のいらないホッチキスコクヨハリナックスわたくし愛用中です！外出先からiPhoneで会社PCのファイル... 続きを読む

CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ - GIGAZINE

2007/02/12 569 users ひとまとめ GIGAZINE JSファイル CSS サンプル

CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0で動作確認ができています。ダウンロードは以下から。 willmayo.com >> CSS Speech Bubbles 実際のサンプルは... 続きを読む

使われていないCSS設定があるか教えてくれる『Unused CSS』 - 100SHIKI ～世界のアイデアを日替わりで

2011/01/09 552 users 100SHIKI 日替わり CSS Unused CSS 開発

似たようなツールは他にもあるが、シンプルで使いやすそうだったのでご紹介。 Unused CSSを使えば、使われていないCSS設定がどこにあるかを教えてくれる。使い方は簡単で、チェックしたいサイトのURLを入力するだけだ。すると、どのCSSファイルにどれだけ不要な設定が入っているかを教えてくれる。また、不要な設定を排除したCSSをダウンロードできたりもする。サイトの開発がながびくと不要な設定も... 続きを読む

Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法 | コリス

2009/06/06 514 users コリススタティックウェブページレンダリングキャッシュ

Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。キャッシュの最適化往復遅延時間を減らす HTTPリクエストを減らすロードサイズを減らすレンダリングの最適化 1. Optimize caching キャッシュの最適化ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティック... 続きを読む

[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css | コリス

2012/05/15 485 users コリスクロスブラウザ Normalize.css CSS

下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴ノーマライズ vs リセット Normalize.cssの使い方終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるもので... 続きを読む

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS | コリス

2019/03/28 445 users コリス CSS HTML 便利ツールツール

CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCS... 続きを読む

CSSだけでスタイリッシュな角丸ボタンが作れる『Sexy Buttons』が便利そう - IDEA*IDEA ～百式管理人のライフハックブログ

2010/02/24 414 users IDEA submit CSS span ライフハックブログ

ちょっと素敵なCSSファイルのご紹介。このCSSを読み込んで、簡単なマークアップをするだけで簡単にスタイリッシュな角丸ボタンが作れますよ。 ↑ こんなのが一発で作れます。マークアップは以下のとおり。spanが二つあるのがまぁ、あれですが。 <button class="sexybutton">Submit</... 続きを読む

GoogleドライブにWebホスティング機能が追加 - ITmedia ニュース

2013/02/06 345 users Webホスティング機能 Googleドライブプレビュー

米Googleは2月5日（現地時間）、クラウドストレージサービス「Googleドライブ」にWebホスティング機能を追加したと発表した。使い方は以下の通り。 Googleドライブに新規フォルダを作成し、公開設定にするフォルダにWebページを構成するHTMLファイルやCSSファイルなどの一式をアップロードするフォルダ内のHTMLファイルを開く編集ページのメニューバーにある「プレビュー」をクリッ... 続きを読む

CSSファイルから未使用のスタイルを削除する方法 | コリス

2019/09/26 328 users コリス CSSフレームワークライブラリスタイルアプリ

PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻... 続きを読む

画像やページをLightBox風に表示できるThickbox:phpspot開発日誌

2006/05/08 317 users them thickbox Lightbox風 class

Thickbox - One box to rule them all. Thickboxを使えば簡単に画像やHTMLファイルの中身をLightBox風にカッコよくページ内表示できます。画像の場合必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。 <a>タグには class="thickbox" を指定し、title属性に画像の... 続きを読む

JavaScriptファイルやCSSファイルを圧縮して高速化する「YUI Compressor Online」 - GIGAZINE

2009/01/13 315 users Java GIGAZINE 強者圧縮 JSファイル

Yahoo！の社員であるJulien Lecomte氏が開発した「YUI Compressor」という有名なJavaScriptファイルとCSSファイルの圧縮を行うJAVAで作られたツールがあるのですが、それをもっと簡単に利用できるようにオンラインで提供する強者が現れました。サイト名はそのまんま、「YUI Compressor Online」となっており、JSファイルなどをアップロードすれば自動的... 続きを読む

CSSの最適化とファイルサイズ削減をしてくれる無料ネットサービスいろいろ - GIGAZINE

2007/03/22 311 users トラフィック GIGAZINE 節約 CSS 転送料

ページの制作において必須とも言えるCSSですが、そのCSSファイルを最適化することによってページの読み込みを早くしてみたり、トラフィックの多いサイトであれば転送料の節約にも貢献できるらしい。というわけで、現時点で存在するCSS最適化ネットサービスをいろいろと探して列挙してみました。最適化といってもサービスによって方法はいろいろなので、この中から自分の目指す方向の最適化サイトが見つかるかも。 CS... 続きを読む

使われていないCSSを探す方法 | マイナビニュース

2014/04/07 310 users CSS 既存当初マイナビニュースファイル

Webページの制作に携わったことがあるならCSSも扱ったことがあるだろう。当初は小さかったCSSファイルも、デザインの変更や調整を続けるうちに、どんどん大きくなっていき、簡単には全体を見渡すことができなくなる。既存のデザインが崩れたりパラメータ間の調整を取るため、既存のCSSには手を加えずに新しいスタイルを追加していくことになるため、ファイルはどんどん大きくなっていく。こうした状況はCSSファイ... 続きを読む

WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル:phpspot開発日誌

2009/04/15 291 users PHP phpspot開発日誌変数 PHP入門共通

WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル 2009年04月15日 PHP Tutorials Examples Embedding PHP In CSS WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル。 CSSファイルをPHPとして実行して共通の値を変数にして使うというチュートリアルが公開されています。 PHPは知ってるとい... 続きを読む

JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS | コリス

2011/07/11 259 users コリス HTTPリクエスト圧縮 JSファイル最小限

ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできま... 続きを読む

CSSを非同期ロードする最も簡単な方法 - Qiita

2019/08/01 229 users Qiita ブラウザシェア stylesheet CSS 同期

CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しか... 続きを読む

スタイルシートをすっきりと見やすくしてくれる『styleneat』 - 100SHIKI ～世界のアイデアを日替わりで～

2009/03/26 222 users セレクタ一行 100SHIKI 日替わりアルファベット順

シンプルで素敵なツールだったのでご紹介。 styleneatはCSSファイルを見やすく整形してくれるツールだ。これを使えばセレクタの親子関係がインデントされて見やすくなる。複雑な階層構造もこれならわかりやすい。またそれぞれのスタイルの属性をアルファベット順に並べたり、一行でまとめたり、といったオプションもある。スタイルシートがごちゃごちゃしてきたなぁ、というときに試してみるのはいかがだろうか... 続きを読む

コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 - YATのBlog

2012/01/12 198 users YAT Sassファイル CSS Sass メタ言語

Sassの環境構築から実際のコーディングまでを紹介しています。CSSのメタ言語として登場したSass。去年から認知はしていたのですが中々手を出しておらず、年が開けて「やってみよう！」と思い起こして使って見ました。 Index 1.Sassとは 2.インストール 3.SassファイルをCSSファイルに 4.実際に作る 5.参考文献 1.Sassとは Sassがなんなのか知らない人も居ると思うので簡単... 続きを読む

実装は超簡単！デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー | コリス

2015/05/19 143 users head スピナーコリス Step link rel

ページのローディング時によく使われる、デザインがかわいく、アニメーションもかわいいCSSで実装されたスピナーを紹介します。 divひとつのミニマルなHTMLで、簡単に実装できます。スピナーの実装実装は、簡単です。「弾むボール」を例に、説明します。 Step 1: 外部ファイル各スピナーに用意されているCSSファイルを外部ファイルとして記述します。 <head> ... <link rel=... 続きを読む

MTで実践 - CSSのモジュール化による管理方法と遊び方

2007/03/16 143 users CSS モジュール化実践遊び方フィードバック

1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザー... 続きを読む

[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse | コリス

2014/08/06 125 users class フレームワークコリス div要素 HTML

p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 [html... 続きを読む

画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js - かちびと.net

2012/07/14 123 users JavaScriptライブラリ net 画面サイズ CSS

画面のサイズを指定して、そのサイズに応じて任意のCSSファイルをロードするスクリプトのご紹介。 Media Queries等によってCSSが肥大化してしまった場合は使ってあげると軽量化できるかもですね。指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Medi... 続きを読む

JavaScriptでJSやCSSを動的インポートする（import.js） - youmos

2007/06/14 122 users チュートリアル HTMLヘッダ JSファイル特定本来

JavaScriptで他のJSファイルやCSSファイルをインポートするのに便利なのがimport.js。WebInventif.frで紹介されているチュートリアルだが、実際に利用できるJavaScriptコードも取得でき、サンプル用のコードを削除すれば、そのまま利用できる。本来であればHTMLヘッダで呼出せば良いが、特定の条件やページのみで実行したい場合などに利用できる。また、スタイルシートのイ... 続きを読む

Chrome デベロッパーツールの隠し機能が便利！CSSのセレクタ・プロパティ・値を1クリックで見つける方法 | コリス

2018/03/28 118 users セレクタコリス CSS Chrome デベロッパーツール

Chrome デベロッパーツールは便利ですけど、こんな便利な機能もあったのですね。要素に適用されているCSSのセレクタ・プロパティ・値が、どのCSSファイルのどこに記述されているのか1クリックで見つけ出すことができる便利なテクニックを紹介します。続きを読む

(1 - 25 / 59件)

次の25件 »