CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固

ホーム / ご案内 / パフォーマンス1000%UP!PHPでMySQLのDB処理を行うと重いときに行うパフォーマンス施策～基礎編～ DBを使うとやたらと重くなって仕方がない。。。 個別案件でヘルプが必要な方は Linuxに関するアドバイスを行います！WEB・メール・DB・DNSサーバーどんなことでも！ そうお悩みのプログラム初心者の方も多いのではないでしょうか。 いろいろQ&A的なサイトを見ていても初心者の方の多い質問の一つが【重い】という内容です。 しかしながら、インデックスはかかっているのか？とか、メモリが足りないとか。。。確かに、そういった要件はあるかもしれませんが、もっともっと初歩的なところでつまづいていませんか? そういう初心者のためにこの記事を書き残しています。 おそらく、バージョンやDB自体が何であるとか、そういった問題の前に基礎的なところができていない方が多いかもしれない

A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG. I like to think that the future is already here. We have already so many exciting possibilities in CSS and SVG that some time ago we could only dream about. For example, we now have many possible ways to create text with an animated fill! About a year ago the article

ブログやWebサイトのパフォーマンスの改善やSEO、セキュリティの向上に役立つ.htaccessの設定を紹介します。 ドメインをwww有り・無しに統一、新ドメインに引っ越した時のリダイレクト、URLをクリーンなものにしたり、共有サーバーでのPHPのバージョンを指定したりなど、すぐに利用できるものばかりです。 .htaccess Snippets -GitHub 元記事には有用な.htaccessのスニペットがPublic Domainでまとめられおり、それら全部に加えて.htaccessファイルの作成と使い方を加えました。 .htaccessファイルの作成と使い方 リライトとリダイレクトの設定 セキュリティの設定 パフォーマンスの設定 その他のいろいろ有用な設定 .htaccessファイルの作成と使い方 「.htaccess」ファイルを作成することは非常に簡単です。 テキストベースのアプリ

弁当生活始めました。agoです。 以前のjavascriptの開発はサーバサイドと同じPGが開発することが多く、機能をファイル単位で分割してそのページで必要なファイルのみを読み込むと言うことが行われていました。 ただ、最近はサーバサイドとクライアントサイドの分業が進んだことや表示速度の兼ね合いもあり、単一ファイルに全体を記述しサーバサイドでは全ページでその一ファイルのみを読み込むような形になることが多いです。 単一ファイルの利点としてはサーバサイドの実装に依存せずに任意の機能を追加できることがありますが、欠点として機能毎の切り分けが難しくなると言う点があります。 jQueryを使用して$('.selector')で切り出す方法もありますが、マークアップの全体像を正確に把握できていないと不要なページで間違って実行されてしまう危険性もあります。 そこで、以下のようなJSを先に読み込み、各URL

CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。 3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。 サンプルを用意していますのでご覧ください。 では、HTMLから説明します。 HTML a要素がサークルで、span要素が3本線になります。 <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a> span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。 CSS 続いてCSSです。最初に全部載せて、後で個別に解説します。 #panel-btn{ display: inline-block; posit

META Robotsタグ活用完全ガイド noindex nofollow noarchive など まとめ robots meta タグの意味と用法まとめ noindex, nofollow, noarchive, nosnippet, noimageindex などの主要なMETAタグの利用方法と注意事項など。 公開日時：2015年01月08日 12:18 検索エンジンのクローラの動作や行動を制御するためのロボット排除プロトコル（REP、Robots Exclusion Protocol）の中でも、META robots タグを用いた方法の紹介です。2015年1月1日時点でサポートされているものを紹介しています。 nositelinkssearchbox などSEO担当者に関連するMETA要素も含んでいます。 以下、基本的な知識と、noindex, nofollow, nositeli

角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。

今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。 左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。 作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。 今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe

