はてなブックマーク

サンプル1 ウィンドウの幅を640px以下にすると、違う画像が表示されます。 HTML <p class="logo"> <img src="img/latele_logo.png" alt="Lateleロゴ"> </p> img { vertical-align: top; } @media only screen and (max-width: 640px) { img { max-width: 100%; height: auto; } } .logo { width: 300px; height: 300px; margin: 20px auto; text-align: center; background: url(../img/latele_logo_symbol.png) no-repeat center; } .logo img { display: none; } @

先日、こそこそと作ってたAndroid向けの電卓アプリ「LateCalc」をリリースしました。ボクは企画設計、デザイン辺りを担当してます。 LateCalc（電卓） - Google Play の Android アプリ なんで、電卓！？とか色々有りますが、まだ実装したい機能とかが全然実装出来てないので、その辺の紹介はある程度機能が実装された頃に書きたいと思ってます。はい。 さて、今回は久々にCSS関連なエントリーです。 ここ数年、レスポンシブ対応な案件が増えていると思われますが、実際にコーディングしていると色々有りますよね... そんな中でも、画像周りは何かと厄介だったりすると思うので、今回は、PCで見た時とスマホとか（640px以下）で見た時に、違う画像を使いたい場合に使えそうなTipsです。 レスポンシブなんだからPCとスマホで違う画像を使うとかしないで、おとなしく縮小しただけの画像

ブログを書けって大先生に怒られたので、仕事も落ち着いてきたんで以前から書きたかった事でも。 今更なネタなんですけど、「Sassの教科書で一番読んで欲しいところ。はこちら」みたいな感じで、「こちら」にだけリンクになってるケースがいまだに結構多くて、色々な面でよろしくないので、そろそろやめません？と。 普段から使っていると、「こちら」以外の文言がパッと浮かばない場合なんかも有りますし、コーダー的には下手に文言を変更して色々言われるのが面倒的な理由も有るので、その場合は、こちらも含めてリンクにするのがよろしいかと。 例えば、 製品の詳細はこちら ↓ 製品の詳細はこちら って感じですね。 んでは、「何で、こちらにだけリンクするのは良くないの？」的な部分を色んな視点から書きたいと思います。 アクセシビリティ的な理由から これが一番な理由になるかもですが、前後の文脈から読み取らないとリンク先が分からな

いよいよ明日発売の「Web制作者のためのSassの教科書」ですが、今回は、8章有る中でも特に読んでもらいたい章に関して、書きたいなーと思います。 今回の執筆はわりと気合い入ってるので、宣伝エントリーが多くてすみません＞＜ ちなみに、今日いくつかの書店をまわったら、既に置いてあったので仕事帰りなどに書店に寄ってもらえれば既に購入できると思います。 さて、本題に。 一番読んで欲しいのは5章なんです Sassは、インストールが面倒そうとかって部分やイマイチSassを使うメリットが見えてこないって人も多く、他のツールとかに比べると導入のハードルが高いと思うので、1章と2章ではその辺りをしっかりフォローした内容になっています。 1章に関しては、サポートサイトでお試し用のPDFが読めます。 本書の試し読み | Web制作者のためのSassの教科書 - 公式サポートサイト 次に、3～4章はSassの機能

明後日（2013年9月13日）、「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語」が発売します。 書籍には、初版発行が2013年9月11日になってるので、もしかすると書店によっては置いてあるかも？ 今回はちょっと、書籍が形になるまでの事でも書こうかなと。 本の内容に関しては、一緒に書いたSOUさんの「2013年9月13日発売の「Web制作者のためのSassの教科書」を執筆させていただきました。 | Sou-Lablog」でも紹介されてます。 また、サポートサイトもまだ一部調整しないといけない部分も有りますが、一応正式に公開と言うことで。 Web制作者のためのSassの教科書 - 公式サポートサイト サポートサイトは、書籍を購入した人はもちろんですが、試し読み用のPDFや、書籍内で掲載されているソースコードの一覧などが有りますので、気になってる方は

