印刷にも対応！imgタグでCSSスプライトを使う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です(●´⌓`●) 今回は「imgタグでCSSスプライトを使う方法」について説明します。 そもそもCSSスプライトって何ぞや？という方は、下記ページに詳しく説明されているので、見てみてください。 CSSスプライトで画像を円滑に表示させる – Webクリエイターボックス： https://www.webcreatorbox.com/tech/css-sprite/ どうしてわざわざimgでCSSスプライト？ 一番の理由は、imgタグなら印刷したとき印刷物に反映されるからです。 対比画像の、フォーム下部のボタンに注目してください。通常のスプライトでは印刷に反映されないんです。 ユーザ側で印刷の設定をいじればbackground-imageでも印刷できるんですが、やはりデフォルトでできた方が親切ですよね。(●´⌓`●) 便利なテクニックなので、覚えておきましょう！ CS
compassのベンダープリフィックス制御 « NAVER Engineers' Blog
歳晩の候、皆様におかれましてはますますのご繁栄の事とお喜び申し上げます。 NHN Japan ウェブサービス本部開発1室UITチーム(長い) 富田(@a_t)です。 CSS Preprocessor Advent Calendar 2012の3日目、css書くのに便利だからといって盲目的にcompass使ってないでちょっとは中でなにをしているか知っておいてもよかろうもん ということで タイトルのとおり、compassがベンダープリフィックスの制御をどのように行なっているかについて書きます。compassのソースをまだ一度も見たことがない人向けの内容です。 sassについてよくしらない、というかたは過去の記事をよむとわかるかもしれません。 CSS3関連のmixinはなにをしてるか compassのCSS3関連のミックスインは、引数に値を渡してあげるだけで、しちめんどくさいベンダープリ
火の鳥、ブラックジャック、ブッダがまさかの「全巻無料」 スマホで期間限定
電子書籍サービス「Yahoo!ブックストア」が、手塚治虫の名作漫画「火の鳥」「ブラックジャック」「ブッダ」の全巻無料キャンペーンを5月29日～6月4日までの7日間限定で開催しています。スマートフォン／タブレットアプリ限定で、PCからの閲覧はできませんが、アプリさえダウンロードすれば会員登録不要で作品を楽しめます。 7日間限定の太っ腹企画 アプリのトップページにある「無料の本」から、今回のキャンペーンコーナーを選択すると、キャンペーン対象作品の全巻がズラリとリストアップされます。自分の読みたい巻をタップするとダウンロードが始まり、ダウンロードが終われば中身を読めます。 PCからは見られません。スマホでアプリをダウンロードだ！ 試しにiPhone 4Sにアプリをダウンロードして作品を読んでみましたが、アプリ上でサクサクと作品を読み進められました。期間限定とはいえ、名作をこれほど手軽に無料で読め
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
CompassでCSS Sprite生成（手動生成、Retina対応） - 一から勉強させてください
今回は、前回やったCompassでCSS Sprite生成〜導入、自動生成〜の続きとして、CSS Spriteの手動生成とRetina対応について書きたいと思います。 ちなみに前回と今回のサンプルをまとめてこちらに公開しております。 https://github.com/danimal141/create_css_sprite それではまずCSS Spriteの手動生成についてです。 前回は @import "compass"; $sprite_images-sprite-dimensions:true; @import "sprite_images/*.png"; @include all-sprite_images-sprites;という記述だけであっという間にスプライト用のCSSができちゃいましたが、これ以外にも同様のスタイルを生成する方法があるみたいなので試してみました。 これ。
sassの抑えておきたいfunctionの使い方 « NAVER Engineers' Blog
こんにちは。 年末の予定はぶっ通しでスカイリムにつぎ込むことが決定したUIT富田です。 今回は、Less & Sass Advent calendar 2011の6日目として、 sassのfunctionについて解説します。 すっぽりハマった四則演算の落とし穴 sassは値の四則演算をサポートしており、10進数だけでなく、16進数の値であってもよしなに計算してくれます。 color: #a3a4a5 + #111111; ↓ color: #b4b5b6; 16進数と10進数でもエラーにならず計算してくれます。（普通あまりやらないとは思いますが） color1: #000000 + 1; color2: #000000 + 15; ↓ color1: #010101; color2: #0f0f0f; この16進数の計算は、結果が#fffffを上回った場合、上回った分は切り捨てて、す
sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する | CSS-EBLOG
sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する カテゴリ：sass 2011年12月20日 22:45 この記事はLess & Sass Advent calendar 2011の20日目として書いている記事です。 sassを使った繰り返し処理の基本 sassにはプログラム言語と同じような処理が存在します。 その中でも繰り返し処理をピックアップして、ちょっとめんどくさい処理を簡単にする方法をご紹介します。 単純な繰り返し処理 sassには繰り返し処理に使える文として、@each と @for があります。 JSなどではおなじみですね。 使い方も、他のプログラム言語のものと同じです。 @eachは指定したリストを順番に処理するもの、@forは指定した数値の間で繰り返し処理をするものです。 また繰り返しではありませんが、めんどくさい処理をまとめる、という意味で@function
kanapple.net - KANAPPLE.NET
Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.php on line 149 Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.php on line 149 Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.php on line 149 Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.
Gruntによる継続的なビルド環境を求めて 〜 package.jsonと0.4.0のこと
安定したビルド環境 gruntの広まりを感じる...。みんな...package.jsonをつかうのです...そしてバージョンにも気を遣ってstableな環境を目指すのです....安定して使えないビルド環境はいくらナウくてもゴミです....。 — aho.mu (@ahomu) December 11, 2012 夏前に、nodeでビルドってなんかナウい(∩´∀｀)∩ワーイって使い始めて、秋から現職のプロジェクトで実践してみた結果、そんな当たり前な視点を忘れないようにしなければ、と強く思った次第。 今回は下記の2点を紹介します。 Gruntと永く付き合うためのノウハウとして、package.jsonを使った管理について 賞味期限の短いノウハウとして、Grunt 0.4.0への移行に関して Gruntイイヨーの続きとして、今後付き合っていくために必要なことを改めておさらい。 1. packa
[web制作]humans.txt ― webサイトに基本情報を設置しよう
robots.txtとは robots.txtは、検索エンジン向けの情報を記述したテキストファイルで、書式に従って書くことで検索エンジンのクローラーにクロールして欲しくないページを知らせたりします。というか、まあ基本的に出来ることはそれのみですね。例えば、 User-Agent: * Disallow: / こうrobots.txtに書くとルート以下全てのファイルへのクロールを禁止します。 決められた書式があって、それに沿った形で書かれていればクローラーはある程度いう事を聞きます。 humans.txtとは robots.txtがロボットの為の説明であるなら、humans.txtは人間の為の説明です。人間がサイトについて受け取りたい情報としては誰が書いたのか、何を使って書かれたのか、というようなことでしょうか。 そしてこのhumans.txtを設置する事を推奨するサイトもあり、面白いなーと
![[web制作]humans.txt ― webサイトに基本情報を設置しよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/e981a6ebf231b21c0cf0b1faa5242654779eb944/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F05%2Fwebsite-humans-txt-01-150x150.png)
SlickMap CSS: A Visual Sitemapping Tool for Web Developers | Astuteo
Slickmap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It's suitable for most web sites – accommodating up to four levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. Features and Benefits Eliminates the need for additional softwarePlan s
Facebookプロフィールを乗っ取るブラウザー拡張機能
世界ベンダーが公開しているセキュリティ関連ブログから、気になる話題を紹介する。今回はまず、Facebookのプロフィールを乗っ取ろうとするブラウザー拡張機能について。米マイクロソフトが注意を促している。 この脅威は最初にブラジルで確認され、マイクロソフトは「Trojan:JS/Febipos.A」として検出している。特に米グーグルの「Chrome」と米モジラの「Firefox」をターゲットにする。同マルウエアは、インストールされると、Chromeに対しては「du-pont.info/updates/削除済み/BL-chromebrasil.crx」というURLを、Firefoxに対しては「du-pont.info/updates/削除済み/BL-mozillabrasil.xpi」というURLを使って自身をアップデートする。 その後、ユーザーがFacebookにログインしているかどうか確認
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
Bower で JavaScript パッケージを管理する | 1000g
Bower とは？ BOWER: A package manager for the web Twitter 製の JavaScript パッケージ管理ライブラリ。Ruby の Gem, PHP の Composer みたいなもの。 プロジェクトで使用する JS ライブラリとバージョンをファイルに記述して管理できるため、バージョン管理が容易になります。 インストール CentOS 6 でインストールする手順です。 node.js をインストールする。 EPEL が使えれば yum install nodejs で一発。 npm をインストールする。 パッケージが公開されていないので、ソースからインストールまたは curl http://npmjs.org/install.sh | sh (Fancy install) で。 npm で bower をインストールする。 sudo bower
howtohp.com - howtohp リソースおよび情報
This domain is registered at NameSilo. If you are the owner, start administering it at NameSilo.com. If this is not your domain, find similar names that work for you. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it
masaplabs.com - このウェブサイトは販売用です！ - masaplabs リソースおよび情報
このウェブサイトは販売用です！ masaplabs.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、masaplabs.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス
書体デザイナーと話し、長年の疑問を全て解消してきました 先日、[クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきましたという記事を書きました。このときはたまたま英Monotype社の書体デザイナーの大曲都市さん(@Tosche_J)としっかりと話をする機会を得たわけですが、そこで私がフォントについて「こうだと思っているけど実際どうなのか」という質問をたくさんぶつけてきました。 私としてはすごく納得がいき、フォントというモノに対する認識がはっきりしました。なので今回はその都市さんから聞いた話を踏まえた上で私の現時点でのフォントについての考え方の着地を6つのアドバイスとして書いてみます。 特に独学でデザインの勉強をしてきた人は「こういうものだと思うんだけど、皆は実際どう考えているんだろう」という悩みを抱えているはずだと思うので、それに対する答えを出したいと思います
![[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0e8c9c98b8c210bbed0a0d39aed243119c1eba7/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F05%2Ffont-six-stance-11-150x150.png)
エホバの証人公式サイトがアツい！ - ２４時間残念営業
2013-05-29 エホバの証人公式サイトがアツい！ どうにもこの俺の愉快さを分かち合っていただきたくて、隠居生活いったん中断ってことで更新にまいりました！ そうなんですよ。ＰＶにさほどの執着がないとかなんとかいっても、やっぱり「多くの人に読んでもらわないとおもしろくもなんともない内容」ってのがあって、今回みたいなのがまさにそうなんですよ。 というわけで、エホバの証人公式サイト。 いちおー引用文は斜めの文字にしてみたりしました。 発端はですね、仕事終わってあーなんもやる気しねーインターネットでもしようかなーと思ってバルカン言語連合についてなんとなく調べてたんですけども、ブルガリア語やらセルボクロアチア語については要領のいい説明が見つかったんですけど、ギリシャ語がよくわかりませんで「ギリシャ語 特徴」でぐぐってたら、なんでか知らんけどフランス語の特徴ばっかり引っかかる。なんかねーのかと思っ
WordPressのテーマにattachment.phpを追加して、添付ファイルページを失くしてみた - SUSH-i LOG
自分ではなく第三者にWordPressを使って貰う場合に、メディアを追加した時に添付ファイルのページが出来てしまうことが煩わしく思っていました。 自分が更新するのであれば、リンクを切ってしまうか、ファイルへのリンクを貼っておけば良いのですが、第三者が更新を行う場合は確実に防げるかと言われると言い切れない所があります。 そこで、添付ファイルのページにアクセスしてしまっても、ファイルを表示してしまえば良いのだ、と思い立ってテーマファイルを調べてみました。 添付ファイルのページについて そもそも添付ファイルのページはテーマファイルのどのファイルが優先されるのか、というところから。 優先順位は下記のとおりとなります。 MIMEタイプ.php MIMEサブタイプ.php MIMEタイプ_MIMEサブタイプ.php attachment.php single.php index.php MIMEタイプ
大友良英さんが朝ドラ「あまちゃん」スペシャルバンドでコンサート 300人を招待 - はてなニュース
アサヒビールは6月18日（火）、東京都墨田区にある本社ビルの1Fロビーで「大友良英 with あまちゃんスペシャルビッグバンド」のコンサートを開催します。メインゲストは、NHKの連続テレビ小説「あまちゃん」の音楽を手掛ける大友良英さんです。 ▽ ニュースリリース 2013年04月22日｜アサヒビール ▽ 大友良英 with あまちゃんスペシャルビッグバンド（PDF） 「『大友良英 with あまちゃんスペシャルビッグバンド』アンサンブルズ・パレード・プレ・コンサート」は、「あまちゃん」の曲を中心に大友さんの作品を演奏する企画です。大友さんのほか、サックスの鈴木広志さんやアコーディオンの大口俊輔さんなど、「あまちゃん」の音楽制作に参加している14人のアーティストが演奏します。 開場時間は午後6時15分で、開演時間は午後6時45分。終演予定時間は午後8時45分です。同コンサートでは、退場の際に
むくみを取るのに必要なのは“水”だった？ 正しいむくみ対策とは - はてなニュース
朝起きると顔がむくんでいたり、デスクワークの後に足が気だるかったりしませんか？ こうした「むくみ」は、放っておくと太って見える原因にもなってしまいます。水分を取るとむくんでしまうと思われがちですが、正しい水分補給も対策の1つです。自宅でも簡単にできるむくみ対策法を紹介します。 ■ むくみの原因とは ▽ サービス終了のお知らせ - gooヘルスケア むくみは、カリウムの不足やリンパ液の流れが悪くなった結果、血管から水分が外ににじみ出ていくことで起こります。睡眠不足や塩分の取り過ぎ、運動不足などは、むくみをひどくする原因です。血行を良くすることが、むくみの解消につながります。 ▽ 目のクマとむくみを取る11の方法 | ライフハッカー［日本版］ 塩分を取り過ぎると体は水分を蓄えようとするので、その結果むくんでしまうことになります。血液の循環も悪くなるので、皮膚の上から見た血管が青っぽくなってしま
江戸時代にタイムスリップ！ ネット上で楽しめる浮世絵のすすめ - はてなニュース
葛飾北斎の「冨嶽三十六景」に歌川広重の「東海道五十三次」――数々の名作を生み出した「浮世絵」は根強い人気があります。そんな浮世絵をネット上で閲覧できるのはご存じですか？ 美人画、風景画、風俗画など幅広いジャンルを持つ浮世絵を楽しむためのエントリーを紹介します。 ■ マンガやアニメの原点？ 浮世絵の基礎知識 浮世絵は、江戸時代に成立した日本絵画。「浮世」という言葉には「現代」という意味があり、当時の人物や流行、風景を描く写真集やマンガのような役割を持っていました。現在では、当時の文化や生活様式を知ることができる貴重な資料にもなっています。 ＜ゴッホやモネにも影響を与えた浮世絵＞ 浮世絵は、ゴッホやモネといった印象派の画家たちに大きな影響を与えたといわれています。 ▽ http://ukiyoe.wafusozai.com/archives/29 ▽ http://www.art.tokush
食べて飲んで吉祥寺の街を散策 「吉祥寺バル祭り」7/7から3日間 - はてなニュース
東京・吉祥寺の街を食べたり飲んだりしながら散策できる「第1回吉祥寺バル祭り」が、7月7日（日）から7月9日（火）まで開催されます。参加店から好きな4店舗を選び、店員にチケットを渡すと、各店が用意する特別メニューを楽しめるというもの。前売り券の第1弾は、5月26日（日）までオンラインで販売されています。参加資格は20歳以上です。 ▽ http://kichijyojibar.info/ 吉祥寺バル祭りのチケットは4枚つづりで、チケット1枚を使うと各店自慢のお酒や料理を1品ずつ楽しめます。カフェやピザ店など、15以上の店舗が参加。ハワイアンダイニング「カウラナコーンバレー」は、ローストビーフとアルコールドリンク1杯を提供します。開催時間は各日午後6時～午後11時。場所は吉祥寺駅周辺です。どの店へ行くかは自由に選べるので、自分なりのグルメツアーを企画してみるといいかもしれません。 チケットが使い
てんかんを克服した患者に驚きの事実 右脳と左脳でそれぞれ別の意思 : まとめたニュース
2013年05月27日 Tweet てんかんを克服した患者に驚きの事実 右脳と左脳でそれぞれ別の意思 病気・病院・医療関連│23:55│コメント(37) 1 ： ポキール星人Zφ ★ ：2013/05/24(金) 16:01:27.81 0 米国のある患者は重度のてんかん発作を持っていました。てんかん発作は、脳のある場所で起こった過剰な電気活動が脳全体に広がって起こります。ひどいと薬で抑えられません。この患者は、脳の左と右をつないでいる神経線維を切る手術を受けました。過剰な電気活動が反対側まで広がらなくするためです。手術は成功し、てんかん発作は治まりました。しかし、その後の心理テストで驚きの事実が明らかになりました。 実は、右脳にも左脳にも言語の能力を持つ人がごく一部います。この患者はそういう一人でした。心理学者が巧妙な方法で片方ずつの脳に問いかけると、両方の脳と意思の疎通ができたのです。
「Zico: The Official Game」について，“サッカーの神様”ジーコ氏に聞く。人生・技術が凝縮された初めての“私のゲーム”
「Zico: The Official Game」について，“サッカーの神様”ジーコ氏に聞く。人生・技術が凝縮された初めての“私のゲーム” 編集部：Orecchi 元プロサッカー選手で日本代表監督を務めた経験もあるジーコ氏が監修したスマートフォン向けアプリ「Zico: The Official Game」（iOS / Android）が，現在配信中だ。 本作は，サッカーのフリーキックを指先で楽しみながら，ジーコ氏の経験や記憶を追体験できるという作品。価格はiOS版が85円（税込），Android版が102円（税込）となっている。 関連記事 “ジーコ”の記憶を追体験。スマホ向けサッカーアプリ「Zico the official game」が登場 本作は，サッカーのフリーキックを指先で楽しみながら，ジーコ氏の経験や記憶を追体験できるという作品。空き缶やゴミ箱，ゴールにかけたユニフォームを的にフ
こんな子供の撮り方があったとは…「何歳までこの写真を撮ってくれるかな」という絶賛されていた写真 : らばQ
こんな子供の撮り方があったとは…「何歳までこの写真を撮ってくれるかな」という絶賛されていた写真 子供の成長記録を撮るのは、親にとっての楽しみであり特権でもあります。 赤ちゃんのときから、あれこれとポーズや場面を選んで撮影をするのですが、とてもユニークな撮影の仕方をしている人がいると、海外掲示板で話題になっていました。 「何歳になったら嫌がるかな」と題された写真をご覧ください。 これは面白い！ 本人の1年前の写真を持たせて撮影していく、というものです。 ちなみに今は2歳だそうで、来年はこの写真を持たせた写真、再来年にはさらに重ねて……と繰り返していくことになります。 どこまで続くのか楽しみですね。 海外掲示板では、このユニークな撮影スタイルに感心の声が多数上がっていました。 ●このアイデアは自分が子供が出来た時に盗ませてもらう。 ●すごく良いアイデア。止めないでずっと続けて欲しい。 ●自分の
47NEWS（よんななニュース）
［全国高校総体（インターハイ）2024・自転車男子4000ｍ速度競走］水谷悠平（吉田）速いペースにも冷静に「周り見て走れた」 昨年予選敗退の種目、「うれしい」表彰台で成長を実感
千葉市長「印鑑証明という前時代的な本人確認手段が見直せない行政に合理化など期待できません。」
熊谷俊人（千葉県知事） @kumagai_chiba 2009年、千葉市長に就任（当時最年少）、3期。2021年、第21代千葉県知事に就任。 県政の動きを発信するだけでなく、県民の皆さんの意見や英知を結集し、千葉愛を深めるハブとなります。お気軽にご意見をお寄せ下さい。妻と子ども2人。 kumagai-chiba.jp 熊谷俊人（千葉県知事） @kumagai_chiba 役所文化の象徴：ハンコ。印鑑を忘れた市民に出直しさせることを不思議に思わない体質の裏には、日頃内部で決裁も含めて殆どをサインではなくハンコで行っている実態があり、今後サインに改めるよう指示したところ、「走り書きはダメ。本人と分かるよう綺麗に」と趣旨がずれて指示が下りたとのこと 熊谷俊人（千葉県知事） @kumagai_chiba 文化の違いの中で意図に適う指示を現場の職員まで伝えることの難しさを感じます。「シャチハタだから
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デブハゲ
Hitch(ヒッチ)-エンジニアの無料求人サービス
Gruntをv0.3からv0.4にアップデートした | jekylog