【RWD ーレスポンシブー】右にできた謎の余白を消す方法 | バシャログ。
こんにちは。mackyです。 じめじーめな日々のせいなのでしょうか。6月がとても長く感じます。 今日は右にできた謎の余白を消す方法をまとめます。 そもそも余白って？ できあがったサイトをipadやiphoneで表示確認したとき、以下のような余白ができたことはないですか？ 先日、携わった某サイトはiphoneとipadで表示チェックを行ったのですがその際右のスクロールバーの横に白い余白ができてしまいました。ヘッダーも背景画像もそこで切れてしまいます。その時色々試してみて解決した方法をメモしておこうと思います。（サンプルコードは一部内容を変更しています。） サイトの大まかな構成としては、bodyにwidth:100%;。 内側（ipadおよびiphoneで見切れないで表示させたい幅）sectionに固定サイズの1024pxを指定しました。 ipadとiphoneでみてみたら… (※下の図はip
Google Map を簡単お洒落にカスタマイズ！「Styled Map Wizard」使ってみた。 | バシャログ。
今月発売予定の「メタルギアライジング」をそわそわ楽しみにしているアクションゲー好き seki です。 今回もWebサービスのご紹介です！ 最近よくよく見かける、「Google map」のデザインをお洒落にカスタマイズして載せているサイト。皆さんも一度は目にしたことがあるかと思いますが、こちら、どうやって作っているか気になりますよね。 今回は、js無知な私でも簡単に作れる Google Maps API 「Styled Map Wizard」の使い方を、ざっくりと例を挙げてご紹介します。 【参考サイト】 今回はこちらの記事より、参考・引用して解説します。こちら、とても丁寧に解説されているので、jsが分らなくても出来るかと。 今回作成したもの 画像ですみませんがこちら。 アイコンは seki になっていますが場所はバシャログ。本陣です。 色をモノクロにして、交差点やコンビニ、銀行などのアイコン
CSSだけでお手軽なフリック&ドラッグスライダーを作る | バシャログ。
今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。 左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。 作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。 今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe
WordPress 4.1から title 要素の作り方が変わるという話 | バシャログ。
映画『インターステラー』を主に TARS 目当てに観てきた kagata です。『キカイダーREBOOT』といい『her／世界でひとつの彼女』といい、今年はロボットや人工知能の出てくる映画が印象に残っています。年末公開の『ベイマックス』も期待。 さて、WordPress の次期バージョン4.1が今月リリースを目指して準備されています。そのバージョン4.1から、title 要素の自動生成という新しい機能が盛り込まれる予定です。バシャログ読者に多いであろうフロントエンド畑の方々や、WordPress テーマカスタマイズの初心者のみなさまにもかかわりがありそうということで、ちょっと調べてみました。 おさらい：これまでの WordPress での title 要素 これまで、WordPress での title 要素はテーマの header.php にテンプレート関数 wp_title() を使っ
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
【CSS】iPhone で iframe の横幅がハミ出してしまう問題の解決法 | バシャログ。
こんにちはLatinです。みなさん夏休みの予定はもう決まりましたか？ LCC全盛という事で、沖縄などの国内のリゾート地にも随分と安い金額で行けるようになりましたよね。沖縄行きて～！ さて、今回はスマホサイト制作のTipsです。 スマホサイトの制作時、 Facebook や Twitter のウィジェットを埋め込む事も多いかと思います。 フレームの横幅が固定であれば事はそれほど重大ではないのですが、レスポンシブ対応や Landscape 時に横幅を引き延ばす必要がある場合、iPhone だと iframe の幅指定「width: 100% !important;」が効かず、「横幅がはみ出てしまう」という事態によく陥ります。この時の対処法をまとめていきます。 まずは最初のHTMLとCSS HTML <div class="box"> <h1>Twitter ウィジェット</h1> <div c
10日で覚えるPHPのキソ 第 5 回 条件分岐 | バシャログ。
第5回は条件分岐についてお話します。 第1回で、プログラムは上から下に流れる、とお話しました。 でも場合によっては、「同じ処理を繰り返したい」、「結果によって処理を変えたい」事もあるでしょう。 そんな時に活躍するのが、制御文(今回お話する条件分岐、次回に予定している繰り返し)です。 ではまず、条件分岐のif文からご説明します。 if文 英語のifの意味の通り、「もし○○だったら、△△する」というような、条件によって処理を分けたい時に使います。 プログラムの流れは、条件が成り立った場合と成り立たなかった場合の2つに分かれます。 (if文を複数使用する事によって2つ以上の流れを作る事もできます。) 条件には、前回に出てきた比較演算子や論理演算子を使った条件式を指定します。 if文には以下の3つの種類があります。 ifのみ if～else文 if～elseif～else文 それでは順番に説明しま
【WordPress 連載企画 第1回】Vagrant をインストールしてローカル開発環境を作ってみよう | バシャログ。
こんにちはエンジニアのtanakaです。今日からスタッフ持ち回りでWordPressの連載を始めることになりました。制作環境を作るところからサイトの体裁を整えるところまでやっていくのでよろしくお願いします。 今回はCentOS・Apache・PHP・MySQLのインストール・データベース作成を自動化することでWordPressの開発環境をカンタンに作る方法について説明します。 WordPressの開発環境を自分のPCに開発環境をつくるときにApache+MySQL+PHPがセットになったパッケージを利用して環境をつくることもできます。しかし実運用する環境がLinuxだと、ローカルPCからスクリプト群をアップロードしたときに想定外の挙動に悩まされる恐れがあります。 最近、開発環境をつくるツールとしてVagrantの名前を聞くことが多くなりました。Vagrantは仮想マシンを使った開発環境を構
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
[WordPress]サムネイル画像を再生成してくれるプラグイン Regenerate Thumbnails | バシャログ。
こんにちは Latin です。WordPressのプラグイン「Regenerate Thumbnails」のご紹介。先日、実案件ですごく便利なプラグインだな～と感じたのでメモ。 WordPress の functions.php にオリジナルサイズのサムネイルを、いくつか生成する処理をいれているのですが、途中の仕様変更でサムネイルサイズが変わる事に･･･。 通常、サムネイル生成は「画像をアップロード」した際に走る処理の為、アップロードし直さなければなりませんが、すでに数百件のデータが入っている場合、そんな訳にもいきません。 既に数百件の記事が投稿されている。（画像が数百枚） サムネイル生成の処理は「画像アップロード時」に走る為、再アップロード作業が必要。 プラグインでなんかいいのないかな～と思っていたら、 ちょうど LIGさんのブログでまさに「要件バッチリ」なプラグインを紹介されていました
【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 {
【スマートフォン制作向け】checkboxをCSSのみでカスタマイズ | バシャログ。
こんにちは、ishida です。 先週金曜日、横浜スタジアムでノーヒットノーランをこの目で見ました。 やっぱり野球はスタジアム観戦がいいですな。 さてさて、以前こちらのブログで 【スマートフォン制作向け】radioボタンをCSSのみでカスタマイズ という記事を書きましたが、今回はこちらの続編でcheckboxカスタマイズをご紹介します。 ソースコード コードはこちらです。 あっ、それと バシャログ。で js.do.it アカウントを作成しましたので、 よろしければフォローしていただると幸いです。 ポイント checkbox本体を、appearanceプロパティをbuttonにしています。 checkboxがチェックされた場合に、:checked疑似クラスをつかいます。 :checked疑似クラス ＋ before疑似要素 ＋ after疑似要素を組み合わせて、チェックされた時のデザインを作
jQueryを使ってiframe要素の中身にアクセスする | バシャログ。
残暑の蒸し暑さから、涼しさを通り越して、寒いと感じる今日この頃、tanakaです。 今日はjQueryでiframe要素の中にアクセスして、情報を取得したり、改変したりする方法を紹介します。 jQueryは、Webページに対するアクセスを簡潔に表現できるライブラリですが、iframe内の文書にまで、 $('div iframe p') といった感じでアクセスすることはできません。ドキュメントが違うからでしょうか？正しい理由はわかりませんが、同時に2つのページをまたいで処理するのは混乱しそうなのでこれはこれでいいと思います。で、そういったときにアクセスする方法があるのでご紹介します。 [追記 2010/09/27]注意点として、親フレームとiframe内ドキュメントのドメインが異なる場合はアクセスできません。 iframe内のドキュメントにアクセスするにはcontents() $(...).
[WordPress]3大カスタム要素、カスタム投稿タイプ・タクソノミー・フィールドを使いこなす | バシャログ。
こんにちは Latin です。 コンフェデレーションズカップはじまりましたね！夏のフットボール観戦はやっぱり燃えます。 さて今回は、WordPressの「3大カスタム要素」と題しまして、「カスタム投稿タイプ」、「カスタムタクソノミー」、「カスタムフィールド」についてまとめていこうと思います。 目次 カスタム投稿タイプ カスタムタクソノミー カスタムフィールド 3大カスタム要素を使ったサイトの運用例 追加されたカスタム要素の表示サンプル どういったケースで使うの？ 例題として今回は、「コーポレートサイト」の場合を想定してみます。 カスタム投稿タイプ 通常の投稿記事と「切り分けたい場合」や「体裁の違うコンテンツを投稿したい場合」によく用いられます。 例えばコーポレートサイトの場合、通常の「投稿」は「お知らせ」などの記事で運用しているケースが多く、 そこに「本の紹介」などの「体裁の違う記事」を投
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。
こんにちはLatinです。 今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。 今回はCSS3のグラデーションにまつわるエントリーです。 ハッキリ言って面倒くさい！ さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。 今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない分のベンダープレフィックスを探したり、filter やら毎回ググるのが非常に面倒！ 且つ、ボタンなどに、gradient と border-radius を併記した場合、IE9 での表示が若干おかしくなってしまいます。 詳細は下記に記載しますが、今後サクッと使えるように備忘録がてら、簡単にまとめておこうと思います。 CSS スニペット（修正前） .btn { border-radius: 4px;
jQuery 1.9 で変わったところを調べてみる。 | バシャログ。
引越しの準備がままならないminamiです。 jQuery1.9 が正式にリリースされました。すでにベータ版として発表されているjQuery 2.0 はIE6/7/8に対応しないことを謳っているため、これらのブラウザ対応をする場合は1.9 を使っていくことになりますね。 jQuery1.9 で変更があった機能を見ていきたいと思います。 どう変わったの？ jQuery 1.9でアップグレードされた機能は下記ページにまとまっています。 jQuery Core 1.9 Upgrade Guide 主要なところを抜粋してみます。 toggle(function,function,...) の廃止 間違えそうですが、表示/非表示のtoggle()は使えます。 jQuery.browser() の廃止 だいぶ前からなくなるよ、と言われていましたが、とうとう廃止に。jQuery.supportや、Mod
Fireworks でワイヤーフレームを作成する際に活用したい機能 | バシャログ。
来年のテーマを早くも「断捨離」に決めた sakai です。 今回は Fireworks でワイヤーフレームを作成する際に活用したい機能についてです。 この記事は Fireworks Lover Advent Calendar 2012 の 10日目です。良記事ばかりなので、ぜひチェックしてみてください！ Fireworks でワイヤーフレームを作成することのメリット そもそも、なぜ Fireworks でワイヤーフレームを作るの？ ピクセルベースで作業ができる。 ピクセルベースでオブジェクトを作成・配置できるので、グリッドでレイアウトすることも簡単です。 ページ機能・共有レイヤー・共有ライブラリ・ステート機能が強力すぎる。 Web サイトの制作に特化したツールだけに、他のツールにはない強力な機能があります。 ワイヤーフレームの作成からコーディング直前までの工程を Fireworks オンリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Sublime Text 2】ダミー画像をめっちゃ簡単に挿入できるパッケージ 「Placehold.it Image Tag Generator」 | バシャログ。
