Compassで簡単、CSSスプライト作成 | 第1回 CSSスプライト作成の基礎
Compassで簡単、CSSスプライト作成 第1回 CSSスプライト作成の基礎 CompassでCSSスプライトが手軽にできるのをご存知ですか？ この記事ではCompassでCSSスプライトを作成する基礎を解説します。業務で使うものですから、生成の仕組みもおさえておきましょう。 はじめに 手作業で作ると、ものすごい手間がかかってしまうCSSスプライトですが、Compassを使えば、非常に簡単に実装することができます。このシリーズではCompassのCSSスプライト機能を解説し、Retinaディスプレイ対応のCSSスプライトmixinを作ってみます。 Compassと私 Compassについては、CodeGridでSassの連載時に、簡単に触れました。 SassとCSS設計 - 運用と管理 | CodeGrid Compass Home | Compass Documentation Com
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
twitter bootstrap を とにかく手軽に始められる雛形 at softelメモ
問題 twitter bootstrap やってみたいんですけど。 twitter bootstrap 都度都度ダウンロードしてくるのめんどくさい。 twitter bootstrap もうちょっとサクッと使えない？ そんなとき。 答え 以下のようなHTMLからスタートすると、何も用意する必要がなく、HTML一枚から始められるでしょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Bootstrapの雛形です</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.
Facebook元役員「プログラミングを学ぶのなら、生涯仕事に困らないことを私が保証しよう。」 / リーディング＆カンパニー株式会社
1990年代後半から2000年代前半辺りまで、プログラミング言語を学ぶなど一部のコンピューターオタクがすることであって、10代や20代の好奇心旺盛な若者が学ぶことにはとても思えませんでした。 当時ちょうどグローバル化が本格的にスタートした時期でもあり、プログラミング言語なんかを学ぶをよりも、英語を学ぶことに力を入れる学生の方が圧倒的に多かったように思います。 ↑1990年代、プログラミングはまだまだオタクの領域だった。 当時、僕の周りでも多くの人がサッカーや野球に夢中になる中で、コンピューターに夢中だった友達は「オタク」、「性格が暗い」など言われ、とても女の子にモテたり、学校で人気者になる存在ではなかったように思います。 そんな中、もし僕がこのビル・ゲイツ氏の言葉を聞いていたらコンピューターに夢中になる友達の視線も変わっていたのかもしれません。 「オタクには親切に。あなたたちは、いつか、彼
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
無料WordPressテーマ BizVektor [ ビズベクトル ]
100%GPLライセンス。無償＆商用利用可。 htmlやcssの知識が無くても管理画面からの設定だけでクオリティの高いサイトが作れます。初期構築・サイトメンテナンスの容易さを追求した初心者に優しい設計。 日本の企業・事業・店舗・塾・クリニックなど、ビジネス用途のホームページに必要な要素・仕様・構成に徹底的に最適化してあります。 スマートフォン対応。 ユーザーの閲覧環境に応じても見やすく自動的に最適化するレスポンシブウェブデザイン。 タイトル・ディスクリプションタグも自動で最適化。キーワードはサイト共通キーワードとページごとのキーワードを設定可能。 いいねボタンやツイートボタン、facebooコメント欄など、主要SNSとも連携しています。 新着情報とは別にサイト内ブログも利用可能。
![無料WordPressテーマ BizVektor [ ビズベクトル ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf3748bfde0fc426e17f802d7f45bd8dcead0ce8/height=288;version=1;width=512/https%3A%2F%2Fbizvektor.com%2Fwp-content%2Fuploads%2Ffacebook_ogp1.jpg)
今どきダサいフォントでWEB見てる人いないよね？Chromeでフォント表示をカスタマイズする方法 - すりゴマ・ドットコム
すりゴマです。 今日もいい感じにすり潰していきますね。 photo by Josh Self さて、日頃ブラウジングしていると、こんな悩みを抱えている人、多いんじゃないでしょうか？ サイト側でMS Pゴシック等のク○なフォントを指定しているサイトに遭遇し、「大島の生写真あげるよ！」と言われもらった写真がAKBの大島優子ではなく森三中の大島だったときくらいのショックを受けて立ち直れない。 とか、 やっぱりWEBは好きなフォントで見たいよ。 とか。 まぁ前者はすりゴマくらいかと思いますがw、今日は上記のような悩みを解決するために、Chromeで好きなフォントを指定してバッチリ表示する方法をご紹介したいと思います！ (・∀・) 「Custom.css」で解決・・・しない！ MS Pゴシックとか使ってんの？ え？フォントに？ とかダジャレ言ってる場合ではありません。 さてChromeでのフォントの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cdnjs - The #1 free and open source CDN built to make life easier for developers
モダンCSS設計の解説サイトまとめ - Qiita
有用なCSSフレームワークをまとめた・FRONT-END CSS FRAMEWORKS
CSSのセレクタがちょっとあやふやな人はやってみて！ 楽しみながらCSSのセレクタを学ぶ -CSS Diner
JavaScriptやCSSを圧縮／軽量化できるサービス「Minifier」 | ライフハッカー・ジャパン
finefinefine.jp