【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ | バシャログ。
こんにちは、GWは神奈川県から一歩も出ませんでした ishida です。 さてさて、今回は最近スマートフォン案件が増えてきましたので実務で使えそうなコーディングTipsをば。 スマートフォンでは、radioボタンがデフォルトのままだとかなり押しにくいですよね。 対象がスマートフォンであれば（IEちゃんを除けばOKかも）CSSだけで、意外とカスタマイズができます。 HTML HTMLのコードは以下になります。 <ul class="list"> <li><input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男性</label></li> <li><input type="radio" name="gender" id="gender2" value="2"><label for="gende
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
フォントサイズをremで指定する。（emとの比較） | バシャログ。
こんにちは。mackyです。 CSS3で追加されたremという単位が便利な理由をpxやemと比較してまとめてみました。 IE8以下は非対応ですので、px指定を追加する必要がありますが、 スマートフォンやRWDにはとても便利です。 ちなみに、 remというのは、「root+em」（ルートエム）の略でhtmlのサイズを継承するemだと。 なるほど、とてもわかりやすいです。 そのまえにem（pxも）の継承をおさらい。 px(ピクセル) ピクセル単位の指定。 環境によって変化しない絶対単位です。 em(エム) 文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。 bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。 まずはpxとemをおさらい pxとemについてのわかりやすい説明はこ
【Fireworks】もうイラストで悩まない！簡単なイラストを描いてみよう Vol.3 | バシャログ。
やっと涼しくなってきましたね！食欲の秋が目前でわくわくが止まらない seki です。 さてさて今回は久しぶりに、Fireworks簡単イラスト講座の第3段です！ハロウィンも近づいて来たので、ハロウィン用デザインの背景などで使える、Fireworksで描く「蜘蛛の巣」のイラスト講座と、これからキャンペーンページなどを作る方のお役に立てればと、タイトルイラストにあるような、Fireworksで描いたハロウィンで使えるシルエット素材のパスデータを配布したいと思います。 3分もかからない！物凄く簡単な蜘蛛の巣の描き方 センスなんて関係無し！誰でも簡単に描けちゃいます。 1. 星型ツールを使い、下記図の1のような、蜘蛛の巣の軸となる部分を描く 角数が多すぎると、ごちゃごちゃしてしまうので、10角くらいがベスト。深さ座標を限りなく中心へ、線として見える所まで調節していきます。 2. 1を同じ場所に複製
Fireworks でワイヤーフレームを作成する際に活用したい機能 | バシャログ。
来年のテーマを早くも「断捨離」に決めた sakai です。 今回は Fireworks でワイヤーフレームを作成する際に活用したい機能についてです。 この記事は Fireworks Lover Advent Calendar 2012 の 10日目です。良記事ばかりなので、ぜひチェックしてみてください！ Fireworks でワイヤーフレームを作成することのメリット そもそも、なぜ Fireworks でワイヤーフレームを作るの？ ピクセルベースで作業ができる。 ピクセルベースでオブジェクトを作成・配置できるので、グリッドでレイアウトすることも簡単です。 ページ機能・共有レイヤー・共有ライブラリ・ステート機能が強力すぎる。 Web サイトの制作に特化したツールだけに、他のツールにはない強力な機能があります。 ワイヤーフレームの作成からコーディング直前までの工程を Fireworks オンリ
[Dreamweaver]検索・置換対象ファイル拡張子を増やす。 | バシャログ。
こんにちは、hakoishiです。 最近の横浜は花粉飛んでる気がする…、と思ってたら雪っぽいものがちらつく日もあったり。 空を見上げては「今はいったいいつなんだろう」と思い馳せる日々です。 さて、今回はDreamweaverの検索・置換対象となるファイルの拡張子を増やす方法をご紹介。 サイト内検索したけど、目的のソース箇所が見つからない…と思ったら「.ctp」とか「.cgi」とかDWは検索対象として見ちゃいないのですねorz そんな時、他のソフトに作業の場を移すのも良いですが、Dreamweaverでも検索に引っかかるようカスタマイズできますのでご参考まで。 編集必要なファイルが2つ。 他、必要に応じて設定する項目が1つあります。 ※各ファイル編集前にはバックアップをお取りください。また、極力DW以外のエディタで編集することをおススメします。 【1】Extensions.txt 下記にあり
![[Dreamweaver]検索・置換対象ファイル拡張子を増やす。 | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2a2c11b17693e3812ca5043c1de13f337332706/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_dreamweaver.png)
引き続き、ソーシャルボタン設置のソースコードサンプルあれこれ。 | バシャログ。
みなさん、今年も残り40日くらいだそうですよ。 年末の大掃除が終わるか今から心配なhakoishiです。 さて、今回は前回に引き続き、ソーシャルボタン設置のソースサンプルをご紹介。 今回は、「google+」「mixiチェック」「mixiイイネ！」「evernote」の4つです。 ※前回のエントリーはこちらから。「はてなブックマーク」「twitter」「facebook」「addthis」を取り上げています。 ソーシャルボタン設置のソースコードサンプルあれこれ。 google+ <g:plusone href="http://c-brains.jp/blog/wsg/"></g:plusone> sizeでサイズ、countでカウンターの有無を指定します。特に指定しない場合はカウンター有り、サイズは標準になります。 以下、サンプル。（※識別キーがダミーだと表示されないので、ボタンは画像にし
Facebook のソーシャルプラグインを導入しよう | バシャログ。
久々に揺れた！（8/17 9:25 頃） 現在進行形の話題を出してライブ感を醸し出してみました。kimoto です。 本日はいろんなサイトで最近よく見かけるであろう Facebook のソーシャルプラグインをいくつかご紹介します。 ハッキリ言ってこのソーシャルプラグイン、解説するまでもなくむちゃくちゃ簡単です。 こんな簡単なの、なにドヤ顔で記事にしてんの？って思われる方もいらっしゃるかもしれませんが、そこはご容赦くださいませ。 Facebook のソーシャルプラグインのページはこちら。 2012/1/19 追記 その 2 を書きました。よければこちらもどうぞ。 Like Button まずはFacebook の代名詞とも言える、「いいね！ボタン」です。 基本的にはそのページの URL を指定して、「このページ、このくらいいいね！って言われてますよ！あなたもどうぞ！」っていうのを閲覧者見せる
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。 | バシャログ。