このエルマークはレコード会社・映像制作会社が 提供するコンテンツを示す登録商標です。RIAJ40015055 RIAJ50085001
このエルマークはレコード会社・映像制作会社が 提供するコンテンツを示す登録商標です。RIAJ40015055 RIAJ50085001
2012 年の 4月に CR(勧告候補) になった，CSS Image Values and Replaced Content Module Level 3 とそこで規定されてる，Linear Gradients: the ‘linear-gradient()’ notation の幾つかのブラウザでの対応具合が面倒な事になってるなぁってお話． 経緯とか 最初期 もともと，グラデーションだーと提案された頃には，WebKit の独自実装としてこんな感じの書式だった．(cf. Introducing CSS Gradients) background: -webkit-gradient(linear, left top /* 始点 */, left bottom /* 終点 */, from(#000) /* 始点の色 */, to(#FFF) /* 終点の色 */); 途中にもっと色を挟むと
どもども、LESS使いのこもりです。 Webデザイナー界隈では「Sass＋Compass」での制作が人気があるようで。こういったツールのバージョンは頻繁にあがっていくものですが、うっかりGemsをまるっとアップデートしてしまうと「うげーー、このバージョンだとほにゃららー」みたいな事態を引き起こしかねません。 ひとりならともかくチームの作業になるとバージョンの相違は問題になるでしょうし、「任意のプロジェクトで特定のバージョンのものを使いたい…」とかないですか？ ここではCompassを例にとって説明します。CompassはGemを使ってインストールしますが、素直に「gem install compass」「compass watch」するのではなく、間に「Bundler」を噛ませておくと安心かもしれません。 Bundlerは、Gemのバージョン管理というかプロジェクト毎にその依存関係とかを管
ruligh.net このドメインを購入する。 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
<html> <head> <title>Example neo1<title> <style type='style/css'> /* Example neo1 By : Indam; http://www.indaam.com */ /* 1 */ .neo1{ width: 0; height: 0; float: left; border-style: solid; border-color: transparent #555; border-width: 32px 0 0 32px } /* End 1 */ </style> </head> <body> <span class='neo1'> </span> </body> </html> <html> <head> <title>Example neo2<title> <style type='style/css'> /*
追記：「場合によって」とかが文章中に抜けてるくさい なんだか言いたいことをまとめられてないし、ちょっと書いてるうちに間違った書き方してるとこもありそうな感じでぐちゃぐちゃになっちゃったけど、なんとなく雰囲気はわかりそうなとこまではあるし、あとからもうちょっとずつまとめるってことで、これはこれで悩んだ形跡としてポストしちゃっとく。 Appleはそもそも、日本でのスマホ向けページみたいなやつは想定してないんだよ。多分。 PCのサイトふつーに表示できるのに、わざわざスマホ向けのページ別に作って管理やら運用やらをカオスにする必要ないじゃん。 っぽいもので、Appleが想定してるのは Web application page。 Webアプリならスマホ向けっての全然あり。 でもWebアプリでなくても、アプリって拡大なんてしないでしょ？ 拡大しないで幅変えるだけ 。 だから、日本でいうスマホ向けページ
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
こんにちは。 馬場です。 今回はIE6.0のバグについてお話します。 1つのタグにidとclassを両方設定した際に 起きるバグです。 (わかりづらくて、すいません。。。) このバグが発生する条件は 少し限られていて、 idで設定したスタイルを classを付け替えることによって、 見た目を変更しようとすると 発生します。 ページのレイアウトは一緒だけど、 色違いのページが数パターンある という場合などで 使用するかもしれませんね。 ▼バグの発生条件▼ ・IE6.0で確認している。 ・1つのタグにidとclassを設定している。 ・classを切り替えることにより、スタイルを切り替えている。 ・セレクタの最後がそのidとclassの指定で終わっている。
先日のエントリー「jQuery 〜 なんだか動作が違う」。 どこが間違っているのかに直ぐに気づかずに悩んだ。大分恥ずかしいけど、悩んだのでメモ。 問題は次の3つの書き方のいずれにも同じ動作を期待したのだが、2番目の書き方だけ期待した動作をしないこと。 １つ目。 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <head></head> <script type="text/javascript" src="jquery-1.4.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ var focusFunc = function(){ alert("focu
これはありがたい！と思えるSass/Compassに関するスライドが2つほどSlideshareにアップされていたので、このブログでも紹介させていただきます。去年行われたHTML5 Conference 2012でNHN Japanのマークアップエンジニアの方から発表されたもので、すでにSassを使ってCSS運用を始めている方からの貴重な情報です。 前編、後編とあるので、それぞれに対して自分なりに重要だと思ったこと、また、それらに対する考察をまとめてみました。自分が管理・運営しているウェブサイトのCSS管理も、Sass/Compassを使ってやりたいなぁと思う今日このごろです。時間的な初期投資は必要だけど、長期的に考えたらメリットも多く時間の節約にもなりそうです。 今回の投稿では、まずは前編から。 前編で気になったところのまとめ 「実践Sass 前編 — HTML5 Conference
この記事は Frontrend Advent Calendar 2013 16日目のエントリです。 今年は色々なツールをワークフローに導入したり使用したりしました。中でもSassとGruntとStyleGuideツールの導入が印象深いので簡単におさらい的に紹介します。 Sass & Compass 「CSSでも十分書けるし」と思って導入を渋ってたSass。OOCSSとかに関するスライドなどから影響を受けてたこともあって、実務で書いてたCSSをSCSSで全部書きなおすというところから始めました。 モバイル時代におけるCSSの設計と実装 CSSプリプロセッサの取扱説明書 ちゃんとCSSを書くために - CSS/Sass設計の話 WebデザイナーのためのSass/Compass入門 SMACSS SassとCSS設計 CompassはMixin便利だなーと思って使いまくってたんですが、このエント
Documentation for the Sassy CSS version of Twitter Bootstrap by Aaron LademannSleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development. Download Sass Bootstrap GitHub project Examples Version 3.0.0 Introducing Bootstrap. Need reasons to love Bootstrap? Look no further. By nerds, for nerds. This Sassy version of Twitter Bootstrap was built by @alademann
描写のプロセス initial-scaleを指定した場合 初期値補充：viewport width = 0（viewport height = 0）（それぞれ指定がない場合） 表示域を算出：表示域 = ウィンドウサイズ / initial-scale ドキュメントサイズ決定：表示域・コンテンツサイズ・viewportの中で最大の値 描写：決定したドキュメントサイズとinitial-scaleで描写 initial-scaleを指定しない場合 初期値補充：viewport width = 980px, viewport height = 1091px（それぞれ指定がない場合） ドキュメントサイズ決定：コンテンツとviewportで大きい方の値 倍率算出：ドキュメントがウィンドウ内にぴったり収まるようにinitial-scaleを計算（縦と横で大きい方のinitial-scaleを適用） 描写
意外と知られていない会計の知識。元ITエンジニアの吉田延史氏が、会計用語や事象をシンプルに解説します。お仕事の合間や､ティータイムなど、すき間時間を利用して会計を気軽に学んでいただければと思います。 「お茶会計」も早いもので50回を超えました。今回は、エンジニアが知っておきたい会計知識をカテゴリ別にまとめた記事リンク集です。 各回とも、前提となる会計知識を含めて解説しています。会計知識を身に付けるための足がかりとしてチェックしてみてください。 ◎ITエンジニアとして知っておきたい22の会計知識【簿記レベル編】 簿記3級＆2級レベルの知識を身に付けるための解説 決算書を読むための解説 何かと身近な税金についての解説 ◎続・ITエンジニアとして知っておきたい21の会計知識【ニュース＆社内業務編】 経済ニュースを理解するためのキーワード解説 意外と知らない社内業務を知るための解説 会計周囲の法律
タイトルの通り、Google Chromeには「最小フォントサイズ」という設定項目が存在します。 デフォルトの設定値は「10px」。この状態だと、CSSで10px未満のフォントサイズが指定されている要素に関しても、一律フォントサイズ10pxで表示されます。 そのため、最小フォントサイズを以下の大きさを指定している要素の見た目が、Chromeとそれ以外のブラウザで異なってしまう可能性があるので注意が必要です。 Chromeのデベロッパーツールから確認できるCSSプロパティの値が、以下のように10px以下になっている場合も、実際は10pxで表示されるんですよね。（実際僕もこれが原因で数分ハマリました。） 10px以下のフォントサイズを指定することはそうそうないと思いますが、個人的にはtypoとかもあるので、ちょっと困りものだと思います。 設定方法 以下の手順で簡単に設定できます。（Google
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やプラグインをインストールして使用します。 プラグイ
GruntとGruntプラグインはNode.js パッケージマネージャーであるnpmを使用してインストールと管理を行います。 このドキュメントはGrunt 0.4.xのために書かれていますが、Grunt 0.3.xについてもまだ有効です。 ただ、0.3.xでのプラグイン名とタスクの構成オプションが"Gruntfile"の項目のものとは異なる場合がありますので、注意してください。 CLIのインストール CLIの動作について 存在するgruntプロジェクトの動作 新しいgruntプロジェクトの準備 package.json GruntとGruntプラグインのインストール Gruntfileについて 更に詳しく知るために CLIのインストール もし、過去にgruntをグローバル上にインストールしていた場合、まず始めにそれを削除する必要があります。 npm uninstall -g grunt 最
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
