よく忘れるCSSの小技 - QiitaEvernoteを掃除してたらでてきたCSS系の小技をまとめてみた。 ソースみたら納得するものの時間がったたら忘れるやつ。 サンプルないとわかりづらいかなと思ったので一部追加 よく忘れるCSSの小技 - jsdo.it [css] clear fix
たまに使うと便利なマークアップの原始的デバッグ方法 - FICC Workbook
なんてことのない話ではありますが、マークアップのデバッグ方法の紹介です。 簡単だしちょっと便利なのでたまーに使うんですが、先日同僚が「なるほどー便利っすね」と知らなかったようなのでちょっと紹介してみます。 （メジャーなやり方なのかどうなのかよくわからないけども） *{border: 1px solid #f00 !important;} cssにこれだけ追記して終わり。 見た目は↓こんな感じに、すべての要素に真っ赤なボーダーが付きます。 スマホ対応とかで横スクロールが5pxくらい出ちゃってる〜！ どこだ〜！ デベロッパーツール使ってもわからない〜！ そんな見つけにくい “はみ出し系” を探すのにちょっと便利です。 知らなかった〜って人は使ってみるとちょっと幸せになれるかもしれません。 追記 borderだと要素の大きさに影響するのでoutline の方が良いかもと社内でナイスな意見が出たの
Web開発でIntelliJ IDEAを使うべきNつの理由 - Qiita
Nが何個かはまだ考えていませんが、Web開発でIntelliJ IDEAを使うべき理由について、いくつか書いていきます。 HTML部門 Live Edit IntelliJ IDEAには、Live Editという機能があります。 IntelliJ IDEA上で修正したHTMLおよびCSSを、リアルタイムでブラウザ側に反映させる機能です。 使用できるブラウザや反映できる箇所などに制限はありますが、画面を見ながらHTMLやCSSを調整する場合には重宝します。 (本当はスクリーンショットを入れるつもりでしたが、IntelliJ IDEA 13にしてから動かず…) Emmetサポート EmmetはZen Codingの後継で、少ないキー入力でHTMLに展開してくれます。 このEmmetをIntelliJ IDEAは標準でサポートしています。 機能的にはLive Templatesの一環で提供されて
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
WordPressでCSSプリプロセッサ入門
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
オブジェクト指向CSSの「構造とスキンを分離する」って何？？ ｜ Tips Note by TAM
オブジェクト指向CSS（以下OOCSS）では「構造とスキンを分離する」という言葉を良く見かけます。 最初は具体的にイメージできなかったのですが、おそらくこういう事ではないかと思ったので、調べた事をまとめたいと思います。 サイト制作では、CSSの記述によって更新性などパフォーマンスに違いが出てしまいます。 柔軟に対応しようとして細分化しすぎるとインライン指定と似たものになりCSSの役割を活かず、セマンティックにしようとするとCSSが重複しがちです。 【インライン指定のようになってしまった例】 ・CSS .red { color: #FF0000; } ・html <div class="mainArea"> <h2 class="red">タイトル</h2> </div> 【セマンティックな例】 ・CSS .mainTtl01 { width: 700px; margin: 20px 0;
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは？ Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
http://mtw.cocotte.jp/blog/diary/html/2009/05/07-2234.php
Warning: set_time_limit() [function.set-time-limit]: Cannot set time limit in safe mode in /home/users/1/cocotte.jp-mtw/web/cms/wp-content/plugins/rvg-optimize-database/rvg-optimize-database.php on line 23 404 Not Found ??????????????????? ?????? URL ? https://mtw.cocotte.jp/blog/diary/html/2009/05/07-2234.php ?????????????????????????????
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
Sublime Text2ってエディタがすごくイイ。
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 小さい頃はエラ呼吸
はじめに 今、Twitter Bootstrapが一部のエンジニアで人気です。 Twitter BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 そこで、これからTwitter Bootstrapをはじめてみようと思うエンジニアの人たち向けに、役立つ記事の数々をまとめてみました。 このエントリを書こうと思ったきっかけは、以下のスライドでした。とても分かりやすく、はじめて知るようなサービスなども網羅されており、とても参考になりました。 Twitter bootstrap入門 #twtr_hack jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at
label のススメ | d-spica
label のススメ 2008-07-29 0 0 XHTML/CSS CSS, label, XHTML label要素とその挙動 | Web標準Blog | ミツエーリンクス これを読んでいて，ぼくがやっていることをちょっと紹介しようと思いました。 label の働き お名前 <input type="text" name="name" id="name" size="20" /> このような場合，コントロール本体であるテキストボックス<input type="text" ... />とその説明である「お名前」というテキストは，隣同士に並んではいるけれど，対応していることがはっきりマークアップされているわけではありません。 label要素を使って，次のようにマークアップすることで，「お名前」というテキストとテキストボックスをはっきり関連づけることができます。label要素内のテキストが
[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AGENTOTO88 | Bandar togel 4D Terpercaya & Agen toto #1 Indonesia
Bear CSS - Helping you build a solid stylesheet foundation based on your markup
gcss.info
http://lab.spec5zigen.com/archives/jsdoit_specvol4/
