【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。
対象になるグループの範囲は？ :(hoge)-child系、:(hoge)-type系のいずれもグループ内での順番を判定します。 その対象となるグループは、同じ階層に並んでいるひと続きの要素群となります。 図にするとこのような感じ。 直属の親要素が異なると、別グループになります。 また、グループ内の要素の種類は一種類に限りません。 「:(hoge)-child」は並び順→要素、「:(hoge)-type」は要素→並び順 ポイントはここ。 :(hoge)-child系と:(hoge)-type系では、並び順と要素の判定順が逆になります。 :(hoge)-child系はまず並び順を見て、次にそれが要素と一致するかを見ます。 :(hoge)-type系は指定の要素だけにしぼって、その上で並び順を見ます。 最後のdt、1つ目のddにスタイルがあたらなくて困った場合、 dt:last-child {
jQuery の $().each() で個別処理(ループ) | バシャログ。
こんにちは、やっと地上デジタル放送がうちのテレビに映るようになりました。tanakaです。液晶テレビはもう1年前に買っていたので、ついにフルパワーを発揮しているんですが、新品みたいです。 今日はjQuery の each の使い方についてとりあげます。 jQuery はループ処理を意識しなくても使える jQuery がよく使われるJavaScriptライブラリである理由のひとつに、CSSライクに、宣言的な記述ができる、ということをあげることができます。複数の要素に同じスタイルを適用したいとき、CSSではループ処理を書く必要がありませんが、jQuery も基礎的な使い方ではループを意識しなくても書くことができます。 $('p').css('background-color', 'yellow'); // すべての p 要素の背景色を黄色にする $('p').prepend('Oh! ');
【gulp】htmlテンプレート「gulp-jade」についてメモメモ（１）～導入 | バシャログ。
みなさま、こんにちは。昨年は、『ちはやふる』や『めぞん一刻』、そして『孤独のグルメ』などにハマり続け、夫婦で聖地めぐりをしていた kouraku です。とりあえず、『ちはやふる』の聖地巡り（分倍河原：東京、近江神宮：滋賀、芦原温泉：福井）はコンプリートしました。 さて、昨年はhtmlテンプレートとして「gulp-html-extend」を紹介してきましたが、簡単で分かりやすい反面、かゆいところに全く手が届かない場面などに多々遭遇します。 「あぁ、ここで条件文が使えれば余計なレイアウトなんて作らなくて良いのに・・・」 とか、 「変数が多くなると見辛いし設定しづらいな・・・」 とか。 こうした悩みを解決すべく、ここ最近（自分が）あまり使わなくなってしまった「jade」をおさらいしようと思いました。ということで、そのおさらい内容をメモメモ。 まずは構成から・・・ 今回の構成は、下図のとおりです。
【RWD ーレスポンシブー】右にできた謎の余白を消す方法 | バシャログ。
こんにちは。mackyです。 じめじーめな日々のせいなのでしょうか。6月がとても長く感じます。 今日は右にできた謎の余白を消す方法をまとめます。 そもそも余白って？ できあがったサイトをipadやiphoneで表示確認したとき、以下のような余白ができたことはないですか？ 先日、携わった某サイトはiphoneとipadで表示チェックを行ったのですがその際右のスクロールバーの横に白い余白ができてしまいました。ヘッダーも背景画像もそこで切れてしまいます。その時色々試してみて解決した方法をメモしておこうと思います。（サンプルコードは一部内容を変更しています。） サイトの大まかな構成としては、bodyにwidth:100%;。 内側（ipadおよびiphoneで見切れないで表示させたい幅）sectionに固定サイズの1024pxを指定しました。 ipadとiphoneでみてみたら… (※下の図はip
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
なんだかちょっと楽しい...。フォームの新しい入力属性と疑似クラス | バシャログ。
こんにちは。mackyです。いやー、夏ですね。夏が終わったらもう年末ですね。私は毎年この時期から猛スピードで一年が終わります。早く走らないと。。詳しくはコチラをご覧ください。 さて、今日は、HTML5で新しく追加された入力属性にちょっと「なんか楽しいかも...」と感じたので、この気持ちが冷めないうちにまとめることにしました。 autofocus オートフォーカス。 ページを開いたときにフォーカスされるようになる。ちなみに、emailはHTML5で追加されたtype属性の値で、メールアドレス専用のキーボードを表示させることが出来る。 <form> <label>お名前: <input type="text" name="name" class="text" autofocus/></label> </form> お名前: autocomplete オートコンプリート。 入力候補はdatali
RWD のレイアウト変化をまとめてみた。 | バシャログ。
こんにちは、 連日の雨に身も心も萎え気味なmackyです。ビアガーデンで横浜の夜景を見ながらビールを飲むことを夢みてあと1か月はのりきろうと思う今日このごろ。 さて今日は、「レスポンシブウェブデザイン」のレイアウトの変化パターンをまとめてみました。 レスポンシブウェブデザインのレイアウトパターンまとめ。 この前、知ったのですが「レスポンシブデザイン」ではなく「レスポンシブウェブデザイン」もしくは「RWD」と略すのが正しいそうです。はい。「RWD」も口に出すと十分長いですけどね^^;私は「RWDで」といわれると、ついついMedia Queriesを思い浮かべてしまうんですが、RWDにもいくつかパターンがあるので今回調査＆まとめてみました。（ここでいうパターンとは最終的に１カラムになるまでの変化の仕方をいっています。） Column Drop Column Drop??って思う人もいるとおもう
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
Google Analytics にカスタム変数を設定する | バシャログ。
kimoto です。我が家には、コタツには入るし、雪が降ると外に出たがらない犬がいます。おまえは本当に犬か？猫じゃないのか？ さて本日は、Google Analytics のお話。 とにかく便利な Google Analytics ですが、さらに細かくビジター情報を取るために、カスタム変数を設定出来ることを知らない方は意外と多いと思います。 そこで今回はカスタム変数の設定方法を簡単に説明してみようと思います。 カスタム変数とは？ カスタム変数とは？何ができるの？ってことで、簡単に説明します。 ただでさえ細かく解析してくれる Google Analytics ですが、さすがに同一 URL の場合はサイト上でのユーザ定義までは取得できません（例・ログインしている、していない、など）。 その辺りを補って、任意にセットできるのがカスタム変数になります。 カスタム変数の項目説明 カスタム変数で設定す
様々なイケてるUIを参考にできるサイト | バシャログ。
足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト
jQuery 1.7の on() off()について調べてみた | バシャログ。
新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで
【Sass】Sassでレスポンシブ！メディアクエリを便利に書こう。 | バシャログ。
気が付いたら8月突入してて茫然としたhakoishiです。 しかももう1/3過ぎてるとか冗談はおよし。 さて、今回はSassでメディアクエリを便利に管理できる書き方の一例をば。 まとめて書いて、コンパイルの際にブレイクポイント毎に分散させます。 最近、レスポンシブ対応でコーディングをする機会があったのですが、ブレイクポイント毎にそれぞれセレクタを書いていったら管理しきれなくなってしまいました。 まるで統一感のないソースに…！ そこで考えたのが、同じセレクタはまとめて記述し、その内部でメディアクエリごとの分岐も書く方法です。 更に、メディアクエリ毎にまとめて吐き出されるようにしました。 一度に視界に入る範囲であれば、統一感を保った記述もしやすいかと。 scssファイルの構成と記述内容 メディアクエリ分岐などの枠をstyles.scssに、スタイルは_media-query.scssに記述しま
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
【Fireworks】 テキストボックスを改行で分割するコマンド | バシャログ。
髪を切って2日目で失敗したことに気がついたminamiです。 今回もちょっとだけ便利なFireworksのコマンドです。 テキストボックスを改行で分割するコマンド 右クリックなどで保存してください。ご使用は自己責任でお願いいたします。 読んで字のとおりですが、テキストボックスを改行部分で複数のテキストボックスに分割してくれるコマンドです。 画面をデザインをする際に、テキストを原稿からパーツにわけて一つづつコピペ・・・がめんどくさかったので作りました。 使い方 テキストボックスを選択して、「コマンド→スクリプトを実行」でスクリプトのファイルを選択して実行するだけです。改行でテキストボックスに分割されます。複数のテキストボックスを選択して実行するとそれぞれ分割されますが、テキストボックス以外のオブジェクトを含めるとそのオブジェクトが消えてしまうので注意してください。 作ってみてわかったこと v
[Fireworks]これは便利！Adobe Fireworks CSS3 Mobile Pack | バシャログ。
ここ最近はピンク・フロイドを BGM に就寝している sakai です。どんどん陰気になってきている気がします。 11/12（土）に開催される「CSS Nite in MIYAZAKI Vol.3」に出演させていただくことになりました。 近隣の方、ご都合の合う方いらっしゃいましたら是非。Fireworks や Dreamweaver を使って効率よく Web 制作をするノウハウをご紹介する予定です！（詳細は近日公開します） さて、今回は先日リリースされた「Adobe Fireworks CSS3 Mobile Pack」のご紹介です。これはなかなかイイモノですよ！ インストール 拡張機能のダウンロードはこちらから。 Adobe Fireworks CSS3 Mobile Pack Download のリンクをクリックすると、Adobe Extension Manager が立ち上がって、自
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
コーダーの為のFireworksスライス入門 | バシャログ。
iPhone 4S遣いが身の回りに着々と増えてますが、うらやましくなんかないんだからねっhakoishiです。 今回は、「あれ、今回はデザイン？」と見せかけてやはりコーディングネタ。 スライスって、コーダーが担当することが多いですよね。 けど、デザイナーほどグラフィックソフトに通じてなくて「もっと効率いいやり方があるんじゃないかなあー」なんてもどかしく思うこと、あるんじゃないですか？ そこで、突然ですがFireworks。 馴染みのない人も多いかもしれませんが、スライス機能がスッゴイんですよ！ 以下、普段Photoshopを使用している人向けに、Fireworksの便利なスライス機能をまとめました。 最初に。 まずは基本動作。 Photoshop同様、スライスツールでドラッグします。 …でも良いのですが、もっと楽な方法があります。 スライスを切りたいオブジェクトを全て選択 ⇒右クリックで「
つまづきがちな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プロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
.htaccess だけで簡単キャリア判定してみる | バシャログ。
まだ 6 月だってのに早くも今年初あせもができちゃったよ！かいーの nakamura です。 サイトのモバイル、スマホ対応もすっかり一般的になってきた今日この頃、みなさんいつもどんな方法でキャリア判定を実装しているでしょうか。がっつりフレームワークなどを使っていればさほど難しくはありませんが、ほとんどプログラムが動いていないような静的なサイトの場合はちょっと面倒ですね。今日はそんな時に有用な .htaccess を使ったキャリア判定の方法をご紹介します。 仕様 今回、ルートディレクトリ / は PC 用サイト、/m/ 以下がモバイルサイト、/sp/ 以下がスマホサイトとして以下の仕様を元に記述方法を考えていきます。 PC で /m/, /sp/ 以下にアクセスしたら / にリダイレクト。 モバイル、スマホで PC サイトにアクセスしたらそれぞれ /m/, /sp/ にリダイレクト。 モバイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PSDファイルからテキストを抽出してtxtファイルにまとめてくれるスクリプト | バシャログ。
