レイアウト アーカイブ - VIVABlog https://vivablog.net/tag/レイアウト/ WordPressやMovableTypeのカスタマイズやWebサイトの制作・運営に役立つ情報など。 Mon, 02 Mar 2015 11:29:49 +0000 ja hourly 1 https://wordpress.org/?v=7.1 [CSS] 丸や三角など任意の形にコンテンツをレイアウトできる「shape-outside」 https://vivablog.net/webtool/basetemplate/kiji1242/ Mon, 02 Mar 2015 11:29:49 +0000 https://vivablog.net/?p=1242 こちらの画像は、CSS Shapeのshape-outsideという属性を使った一例。 斜めにカットされた透明png画像のカットラインに沿って、テキストがレイアウトされています。通常であれば下のラインに沿ってレイアウトさ...

[CSS] 丸や三角など任意の形にコンテンツをレイアウトできる「shape-outside」

関連する記事

  1. [CSS] Blending Modeを利用したロゴの作成
  2. [CSS] Text ShadowなどのCSS3の効果を見ながらジェネレート
  3. [CSS] CodePenでメニューやボタンなどのデザインサンプルコードが公開
  4. [CSS] Bootstrapで使えるボタンなどの素材集Material Design
]]> [ブラウザ] 画像やレイアウト間のサイズを測れるChrome拡張「Dimensions」 https://vivablog.net/webtool/kiji1112/ Mon, 01 Dec 2014 15:06:43 +0000 https://vivablog.net/?p=1112 「Dimensions」は、Webページの画像やレイアウトのサイズを測ることができるChrome拡張機能です。 画像のサイズやレイアウトのサイズ、ボタンやアイコンのサイズなどをソースを見ずに知る事ができるので、Webデザ...

[ブラウザ] 画像やレイアウト間のサイズを測れるChrome拡張「Dimensions」

関連する記事

  1. [ブラウザ] Web開発者向けのFirefox Developer Edition
  2. XREAサーバーでIImage browserを使う
  3. ソーシャルWEBブラウザFlock
  4. [CSS] サイトに使用されているCSSを属性別に羅列するChrome拡張「CSS Dig」
]]> [ブラウザ] Web開発者向けのFirefox Developer Edition https://vivablog.net/webtool/kiji1092/ Wed, 12 Nov 2014 08:00:09 +0000 https://vivablog.net/?p=1092 Webサイトやブログなどの作成者向けに、Mozillaが「Firefox Dev Edition」を提供しています。 使ってみた感じでは、通常のFirefoxにFire Bugアドオンをインストールした状態に近くて、ソー...

[ブラウザ] Web開発者向けのFirefox Developer Edition

関連する記事

  1. [CSS] フラットデザインのCSS Framework「Bootflat」
  2. FirefoxをブログエディタにできるScribeFire
  3. Tumblrを便利に
  4. スクリーンショット撮影機能の決定版「LightShot」
]]> [CSS] レスポンシブデザインの参考やサンプルとして使える「Web Starter Kit」 https://vivablog.net/webtool/basetemplate/kiji1024/ Mon, 23 Jun 2014 05:26:07 +0000 https://vivablog.net/?p=1024 マルチデバイスの観覧に対応したレスポンシブレイアウトのデザインサンプルとして使えるWeb Starter Kit。出来合いのテーマだとオリジナリティに欠けるという場合、このフレームワークを活用してオリジナリティを出す事が...

[CSS] レスポンシブデザインの参考やサンプルとして使える「Web Starter Kit」

関連する記事

  1. [CSS] フラットデザインのCSS Framework「Bootflat」
  2. [html/css] ボタンやメニューなどのサンプル「Get Shit Done Kit」
  3. ベースになるCSSレイアウトテンプレート
  4. CSSレイアウトテンプレートのツール色々
]]> [CSS] 見出しと本分のレイアウトサンプル https://vivablog.net/webtool/basetemplate/kiji796/ Tue, 30 Jul 2013 03:01:38 +0000 https://vivablog.net/?p=796 h2, h3, h4 で見出しを付けて、pで本分を書くという良くやるレイアウトのサンプルCSSです。ただ単に見出しを太字で大きくして、少しマージンをとってその下に本分を書くというものから、サイドにレイアウトするものまで様...

[CSS] 見出しと本分のレイアウトサンプル

関連する記事

  1. [CSS] 左右の高さがキッチリ揃うCSS Tableレイアウトのサンプル
  2. ベースになるCSSレイアウトテンプレート
  3. CSSレイアウトテンプレートのツール色々
  4. [CSS] 部分使用もできるシンプルなCSSモジュール「Pure」
]]> [CSS] 部分使用もできるシンプルなCSSモジュール「Pure」 https://vivablog.net/webtool/basetemplate/kiji779/ Thu, 30 May 2013 04:31:23 +0000 https://vivablog.net/?p=779 ヘッダーに読み込み用のタグを追記するだけで、すぐに使えるCSSモジュールの「Pure」。 メニューやテーブル、フォームやボタンなど一部分のみのCSSも用意されているので、それを読み込むことで元のデザインやレイアウトに影響...

[CSS] 部分使用もできるシンプルなCSSモジュール「Pure」

関連する記事

  1. ベースになるCSSレイアウトテンプレート
  2. CSSレイアウトテンプレートのツール色々
  3. ミニブログ「Tumblr」用のcssテンプレート
  4. Tagをおしゃれに装飾するCSS
]]> [CSS] 左右の高さがキッチリ揃うCSS Tableレイアウトのサンプル https://vivablog.net/webtool/basetemplate/kiji771/ Tue, 09 Apr 2013 14:59:17 +0000 https://vivablog.net/?p=771 こちらのCSS Tableは、左右で1セット。ブログの記事などで利用する際には大変便利です。  [ Equal Column Height With CSS ]

[CSS] 左右の高さがキッチリ揃うCSS Tableレイアウトのサンプル

関連する記事

  1. htmlやPHPなどのソースをBlogに表示する方法
  2. text-shadowで文字を立体的に、または陥没させる
  3. WordPressのコメント認証にOpenID
  4. [WordPress] SAKURAスタンダートで複数ブログを運営する
]]>