タグ

2012年1月31日のブックマーク (12件)

  • 使用頻度の高い 究極にシンプルなフリーテクスチャ集「30 Free Seampless Background Textures」

    TOP  >  Design  >  使用頻度の高い 究極にシンプルなフリーテクスチャ集「30 Free Seampless Background Textures」 継ぎ目なく連続したパターンで使用できるテクスチャは、1枚の大きさを気にすることなく使用できるため、webの繰り返し処理を行う場面などで非常に重宝すると思います。そんな中今回は、シンプルかつシームレスなテクスチャ素材集「30 Free Seampless Background Textures」を紹介したいと思います。 いろいろなテイストにも柔軟に対応でき、おおいに活躍してくれそうな素材がまとめられており、日々のデザイン制作の定番アイテムとして是非覚えておきたい内容となっています。いくつか気になったものをピックアップしましたので、以下よりご覧ください。 詳しくは以下 ■等間隔にボコボコっとした、ダンボール紙を思わせるテクスチャ

    使用頻度の高い 究極にシンプルなフリーテクスチャ集「30 Free Seampless Background Textures」
    mimosafa
    mimosafa 2012/01/31
  • CSSで透過を実装する - 残像ブログ

    背景を透過した半透明なデザインってかっくいーよな!と思ったので実現方法を調べていたのだけど、意外とややこしかったので備忘録としてまとめておく。 なおJavascriptは使わずにCSSのみでの実装を前提とします。 今回は、コンテンツ全体を包むボックス(黒)のみを半透明にして背景画像を透けさせたいとします。 この記事では半透明の実装には以下の3つの方法を考えます Opacityプロパティを使う RGBaで不透明度を指定する 透過PNGを使う この記事でのデモページの動作確認は以下のブラウザで行いました IE8 Firefox3.6 Opera11 Safari4 Chrome13 大変参考にしたページ:第2回 OpacityとRGBa実践テクニック|gihyo.jp … 技術評論社 Opacityを使う OpacityはCSSで設定できるプロパティで、文字通り対象の要素の透明度を指定できます

    CSSで透過を実装する - 残像ブログ
  • 従客閑雅 IEでセンタリングができない CSS

    WPを設置し、CSSを見直している。 FFやChrome、Operaで確認すると、正常なのだが、IE8で見るとセンタリングされないで左に寄ってしまう。 どうも、IE8にはCSSに対してバグがあるようだ。そこで、ウェブを参照しながら、訂正をした。 body { ... ... text-align: center; } div#wrapper { width: 1000px; margin: 0 auto; text-align: left; } 普通は、青字部分で正常にセンタリングされるのだが、IEではだめである。 全体のテキストをセンタリングして、個別のテキストを左揃えに戻しておくと、正常になる。(赤字部分) *しかし、この設定をすると、このボックスにて表記されていない場合、センタリングしてしまうので、個別ボックスの表示を確かめておく必要がある。 text-align: left; もし

  • CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多め

    CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの?というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない

  • http://graffitibooks.net/%E9%96%8B%E7%99%BA/3369.html

  • HTML5を今すぐ使うためのコツや情報をまとめてみました - EC studio デザインブログ

    この数カ月でHTML5のサイトが国内にも増えてきました。先日10周年を迎えた EC studio のサイトもHTML5で制作しています。マークアップの面でのHTML5の導入となりましたが、難しいと思う以上に勉強になることが多くありました。(今も改善を続けています。) http://www.ecstudio.jp/ 個人サイト以外でHTML5を導入するのをためらっている人が多いと思うので、今からでも使っていくためのコツやノウハウをまとめてみました。 新要素をJavaScriptで生成する HTML5の新要素はIEでは未知の要素です。そのため記述していてもDOMツリーが構成されなかったり、CSSが適用されないという問題が生じます。 そこでdocument.createElement(要素名);により、ブラウザ(ユーザーエージェント)にとって未知な存在の要素を生成し、認識させることができます。

  • CSSセレクタ20個のおさらい

    CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

    CSSセレクタ20個のおさらい
  • WordPressとGoogleマップを連携させるのに便利な地図プラグイン

    WordPressGoogleマップを連携させる際に、便利な地図プラグインをご紹介します。 まず、下記でご紹介するWordPressプラグインは、どれもGoogle Maps API キーが必要です。 まだキーを取得されていない方は、事前にGoogle Maps APIにサイト登録をして、キーを取得してください。 Google Maps Anywhere プラグイン ページ内の任意の場所にGoogle マップを貼り付けるためのプラグイン。 プラグイン導入後、記事の編集画面にて、メディアボタン右端に「Googleマップを追加」ボタンが現れる。そのボタンから地図挿入することができる。 使い方は簡単だが、不便な点がある。それは地図が挿入された記事を表示させた際、地図のズームイン/ズームアウトが出来ずに静的な画像として表示されてしまう。 ズームインして、詳細な地図を見たいユーザにとっては

  • [Wordpress]投稿記事のURLの後ろに?type=○○○ とつけて通常とは違うテンプレートを読み込む – devolen

    [WordPress]投稿記事のURLの後ろに?type=○○○ とつけて通常とは違うテンプレートを読み込む ワードプレスで、シングルページ(投稿記事)に適用するテンプレートを変更する方法。 dogmap.jp さんで、僕が前々からワードプレスでしたかったことを書かれていたので、参考にさせていただき実装してみました。これはとてもやりたかったことだったので、ほんとうれしかったです。 忘れないように実装方法をメモしておきます。 これはWordPressでポータルサイトを構築するには欠かせない機能だと思いますよ。 パラメータでシングルページのテンプレートを変更 : dogmap.jp 簡単に言うとsingle.phpにいろんなページをくっつけることができるようになります。 実装例:こんな感じに実装したい! 例えば、通常の投稿ページにカスタムフィールドで地図情報や、メニュー、写真などのギャラリーな

  • http://www.orange.ne.jp/~den7/htm/candy.html

  • デスクトップを録画できるインストール不要なサービス「Screencast-O-Matic」

    デスクトップを録画できるインストール不要なサービス「Screencast-O-Matic」を紹介します。デスクトップ録画は「スクリーンキャスト」「動画キャプチャ」ともいいます。 Screencast-O-Matic スクリーンキャスト(動画キャプチャ)はクライアントにインストールするタイプが主流のようですが、「Screencast-O-Matic」はブラウザから起動するだけで簡単に録画が行えます。録画した動画はYouTubeに連携してアップロードすることも可能です。 「Screencast-O-Matic」は少なくとも2007年から続いている、ある意味老舗のサービスのようです。無償で利用する場合は最大15分録画できます。有償サービスを利用すれば無制限に録画できます。 以下、操作方法を紹介します。 1.録画の準備 Screencast-O-Maticのサイトにアクセスして、「Start Re

    デスクトップを録画できるインストール不要なサービス「Screencast-O-Matic」
  • 最近リリースされた高品質なフリーのデザインフォント -2012年1月

    最近リリースされたものを中心に、高品質なフリーのデザインフォントを紹介します。 Adele 個人・商用利用無料。 Cassannet 個人・商用利用無料。 Arvill 個人・商用利用無料。 [ad#