気付いたら、三ヶ月更新なし・・・(；´Д｀) 最近は、Sassの勉強をやり直したりなんやかんやと過ごしてたり、ねこブログなんぞ始めたりしてました。 良ければ見てください！＞＜ ねこねこキューブ ～ スコティッシュフォールド『アル＆イブ』の今日この頃。 さて、今回はSassをコンパイルしてくれるGUIツールをちょっとご紹介。 以前、Scoutってのを紹介しましたが、こちらは最近更新がされてないってのも有りまして、Windowsで使い勝手良い他のコンパイラを紹介出来ればと。 Windowsで使えるってのが大事です。ボクはWindowsな人なので。 Koala 一つ目は、Koala と言うコンパイラで、更新頻度も高い感じでRubyさえインストールされていれば、すぐに使えます。 このコンパイラは、次のアップデートでほぼ確実に日本語対応が決定してます。 また、動作もかなり軽い感じで、相当使い勝手が良

ちょこちょこコワーキングスペース CSSSの状況でもブログに書くつもりが、気づいたらオープン直前に... オープン前のレポートとかは他の方のブログをお読みください！ CSS HappyLifeひらっちさんのコワーキングスペース「CSSS」オープン前レポート - WEBCRE8.jp CSSSさんにおじゃましてきたよ！ 1up.jp 後、公式サイトとFacebookページです。 CSS Space（ちゃんと仕事するスペース） - ノマド&コワーキングスペース CSS Space Facebookページ 何はともあれ、2013年3月1日 AM10:00～ CSS Spaceがオープンします！ この数ヶ月準備と通常業務に追われた日々だったりしましたが、無事に準備もひと通り完了しました。 キャパ的には15人くらいのそんなに大きくないコワーキングスペースですが、ちゃんと仕事や作業が出来る空間になって

年が明けて随分経ってしまいましたが、本年もよろしくお願いします。 去年の今頃は、Sassに関する記事を頑張って書いていた頃ですが今年はタイトルの件だったりでバタバタとしててブログも全然更新できてませんでした。 ・・・あ、いつもの事か。 今もわりとコーディングに追われてたりしますが、今日はボクと数名にとってちょっと特別な日だったりするので、ブログでもエントリーしようかと思いカキカキ。 えっと、去年の11月頃からコワーキングスペースを運営しようと動き出しました。 計画自体は、2011年の終わり頃から考えてて1年間は資金を貯める期間としてコソコソ頑張ってました。 実際の所、余裕がすごい有る！って感じじゃないんですが、お陰様である程度の資金を貯めることが出来たので、動き出しました。 もっと余裕出来てからでも良いんですが、これ以上動くのが遅くなってもアレですし、ボクも今年で30歳になる節目の年なので

最近は、スマートフォン向けのサイトをやけに作ったりしてるhirasawaです。どうも。 しばらく更新されてなかったMTのテーマを配布している、MT underHatですが、久々にテーマを2つほど追加しました。 1つ目は、企業サイトの新着情報とかで使えそうなテーマです。 特長として、PDFファイルをアップしたら、記事の詳細ページにリンクせず、直接PDFファイルにリンクしたり、URLを入力すると該当のページに移動できたりと、企業サイトで必要そうな機能を入れた感じにしています。 テンプレートはあんまり複雑にせず、デザインも殆ど当ててないので、このテーマをベースにカスタマイズして使えそうな感じです。 企業サイトで、部分的にMTを使う場合の参考にもなるかもです。 MT underHat テーマ 005 - 新着情報 | MT underHat 2つ目は、ブログに使える普通のテーマですが、レスポンシブ

ブログを更新してるって事はわりと仕事が落ち着いている時！ 良いのか悪いのかは分かりません。 して、さすがに、前のネタはビミョー過ぎたかな！とか思いつつも今回も特に珍しいネタではないですが、メモがてら。 随分昔に、似たような記事を書いてますが、あっちは使い勝手が悪いので、今回はちゃんと使えそうな方法です。 使いドコロとしては、パンくずリストとかスマホ対応の記事一覧とかでしょうか。 サンプルは下記よりご覧ください。 重要になってくるのは、以下の3つのプロパティです。 ul li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } どれか一つでも無いとダメなので、セットで書くようにしませう。 わりとIE6でも...にはならないけど、切ることは出来たりと対象ブラウザも広いです。 パンくずリストで使う場合は、2行にな

