【白銀比・計算ツール・2カラム対応】 - 白銀比計算ツール
重要なお知らせ：このページのツールは、Flashの技術を用いて表示させていたため、現在は動かすことができません。申し訳ございませんが、ご了承下さい。 自然界でもっとも美しいのが「黄金比」なら、人工物や建造物で安定した美しさを持ち、日本人にも古来から浸透しているのが「白銀比」。 白銀比は、用紙サイズ（A3やA4など）や建物などに採用されている比「1:√2」のことで、近似値は1:1.4142、約5:7です。日本建築には古くから白銀比が用いられ、法隆寺の五重塔を上から見た投影平面図における辺（短辺と長辺）の関係も白銀比になっています。白銀比は別名「大和比」と呼ばれるくらい日本に浸透しています。「絞り値、シャッター速度、被写界深度の関係を覚えよう！」に登場した「絞り」も、ルート2が大きなポイントでした。 Webデザインに白銀比を取り入れようとした場合、全体の横幅と横幅の比からそれぞれの幅を求める必
スタイルシートの有用なスニペットのまとめ | コリス
よく使うclearfixから、見出しの画像置換や見た目非表示の新しいスニペット、レスポンシブによく利用されるスニペットなど、スタイルシートのよく使用する有用なスニペットを紹介します。 A Collection of Handy CSS Snippets 下記は各ポイントを意訳したものです。 ショートハンドのclass デザイン関連のスニペット 開発関連のスニペット 印刷・Retina・検証用のスニペット ショートハンドのclass よく使用するショートハンドのclassから始めましょう。 ポイントはセレクタでエレメントを定義するのではなく、すぐに利用できることを前提にしています。 まずは、テキストと画像を配置する時に簡単に使えるfloatです。 .float-left /* こんな感じに直観的に分かる名前で */ { float: left; } .float-right /* こんな感じ
とあるコーダーの備忘録 |css3-mediaqueries.jsが効かなくて困った時のまとめ
最近にわかに盛り上がってきているレスポンシブWebデザイン。 PC・タブレット・スマホなど、様々なスクリーンサイズのデバイスに対応するためにメディアクエリを利用してスクリーンサイズ幅などに応じてレイアウトを調整する技術ですが、残念ながらIE8以下はこれを理解しません。 IE8以下はレスポンシブにならなくても良いなら話は早いですが、 「全部同じ見た目じゃなきゃヤダ！」というクライアントを説き伏せられない場合は 何らかのポリフィル系JSで対応する必要があります。 いくつか似たようなものはあるようですが、 おそらく以下の２つが最有力候補かと思います。 ・respond.js ・css-mediaqueries.js ■respond.js Adobe Dreamweaver CS6の目玉機能「可変グリッドレイアウト」でも利用されているスクリプト。 非常に軽量でサクサク動き、にわかに本命的な扱いを
レスポンシブwebデザインの作り方とSEOとUXを考察
2013年は更に レスポンシブ は流行ではなく 一つのデザイン定義として定着する年なのではないかと。 その定着する新しい手法のデザインの作り方と SEO 、 UX の観点から考察していきたい。 レスポンシブwebデザインの基本 レスポンシブwebデザイン とは 1ファイルでどんなデバイスでも柔軟に対応する事が出来る手法です。 この手法が編み出される前は、端末別等で違うCSSファイルを呼び出し、デザインを変えていたかと思いますが、このやり方だとデザインを変更する時に端末別に分けた分のデザインを変更しなくてはなりません。 レスポンシブwebデザイン もそうゆう意味では変えなくてはならないのですが 横幅の計算でデザインしていきますので変更点が少なくなります。 初めは リキッドデザイン と似ていると感じると思いますが、違いはこちら ■リキッドデザイン これで レスポンシブwebデザイン とはなんぞ
3日間で検索順位が200位上昇したSEO対策10項目
今回ご紹介するのは、検索順位が200位以上も大幅に改善された事例です。 そのサイトは12月末にSEO対策の見直しも含めてリニューアルを行いました。SEO対策の見直しと言っても、外部対策は一切行わず、内部対策の見直しだけ行いました。その結果、リニューアルの3日後には検索順位が200位以上上昇しました。1ヵ月半経った現在も順位は安定しています。 「検索順位が上がらない」「検索順位が極端に低い」という方のご参考になればと思い共有させて頂きます。 リニューアル前のサイトの状況 リニューアル前のサイトの状況は以下の通りです。 企業サイト（サイト内に社員ブログあり） スモールキーワードで1年以上240位前後に位置する ページランクは1（被リンクは殆どなし） ペナルティに該当するSEO対策はやってきてない 今回行ったSEOの方針 上記の通り、このサイトはペナルティに該当するようなSEO対策は行っていない
WordPress初心者がオリジナルテーマを作って困った5つのこと
2013/02/20：アイキャッチの箇所について新たな情報をいただきましたので、記事を修正しました。 こんにちは。Kanaです。 このブログKana-Lierは、WordPressのテーマをオリジナルで作りました。 「WordPressでオリジナルテーマ？？WordPress全然わからないんだけど…」 そんな私がオリジナルテーマを作るにあたって、つまづいたことを書き留めたいと思います。 今回私は、どのテーマも流用せず、白紙の状態からテーマを作ることにしました。 functions.phpも0からはじめています。そのため、なぜそんなところで躓いた？！というなところで躓いてしまっていることもありました…X( オリジナルテーマを作りたいけど、まず何をしたらいいの？ まずは、Webクリエイターボックスさんの記事を読んで、ブログのテーマを作っていきましょう。 WordPress オリジナルテーマの作
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE6～IE9を同時に表示確認できるMicrosoft純正ソフト [ホームページ作成] All About![IE6～IE9を同時に表示確認できるMicrosoft純正ソフト [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
Cheat Sheet
Wordmark
IEにも対応！10分でできるWebフォント実装法 (1/3)