【RWD ーレスポンシブー】右にできた謎の余白を消す方法 | バシャログ。
こんにちは。mackyです。 じめじーめな日々のせいなのでしょうか。6月がとても長く感じます。 今日は右にできた謎の余白を消す方法をまとめます。 そもそも余白って？ できあがったサイトをipadやiphoneで表示確認したとき、以下のような余白ができたことはないですか？ 先日、携わった某サイトはiphoneとipadで表示チェックを行ったのですがその際右のスクロールバーの横に白い余白ができてしまいました。ヘッダーも背景画像もそこで切れてしまいます。その時色々試してみて解決した方法をメモしておこうと思います。（サンプルコードは一部内容を変更しています。） サイトの大まかな構成としては、bodyにwidth:100%;。 内側（ipadおよびiphoneで見切れないで表示させたい幅）sectionに固定サイズの1024pxを指定しました。 ipadとiphoneでみてみたら… (※下の図はip
バシャログ。がリニューアル！その経緯を振り返る | バシャログ。
こんにちはLatinです。 当社のWeb制作技術情報ブログ「バシャログ。」のデザインをリニューアルしました。 いかがでしょうか？少しは見やすくなったでしょうか？ 今日はそのお知らせと、リニューアルに至った経緯なんかもご紹介できればと思います。 リニューアル前のデザイン リニューアル前の当ブログですが、恥ずかしながら、かなりの問題点を抱えていました。 時代遅れの3カラムレイアウト 後回しになっていたモバイルユーザビリティ めっちゃ重いスクリプトてんこもり とまぁ、こんな感じです。 特に2番目、3番目については結構なクリティカルな問題だったのではないかと思ってます。 リニューアル後 記事の読みやすさを重視し、1カラムレイアウトを採用 鬱陶しかったLikeBoxやら、バナースペースやら、スペースを埋めるのに苦労したサイドバー達ともこれでようやくおさらばです。 レスポンシブウェブデザインで、モバイ
【RWD ーレスポンシブー】PCとSPで違う画像を表示させる | バシャログ。
こんにちは。mackyです。 今日はタイトル通り、PCとSPで違う画像を表示させる方法を紹介します。 ちなみに、初心者向けです。では早速。 <p class="logo"><img src="img/img_sp.png" width="100" height="100" alt="c-brains"></p> とりあえず、これだけでいいです。 みてわかるとおもうのですが、imgタグで埋め込んでいるのは、SP用の画像です。 css CSSも割とシンプルです。 img { vertical-align: top; } @media only screen and (max-width: 640px) { img { width: 100%; height: auto; } } .logo { width: 300px; height: 300px; margin: 0 auto; backg
【Photoshop】人物を素早く切り抜く方法 | バシャログ。
こんにちは。mackyです。 もうすぐカレーの季節ですね。「CSS カレー」で検索したら（暇じゃないです）「フレームワークはカレーのルーだ！」って記事が引っかかりました。 この一文でイメージがつかめる素晴らしい例えですね。カレーってすごいですね。（暇じゃないです） さて、今日はタイトル通り、人物をいい感じに素早くキレイに切り抜く方法をご紹介するのですが、特に人物の服と背景が同化しちゃってるような写真の場合に使える技だと思います。 使用するツールはPhotoshop CS5.1です。 こんな感じの写真を用意します。 ※ロイヤリティフリーの素材を使用しています。 ポイント1：レイヤーを最低2つ以上複製しておく。 複製はいくつあっても構いませんが、最低2つは複製しておいてください。背景はひとまず非表示にしておきます。 ポイント2：明度を下げてしまおう。 一番上のレイヤーを選択し、調整レイヤーから
どれ使おう？仕事で使えるチャットツール3つ | バシャログ。
暖かくなってきてごきげんな kimoto です。 現在シーブレインでは、社内のチャットツールには Skype を利用しています。 しかし、音声通話はともかく、チャットとなるといろいろと痒いところに手が届かないと思うこともしばしば。 グループ作った人にしかそのグループの管理ができない、相手がログアウトしてると相手からの会話が届かない、などなど… しかし昨今、世の中には色々と便利なチャットツールがあります。今日はそのうち、実際弊社で試用して便利！と思った 3 つを紹介します。 chatwork いま色々な会社で導入してるのはこの chatwork ではないでしょうか。 会話をそのままタスクにしてタスク管理にできたり、他の外部サービスと連携できたりと、便利な機能が満載です。 良い Todo 管理ツールが無いかと検討してる人にもオススメできます。 純日本産のサービスというのも、安心ポイントの一つだ
【WordPress】プラグイン Smart Custom Fields でカスタムフィールドを半自作する | バシャログ。
あすリリースの『キンシオ the DVD 17号を行く』が待ち遠しくてしょうがない神奈川県民の kagata です。国道17号ではどんな百景に出会えるのでしょうか。楽しみです。 さて、今回は WordPress の悩みの種であるカスタムフィールドのお話です。サードパーティのプラグインでフィールド定義を設定・管理するのはお手軽ではあるものの、再利用やバージョン管理にひと手間かかってしまいます。一方、自力でいちからコードを書いてカスタムフィールドを実装するのは、かなり複雑なコードを書いていく必要があってこれまたたいへんです。 そんな中、カスタムフィールドを提供するプラグイン「Smart Custom Fields」に注目の新機能が追加されました。この機能を使うことで、プラグインでカスタムフィールドをお手軽に実装できる恩恵を受けつつ、取り回しがしやすいコードベースでフィールドを定義することができ
width:auto;とwidth:100%;の違い＋中央寄せについて。 | バシャログ。
どうも。mackyです。 花粉症とは無縁の私は、早くお花見シーズンにならないかなー…なんて、今はそれだけを楽しみに生きています。のみたい！食べたい！食べたい！ さて今日は、その大切さ＆重要さに近すぎて気づかない、みたいな存在の「width」についてちょっと書こうと思います。 これからレスポンシブどんどん勉強していきたいという方は是非。 width:100%とwidth:autoの違い 例えばPC版のコーディングから行うとして、widthをpx指定したときなどはブレイクポイントを設けてSP版用に幅を上書きする。この流れはよくあります。共に、親要素の幅に合わせるとういう意味では同じですが、paddingやborderを指定する場合にちょっと違ってきます。 width:auto;の場合 Media Queriesをつかってwidthを上書きする場合はこちらが便利です。 上の図を使って説明すると.
MovableTypeカスタマイズをこれからはじめる人に教えておきたい記事まとめ | バシャログ。
こんばんは、ごぶさたしすぎちゃってました。約2か月ぶりに登場のishidaです。 MovableTypeカスタマイズをはじめる際に、何から覚えればいいのやらと思う初心者の方は多いのではないでしょうか。 そこで今回、そんなMovableType初心者の方に見てほしい記事やサイトをまとめてみました。 基礎から学ぶ [ gihyo.jp 連載 ]チャレンジ！ Movable TypeをCMSとして使ってみよう！ Movable Type 4.x 系をイチから学ぶにはコレ。とても分かりやすくまとめられています。 16回の連載で、回を追うごとに徐々にレベルがあがっていき最終的にブログひとつカスタマイズが出来るようになる？ MTタグから学ぶ Movable Typeの概念が分かったら、次にMTタグの習得ですね。 サンプル紹介｜【公式サポートサイト】Movable Type 4.x 本格的CMSサイトを
HTML5を使った気になるサイト！ | バシャログ。
サッカー日本代表、負けてしまいましたね。残念ですがとてもいい試合をしてくれたと思います。minamiです。 さて近ごろ世間はHTML5、HTML5と騒がしいですが、一目見てすげえっ！となるHTML5のデモサイト&チュートリアルサイトを集めてみました。 できるだけHTML5対応の進んでいるChromeやSafari最新版などで閲覧することをオススメします。 HTML5を使ったデモサイト ここまでやれるのかとびっくりするほどクオリティの高いアニメーション&インタラクティブコンテンツ。 HTML5 Canvas Experiment VIDEO要素を3Dでグリグリ Blowing up HTML5 video and mapping it into 3D space HTML5で弾避けシューティング！ HTML5でTAMAYOKE!!!111 AppleのHTML5デモページ。Safariでしか
手軽にRSSを表示させたい時に便利なPEAR::XML_RSS | バシャログ。
こんにちは、ichikawaです。 例えばサイトにブログの最新記事を表示させたい時などありますよね。 本日は、そんな時に便利なPEARの「XML_RSS」パッケージをご紹介いたします。 インストール PEARのインストールは簡単です。以下のコマンドを実行すれば完了です。 pear install XML_RSS-1.0.0 レンタルサーバーなどの環境などにより、コマンドでインストールできない場合には以下など参考になさっていてみて下さい。 PEARのインストール方法 利用前準備 必要な場合にはphpのinclude_pathを設定しましょう。方法は環境に応じて下さい。 .htaccessの場合 php_value include_path .:[PEARへのパス] ini_set()で設定する場合 ini_set("include_path","[PEARへのパス]" . ini_get("
[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。
第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。 本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1. CSS のみで見栄えよくしてみる 線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条 承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