たまには、ゆるめなCSSの話題でも。 対象ブラウザがIE7からになる事で、活用できるセレクタの幅はわりと広がります。 普段、IE6の対応が必須となってると、使ってないセレクタっていざ使おうとしても活用方法が分からなかったりしますよね。うん。 と言うことで、隣接セレクタ (E + F) を使った実用的？かも知れないネタでも。 なんちゃって、しましま ある程度要素の数が決まってる場合、隣接セレクタを使えばIE7から対応でしましまが実現できます。 <ul class="sampleList"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </ul> ul.sampleList { list-style: none; margin: 0; padding: 0; border-top: 1px

珍しく、Photoshopネタでも。 コーディング関係だからこのブログの主題っぽい！ 今回は、PhotoshopCS6を利用したスライスに関するアレコレです。 コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。 内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。 ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます！ Photoshopを起動します 何はともあれ、Photoshopを起動します。 これはすごく重要な作業です。 Photoshopは重いので起動するのがダルいですね。ウチのVAIO Zが頑張ってます。 CS3の頃はサクサクで良かったんですが。 起動したら、psdファイルを開きましょう。 普通のスライス まずは

前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを

需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。 【Sassを覚えよう！Vol.1】はじめに 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編） 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 【Sassを覚えよう！Vol.5】環境構築（黒い画面編） 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に

シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。 まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1をDL（zip：約50kb） 実際のページを見る ページを見ても、あんまり意味が無いっすね。えぇ。 いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。 なので、一つの参考までにって感じでしょうか。 んでは、続きにて中身の説明なんぞをしていきます。 中身のご説

気付けば、Vol.10！ ずいぶん長編になってまいりました。 何気に、既に去年1年分のエントリー数を超えてるだなんて！ 今年が頑張ってるのか去年がひどすぎたのかは、ボクには分かりません。 ・・・はい、後者です。 さてさて、Vol.4のSassの基本的な記述方法で書いた「ミックスイン」に関して、もうちょい書いてみたいと思いますが、ミックスインは奥が深くてこれから触れる内容も、触り程度って感じだと思いますが、それでも、タイトルに有るように、スマホ案件なんかではかなり活躍しちゃいます！ ミックスインついでに、@if 、@each 辺りもカンタンにですが触れていきます。 ここまで来ればだいぶSassを使いこなしてる様な気がしますよ！たぶん。 や、日本初の Sass エヴァンジェリストである @kotarok さんみたいな超上級者な方々からしたら、鼻をほじほじしながら ( ´_ゝ｀)フーン 程度なん

ちゃっかりデザインを変更しました。 デザイン以外にも、メインエリアの横幅が変わったりしてます。 かなり突貫工事なので、色々アレな部分があるかと思いますが、、、 さて、Vol.4のSassの基本的な記述方法で書いた「変数」と「演算」に関して、もうちょい突っ込んだ部分を書いていこうかと思っちょります。 変数と演算のおさらい 軽くおさらいです。 次のように、変数は予め任意の名前で定義しておくことで任意の場所で呼び出すことが出来て、演算は足したり引いたり掛けたり割ったり出来ます。

Vol.4のSassの基本的な記述方法で書いた「ルールのネスト」ですが、もうちょっと詳しい使い方なんぞを書こうかなと思ってる次第です。 ネストのおさらい 軽くおさらいです。 次のように、通常のCSSでは出来ない入れ子による記述が出来るのがネストです。 #main { width: 600px; p { margin-bottom: 1.5em; } } これで、コピペを都度しないでHTMLの構造に沿った感じで書いていけるので、構造が把握しやすくなったりします。 プロパティをネストする ネストはセレクタの他に、プロパティでも使うことが可能です。 .sample { background: { repeat: no-repeat; position: right top; color: #666; } } これだと、ショートハンドで普通に書いた方が良さそうですが、ショートハンドを利用しつつ入れ

ちょっと間が開いてしまいましたが、今回はSCSSファイルの分割に関してです。 通常のCSSの場合は、分割した複数のファイルを読み込み用の「import.css」みたいなファイルを用意して管理することが多いかと思います。 もしくは、head要素内に各CSSファイルを読み込んだりしますよね。 ただ、これだと分割するファイルが多くなればなるほど、読み込むごとにHTTPリクエストとその読み込みがブラウザで行われるため、Webサイトの読み込みが遅くなってしまうって問題があります。 まぁ体感速度的にどの程度影響があるかはアレですが。 それでも、CSSファイルを1つにすることで、ちょっとでも表示が早くなるかも知れないならやって損は無い訳ですが、それで管理面で問題が生じてしまうのも困ったちゃんなので、分割するCSSは必要最低限にしていることが多いかと思います。 そう言った問題も、Sassなら分割したSCS

前回の記事を書いたら、バッチファイルを使えばもっと楽ですよ！と言うのをTwitterで@grfxdsgnさんから教わりました。 バッチファイルとか全くわかってなかったんですが、軽く調べたり教わったりしてたらボクが理想とする感じの運営が出来そうだったので、当初は予定してなかったエントリーですが、これで黒い画面からの利用がScoutより楽な感じになると思うので、ぜひ利用してみてください！ こうやって記事を公開することで、反応があってよりステキな方法に巡り合えるって良いですね。 久々に、ブログを書くことの面白さの一つを思い出したような気がしないでも無いです。 バッチファイルって？ ウィキペディアとか見てもらうと色々書いてありますが、黒い画面で実行できるコマンドをテキストファイルに記述したもので、これを実行すると黒い画面がそこに書いたコマンドやらを読んで実行してくれます。 その際、拡張子は通常「.

ボクがSassを覚えるにあたって一番のネックだった部分がこれから書く内容なんですが、黒い画面でSassが動作する所までは進んでも、これから実際に案件ベースで使っていくにはどうしたら良いかって部分。 と言うより、黒い画面を起動して都度手打ちしてウンタラカンタラみたいなのは、正直面倒過ぎて実用的じゃないな、と思ってた部分がとても大きいです。 黒い画面に関する知識も殆ど無いので、何かよく分かんないなーって感じでした。 実際問題として、RubyとSassのインストールだけなら、ちょっと気になってる分かりそうな人（あ、ボクでもいいんですけどね）に、『分かんないから教えて(・∀・)！』って言ってみれば、モンクを言いつつもやってくれると思いますよ。えぇ。 あ、ヤローは自分でやりましょうね。 軽く話が反れましたが、そろそろ本題に。 scssファイルを監視 前回、無事にテストが出来たと思いますが、あのままで

いよいよ、、、 黒い画面（コマンド プロンプト）の登場です。 ...待って！逃げちゃダメだ！！ ここでは、、、 Rubyのインストールもしなければなりません。 ...だから待って！逃げちゃダメだ！！逃げちゃダメだ！！ Rubyやら黒い画面とかは、ボクもそうですが、馴染みのない人にとっては意味不明過ぎるかと思いますが、思ったよりカンタンに使うことが出来ます。 これを乗り越えれば、黒い画面も可愛く見えるかも知れません。 ちなみに、Macの方がインストールが楽だと色んな所で書かれてますが、ボクがMacにインストールした感じ、見事にハマってMacの方が大変じゃないか！と思ったのはナイショです。 参考：CSS拡張メタ言語「Sass」フレームワークをインストール（Mac）/ - サイブリッジラボ こんな感じでハマってしまう可能性が有るんですよ、奥さん。 Rubyのインストール さて、Scoutなどのア

前回のエントリーで、無事にSassが動作する環境が整ったかと思います。 今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！ まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜ 記法の前に Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。 その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが） 軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです

さてさて、3回目のエントリーからは、実際に手を動かして行きますよっと。 何はともあれ、Sassが使えるようにしないといけないので、この記事では環境構築に関して書いてきます。 まずは黒い画面は一切使わずにGUIで操作が出来るScoutと言うAIRアプリでSassを動作させる方法をご説明します。 恐らく、現状ではコレが一番カンタンな方法だと思うので、取っ掛かりとしてはとても良いかなーと思います。 ちなみに、Scoutのインストールに関しては、まーしーさんの記事も分かりやすいかと思うのでそちらも参照して下さい。 Compass / Sass の導入が簡単にできる Scout を試してみた｜linker journal｜linker Scoutのインストール方法 んでは最初に、下記のサイトからScoutをダウンロードします。 英語なサイトですが、英語力は全く必要無いので躊躇なくいきませう！ Sco