Copyright © 1999-2010 NOZ All Rights Reserved. このサイトに掲載しているすべてのコンテンツの無断転載を禁じます。 http://noz.day-break.net/webcolor/ -- リンクについて / 連絡先
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
Errors (All) | (None) Beware of broken box sizing Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Compatibility (All) | (None) Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix Requi
Design Beautiful Typography One of the most popular applications for web designers is now a full-blown typography editor. Typetester classic that is known and loved by all is still online! Test and compare more than 2800 web fonts. The new Typetester is a WYSIWYG web typography editor. Create, export and share unlimited projects.
ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi
「CSS Stats」は指定したサイトのCSSを徹底的に解析してくれるサイトです。CSSで使われている要素数や色の数、フォントファミリーをはじめ、CSSの詳細度をグラフで表現してくれたり細部まで解析されます。 以下に使ってみた様子を載せておきます。まずCSS Statsへアクセスしましょう。解析したいサイトのURLを入力します。しばらくすると解析結果が表示されるのでチェック。 フォントや背景色に使われている色の一覧です。 CSSの詳細度（specificity）をグラフであらわしたものです。なるべくなだらかなグラフになるほうがよいそうです。CSSを見直す際のひとつの参考としてご活用ください。 CSS Stats （カメきち）
WordPressには、いくつかのプログラム言語が利用されています。 具体的には以下のような言語です。 PHP HTML CSS JavaScript（jQuery） 細かなことを言えば、他にも使用されているものはありますが、ユーザーが編集するものと言えば大体はこの4つです。 今回は、これら4つの言語のコードを綺麗に整形してくれるツールの紹介です。 コード整形ツールとは コード整形ツールとは、書き方の定まっていないプログラムコードなどを、記法を統一して綺麗に書き直してくれるツールです。 WordPressテーマ作成や、カスタマイズで、コードをググッてよそからコピペ編集で使うときなどに、自分に合った記法に変換して使えます。 例えば、以下のようなことを、まとめて行いたい時に使うと、手動でやるより編集時間を大幅に短縮できます。 コードに適切なインデントを自動で設定する インデントをタブからスペー
2017年2月17日 便利ツール 作業中に、ふと動作確認がしたい…でも新規ファイルを作るのすらめんどくさい…なんてこと、ありませんか？（え？ない？w）そんな時はファイル不要！環境設定不要なオンラインテストサイトを使っちゃいましょう！動作確認用オンラインツールはいくつかありますが、実際に使っているもの、ブックマーク登録しているものをいくつか紹介します！ユーザー登録してコードを保存できるサイトもあるので、備忘録として使ってみてもよさそうです！ ↑私が10年以上利用している会計ソフト！ CodePen Webクリエイターボックスでも何度となく紹介してきたCodePen。フロントエンドの動作確認に最適です。Emmetの利用もOK！ライブプレビューができるので、いちいち保存したり実行ボタンをクリックして動作確認する必要はありません。作成したコードをブログへ埋め込んだり、シェアするのも簡単！ HTML
Typography The quick brown fox jumps over the lazy dog and feels as if he were in the seventh heaven Header 1: Font, Style, Size, Leading, Colour
ウェブサイトやブログを作るのはめんどくさい、Facebookは登録が手間、だけど自分だけのページが欲しい……。そんなわがままな要求に応えてくれるのが、1ページだけのサイトを簡単に作れるサービス「Populr」です。 Populr.me - One page, get results. https://populr.me/ Populrは、セールスを顧客にアピールしたり、マーケティング戦略として商品を紹介したり、友達とのコミュニケーションツールにしたりとさまざまな使い方が想定されています。本当に簡単にサイトが作れるのか試しに作ってみました。 まずはトップ画面にある「GET STARTED FOR FREE」をクリック。 なお、対応ブラウザーは、Google ChromeとSafariの2種類です。Firefoxなど他のブラウザで利用しようとすると下のような注意書きが出て使用不可なので注意。
学部とは？ 各学部に関連するコンテンツを公式授業および公認団体放送が提供しています。 メールで最新情報をお知らせ 所属すると、学部の最新授業やカリキュラム進捗状況をお届けします。
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
「JavaScriptデバッガー」でできること JavaScirptの処理系が持っている情報はJavaScriptデバッガーを用いて確認できます。今回は処理のフローの確認と、変数に代入されている値の確認をデバッガーを用いて行います。 「ステップ実行」で処理フローの確認 プログラムを書いていて、「ここは必ず処理されるはずなのに、どうして処理されていないの？」「なぜこの関数が呼び出されているの？」と思ったことがあるかと思います。そんなときは下記のようなJavaScriptプログラムを書いて「コンソール」にログを出力させてもいいのですが、もっと良い方法があります。それはJavaScriptデバッガーの「ステップ実行」です。 function factorial(n){ if(n > 0){ var result = 1; while(n > 1){ result = result ・n; n =
「2.5dBUTTON」はフラットデザインに似合うボタンが作れるサイトです。マウスを乗せるとポコッと立体的に浮き上がるボタンが作成できます。作ったボタンはHTML、CSSごとダウンロード可能です。 以下に使ってみた様子を載せておきます。まず、2.5dBUTTONへアクセスしましょう。 試しにボタンを作ってみました。このようにスライダーを調整するだけで色や形を決めることができます。マウスを乗せると上記のようにポコッと浮き上がります。 HTMLとCSSも自動的に出力されるので、あとはこれらをコピペすればOK。 こちらが実際に使っているときの様子です。YouTubeのロゴを作ったり汎用性が高いですね。ぜひフラットデザインのボタンを作成したいときにご活用ください。 2.5dBUTTON （カメきち）
Software Engineer at XB Software EnjoyCSS changed the work process a lot. It minimized time and efforts spent on creating complex CSS styles as it is easy to use. No deep background is required to get complex CSS. I personally like is that with this CSS code generator I can easily create numerous graphic styles and immediately get their code or code of separate elements within seconds., EnjoyCSS g
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