この記事は CSS 珍百景 Advent Calendar 2014 11日目の記事です。 みんな大好き box-shadow box-shadow プロパティは要素に影をつけることができるプロパティです。今回は box-shadow で出会った珍百景と解決法を紹介します。 Chrome で 印刷しようとすると… まずはこちらを見てください。 2つの div 要素に box-shadow をつけたものです。 片方は1つの shadow, もう片方は複数の shadow を別々の色で加えたものになります。 CSS はこんな感じで設定しています。 div{ width: 100px; height: 100px; margin: 1em auto 2em; } .box1{ box-shadow: 0px 0px 8px #898989; } .box2{ box-shadow: -10px

こんにちは、エンジニアの王です。今日は「console.log」のラッパーを作ってみたので紹介したいと思います。 console.log(Yo!) console.logはフロントエンドの人なら誰もが使ったことはあるでしょう。 ですが、毎回毎回「console.log()」とズラズラと記述するのはちょっと面倒です。 いざ公開や納品するときに全てのconsole.logを外す手間もかかりますし、保守で再度ログを出したい場合にまた書き直すというのも手間になります。 というわけで、「log」というちょっとしたconsole.logのラッパーを作ってみました。 使い方 使い方はいたって簡単です。 //まずは利用可能にする log.enable(); //通常のログ log('start'); //色付きログ log('start', 'red'); //色付き＋フォントサイズ(large) log

こんにちは。デザイナーの藤田です。 久しぶりにPhotoshopのtips記事をお届けします。 皆さんは�“水しぶき”などの背景が透けた画像の切り抜きに苦戦したことはありませんか？ ただ背景を切り抜くだけだと、透明感をなかなか表現できませんよね。 そこで今回は、“水しぶき”などの透け感がある画像をみずみずしく切り抜く方法をご紹介いたします。 ※今回の記事で使用している画像は下記サイトのものです。 water splash http://nihongo.istockphoto.com/stock-photo-13225547-water-splash.php Psd Soda Can Mock-Up Template http://www.pixeden.com/psd-mock-up-templates/psd-soda-can-mock-up-template Photoshopで“水し

jQuery Advent Calendar 2014 - Adventar、3日目の記事です。 もの凄いライトなネタです。 今関わっている案件で、「リンクを新規タブで開かせたくない」という要望があったので調べていたら、 ちょうど使っていたColorboxのコードにあったのでメモしておきます。 特定のキーならクリック時のeventオブジェクトで取得できる.click()イベントのコールバック関数で受け取ることが出来るeventオブジェクトには、特定のキーが押されたかが取得できるんですね。 知らなかった…。 ちなみに取得できるのは以下のとおり。 ctrlキーshiftキーaltキーcmdキークリックの種類(左クリック/中クリック/右クリック)それぞれ次のように取得できます。 jQuery(elem).on('click', function(event) { // ctrlキーが押されていた

これはSVG Advent Calendar 2014の参加記事です。 昨日はmemocarilogのSaori Miyazakiさんによる「filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法」でした。 第3日目は私 id:rikuo が担当します。 （※追記）第4日目はイロドルハナ(@shino212)さんの「はじめてSVGでアニメーションを作った時の話」です。 ちなみにまだ空いている枠はあるので、興味のある方は是非ご参加ください。 はじめにSVGはXMLをベースにしているためテキストエディタでも簡単に作れるとは言え、実際の制作は何らかのオーサリングツールを利用することがほとんどでしょう。 中でもAdobe Illustratorはベクター系ソフトウェアの代表的な存在で広く普及しています。このIllustratorか

CSS Architecture Advent Calendar 2014 1日目の記事です。 CSSの設計をしていく上で大事なネーミングルール。 今年僕が関わったプロジェクトでのネーミングルールをゆるく紹介したいと思います。 こうやって名前をつけてました。基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。 ネーミングルールを決めるとき、区切り文字をハイフンかアンダースコアか、それとも混在か悩みましたが、とりあえず以下の様なルールでやっていくことにしました。 /*css*/ [Prefix] - [Block] - [Element] -- [[Modifier-Key] - [Modifiler-Value]] { /* Rule Set */ } 一つ一つ解説していきます。 Prefixまずは接頭辞です。 接頭辞としてプロジェクト名や世代などを付与

IPベースのバーチャルホスト 前置きが長くなってしまったが、設定の解説に移ろう。バーチャルホストは、概念が複雑な割に設定そのものは単純である。ただし、バーチャルホストにはDNSの設定が不可欠である。複数のホストを賄うにしろ複数のドメインを担うにしろ、DNSの変更なしにアクセスを受け入れることなどできないからである。 DNSの設定 まず、DNSの設定を済ませてしまおう。IPベースの場合は、ホストごとにIPアドレスを持つので特殊な設定は必要ない。ゾーンファイルに、 という具合に、Aレコードを羅列していくだけである（ゾーンファイルの設定については、「BINDで作るDNSサーバ」第2回 名前解決の仕組みとゾーンファイルの設定を参照）。つまり、それぞれユニークなIPアドレスを持った複数のWebサーバが存在するものとして、各ホストを通常どおりに登録するだけである。 Apacheの設定 Apacheの設

TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ

by arnoKath 美しいウェブサイトを作ることは単純にユーザーの気分をよくするだけではなく、パフォーマンスを上げると言われています。ウェブサイトのデザイン性を上げるには使用するフォントも大切ですが、フォントの大きさも重要な要素。そこで、黄金律を使ってフォントサイズを決めることの重要さや方法をAdditive AnalyticsのCEOであるLaura Diane Hamiltonさんがまとめています。 The Golden Ratio and Typography - Laura Diane Hamilton http://www.lauradhamilton.com/the-golden-ratio-and-typography ウェブサイトに情報を記載する上で、フォントのサイズに階層を設けるとユーザーを情報へ正しく導くことが可能であるため、ウェブサイト上のフォントサイズは複数のも