コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 ｜https://wp.yat-net.com/name
2012年 01月 12日 コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 カテゴリ： Sass タグ：CodingSassコーディング効率化 CSSのメタ言語として登場したSass。去年から認知はしていたのですが中々手を出しておらず、年が開けて「やってみよう！」と思い起こして使って見ました。 Index 1.Sassとは 2.インストール 3.SassファイルをCSSファイルに 4.実際に作る 5.参考文献 1.Sassとは Sassがなんなのか知らない人も居ると思うので簡単に説明すると、CSSファイルを作成するために扱うプログラムのようなもので、直接CSSファイルを作成するのではなく、CSSよりもシンプル且つ構造化した記述でSCSSというファイルを作成し、そのファイルからCSSファイルに変換（コンパイル）します。 コンパイルされたフ
:nth-child()疑似クラス (E:nth-child(n))｜セレクタ｜CSS HappyLife ZERO
CSS3で定義された:nth-child()疑似クラスは、ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを適用します。 尚、n番目というのは隣接している要素を全て数えるので、間に別の要素が有るとその要素もカウントしてn番目にスタイルが適用されます。 この疑似クラスは、偶数と奇数で指定を変えしましまにするとか、何番目だけ指定を変えるといった事ができます。 対応ブラウザ :nth-child()疑似クラスのサンプル ol li:nth-child(2n) { color: green; } ol li:nth-child(5) { color: purple; font-weight: bold; } <ol> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト
スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」:phpspot開発日誌
スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」 2011年04月19日- Adapt.js - Adaptive CSS スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」。 見ているユーザによってディスプレイのサイズなんかはまちまちで、ブラウザのサイズも結構違いますね。 このフレームワークを使えば、幅が600〜800px は a.css、800〜1200px の場合は b.css のように使い分けるのが容易になります。 端末の違いなんかもCSSによって分けてしまえると、プログラム的な無駄な分岐を省けて綺麗に作れますね。 ここら辺の分岐を簡単な使い方で勝手にやってくれるのがAdapt.js。スマートフォン向けサイトなんかにも使えます。 iPhoneだと縦で大体320p
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
![[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
［翻訳］これからHTMLとCSSを学び始める君へ
この記事は『Stack Overflow』に投稿された、user553944による質問「Would you recommend starting from HTML5 & CSS3 for beginners?」と、Boldewynによる最も評価されていた回答を翻訳したものです。 翻訳は完全ではありませんし、だいぶ意訳している部分がありますので、ぜひ原文もご参照ください。 また『Stack Overflow』の質問・投稿はCreative Commons Attribution-ShareAlike 3.0 Unportedですので、この記事も同様のライセンスで公開しています。 user553944による質問私はウェブデザイン・開発の世界に入りたいと考えているミドルスクールの学生です。 私は小さいころからウェブ（を使うこと）に興味を持っていましたが、今は“作る”側になりたいと思っています。
[CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート
GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。 デモページ（当方日本語化） 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ（当方日本語化） <a href="#" class="button">Post comment</a> <input class="
[CSS]6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす
スタイルシートで実装する6つの代表的なCSSレイアウト方法、それぞれ実例を見ながら、その長所と短所を紹介します。 Pros And Cons Of 6 CSS Layout Patterns: Part 1 Pros And Cons Of 6 CSS Layout Patterns: Part 2 [ad#ad-2] 下記は各ポイントを意訳したものです。 Fixed-Widthレイアウト Fluid/Liquidレイアウト Elasticレイアウト Hybridレイアウト Responsiveレイアウト Fluid/Elastic Gridsレイアウト Fixed-Widthレイアウト Firxed-Widthは、幅の全体を絶対値（px）で指定するスタティックなレイアウトです。このレイアウトを使用する場合には、ユーザーのために最適な幅を調査し、設定する必要があります。 典型的な例では大き
HTML5/CSS3の情報をクリップ！ :: dotHTML5
新刊 書籍：これからのJavaScriptの教科書 - モダンJavaScriptを基礎から実用レベルまで (アマゾン) / グーグルがrobots.txtでサポートするフィールドは4つだけ、それ以外は無視 (海外SEO情報ブログ) / UIデザインにアクセントを加える37の簡単なテクニック、完全版 (PhotoshopVIP) / マッチングアプリ個人開発したら逮捕されかけた話 (しょーへー | Zenn) / グーグル、Web Vitals拡張機能を廃止へ - DevToolsへの移行を (窓の杜) / JavaScriptランタイムのBun、C言語のコンパイルとJavaScriptプログラムからの実行をサポート (Publickey) / 任意の画像内から被写体を自動検出し、背後にテキストを挿入できる「Text Behind Image」 (かちびと) ... 続きを読む 新刊 書籍
12 Fun CSS Text Shadows You Can Copy and Paste
Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity. Today we’re going to run through several text-shadow examples that you can copy and paste for your own work. 2 Million+ Digital Assets, Wi
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
嫌われまくりのIE6の現状と仲良く付き合う方法
2017年7月14日 Web関連記事, 便利ツール TwitterでWeb屋さんのつぶやきを見ていると「IE6のせいで…」「IE6さえなければ…」なんて声がよく聞こえてきます。産みの親からも見放されつつあるInternet Explorer 6。一体なぜここまで嫌われているのか？どれほどの人が涙を流してきたのか？そんなIE6と付き合っていく方法は？IE6にまつわる情報を簡単にまとめてみました。 ↑私が10年以上利用している会計ソフト！ IE6のシェア 2001年に世にリリースされたInternet Explorer 6。通称IE6。リリースされて10年たった今も色んな意味で話題のこのブラウザーを使っているユーザーは現在どれくらいいるのでしょう？ マイクロソフトが（！）IE6撲滅のため「Internet Explorer 6 Countdown」というサイトで世界中でIE6がどれくらい使われ
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
[CSS]順序付きリストol要素を視覚的に美しくスタイルするチュートリアル
プレーンな状態で割とスタイルされるol要素を視覚的に美しくするスタイルシートのチュートリアルを紹介します。 Firefox4でのキャプチャ 順序付きリストを美しくスタイルするチュートリアル HTML HTMLは非常にシンプルなol要素で実装します。 <ol> <li>List item one</li> <li>The second item on the list</li> <li>Number three is a bit longer, with some lorem ipsum for good measure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS HappyLife ZERO
IDEA * IDEA
CSSの制作・検証に役立つChromeの機能拡張のまとめ
IDEA * IDEA
ユニークなエフェクトを実現するtext-shadowの設定いろいろ | IDEA*IDEA
IDEA * IDEA
