Mozilla Re-Mix: マウスポイントした箇所のCSSプロパティを簡単に確認できるFirefoxアドオン「CSS Viewer」
Firefoxアドオンの中には、ウェブページのスタイルシートを参照したり編集したりすることができるものがいくつかあります。 こうしたツールを使えば、本格的なローカルツールなどを使わなくてもCSSの確認などができることから、開発者やサイト管理者の中にはインストールされている方も多いと思います。 このようなツールは非常に有用なものですが、ユーザーによってはとりあえず使っているフォントやサイズなどが確認できればいいという方もいらっしゃるでしょう。 今回は、そんなライトユーザーに便利なCSSチェックアドオン「CSS Viewer」というものをご紹介したいと思います。 「CSS Viewer」は、ページ全体、またはマウスオーバーした箇所のCSSプロパティをポップアップ表示し、その内容を確認することができるというものです。 アドオンをインストール後、ツールメニューの[CSS Viewer]、またはツー
howtohp.com - howtohp リソースおよび情報
Get a new domain registered at NameSilo.com. Find out who owns any domain name with the WHOIS tool. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
tips! | google-code-prettifyでシンタックスハイライト
tumblrで使うコードハイライターをこっちに乗り換え。 テーマ(CSS)もあらかじめいくつか用意されてたりで気軽に使うならこれでいいかもしれないです。 そんなわけで軽く設置メモ。 ＜google-code-prettify＞ 上記サイトから必要なファイルをDL。 最小限分のprettify-small-1(日付)～でも使えるっぽいですが折角なんでフルの方をDLしました。 使うファイルはどっちも同じ。 【目次】設置方法と使い方もう一歩～行番号カスタマイズなどおまけ 1．設置方法と使い方解凍したファイルの中のprettify.jsとprettify.cssをアップロード。 フルの方をDLした場合は『google-code-prettifyフォルダ⇒distribフォルダ⇒(再び)google-code-prettifyフォルダ』 の中にハイライターやテーマCSSなどの各ファイルが収められてま
CSS color previewをrgb()に対応させた
VimでCSSを編集中に色をインライン・プレビューしてくれるCSS color previewというスクリプトをrgb()に対応させてみた。一応rgba()にも対応しているような感じで、透明度を無視してプレビューされる。hsl()とかも対応しようと思ったのだけどRGBからHSLへの変換が面倒になってすぐに諦めた。hsl()とか使わねーよ。 Download: rgb()/rgba()に対応したCSS color preview インストールは$HOME/.vim/after/ftplugin(Windowsでは$HOME/vimfiles/after/ftplugin)にcss.vimとしてコピーするだけ。インストールしてCSSファイルを開くと、 というように背景色でインライン・プレビューされる。プレビューの通りrgba()の透明度は反映されない。matchlist()で書こうとしたのだけ
Web屋のためのVim設定・Tipsまとめ 2/2 - ナレッジエース
おそらく、誰もがやる深夜のWebサーフィンは、究極のところ時間の無駄ではないのかもしれない。 それは、Webで夢をみているのにほかならないのだ。(T.B=リー「Webの創成」より) 「Web屋のためのVim設定・Tipsまとめ 1/2」からの続き。 Vimを使ったHTMLとCSSの編集について、さらに関係しそうな事項を紹介します。 HTML編集でもよく使うVim基本機能 =キーで自動インデント HTMLのインデントが崩れているときは、範囲選択して=キーを押せば、自動的にタグの入れ子を認識してインデント調整されます。 ばらばら→範囲選択→「=」ですっきり カレント行だけインデント調整したい場合はノーマルモードで==とすれば可能です。 なお、手動でインデントを上げ下げするには、ノーマルモードでは>と<、インサートモードでは<C-t>と<C-d>が使えます。 gfで相対パスのリンク先ファイルを開
Webアプリケーション作成のためのCSSの基礎 - Perl入門ゼミ
Perl › Mojolicious PerlでWebアプリケーションを作成するための前提知識としてCSSの基本を解説します。これだけ知っていれば、CSSを自由に記述することができる程度のものを目指しました。 CSS(カスケーディングスタイルシート)とは CSSはHTMLのデザインを行うためのものです。CSSを利用すると文字の色や背景の色を変えたりすることができます。また各要素の配置を指定することができます。HTMLでもある程度のデザインを行うことができますが、HTMLで文書の意味を、CSSでデザインを行うというのが主流です。 style属性を使ったCSSの記述 CSSをタグに適用する一番簡単な方法は、style属性を使用することです。 <h1 style="color:red;font-size:200%;">見出し1</h1> <div style="background-color:
Twitter bootstrap入門 #twtr_hack
The document discusses Twitter Bootstrap, an open-source front-end web development framework. It provides information on Bootstrap's history and features, including its grid system, typography, forms, buttons, navigation and other components. The document also offers tips on getting started with Bootstrap, customizing it using LESS, and related tools and resources.Read less
初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
画像を一切使わずCSSで描かれた「けいおん！」の澪がマジですごい！
今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん！」の秋山 澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。 「けいおん！」（K-ON!）は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動を行っていくストーリーで人気のかきふらい氏による4コマ漫画作品です。2年前にアニメ化、今月12月より映画が公開されている人気作品ですね。秋山 澪はその作品に登場するキャラクターです。その秋山 澪をまったくの画像なしで、html+CSSのコードだけで表現しています。 私も以前にCSSでドラえもんなど様々な作品を描いたりしましたが、はっきりいってhtml+CSSのコードだけで絵を描くのはとても大変です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3streamer.net
ウェブサイトのレイアウトを簡単に作成できるジェネレータ「PageBlox」 | ライフハッカー・ジャパン
パスワード認証
ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI
Create a new fiddle - JSFiddle
IDEA * IDEA
最近のWeb制作で必ず1度はお世話になる便利なジェネレーターまとめ5つ - W3Q
