displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる | バシャログ。
こんにちは。まだ何一つ夏を感じていないmackyです。 今日は、RWDでdisplayプロパティを使ってtableレイアウトのデザインを変化させる方法をまとめてみました。 RWDでテーブルレイアウトを定義リスト風に変化させてみよう tableタグのdisplayの値はデフォルトではtable、thとtdタグはtable-cellとなっていますが、この値をblockやlist-itemなど他の値に変えてみます。 (1) (2) (1)の状態から(2)の状態へデザインを変化させます。 メディアクエリ―を使ってブレイクポイント（480px）を設定し、その中に上書きするCSSを書いていきます。 今回はこんな感じです。 HTML <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>項目A</th> <td>この文章はダミーです。</
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
CSS3 の trasform による画像処理入門
こんにちは。Web 開発担当の梶野です。 最近はやっと IE8 対応も減ってきて、 CSS3 の transform を安心して使用できる機会が増えてきました。 そこで今回は、今更ではありますが、CSS3 の transform を使って基本的な画像変換である「任意座標を中心とした回転、拡大、移動」をやってみたいと思います。 transformの2つの使い方 CSS3 の transform プロパティの設定には大きくわけて以下の2つの方法が存在します。 ・ rotate()、scale()、 translate() でそれぞれの値を指定する ・ matrix() を使って全ての変換を1つの行列で指定する 今回は両方のアプローチで「任意座標を中心とした回転、拡大、移動」をやってみて同じ結果になることを確認しようと思います。 それぞれの場合で 100px × 100px の画像に対して以下の
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
css iPhone・iPad対策版 表示エリア固定ブロック（position:fixed） with iScroll | SHOWCASE SAMPLES | web showcase : s-ej web tips
動作対象環境 IE 6 （expressionによる代替対応） IE 7 ～ FF 2 ～ Chrome Safari 2 ～ Opera 9 ～ Safari Mobile （iScroll による代替対応） 仕様 "iScroll" scrolling library for mobile webkit 利用 CSS3利用 動作サンプル ブラウザウィンドウの表示エリア内の、任意の位置に固定されて表示するブロックは、cssの「position」プロパティの値を「fixed」に設定することによって実装するのが最も安定した方法だが、IE6とiPhone、iPadなどでは「position:fixed」に対応しておらず、正しい表示結果が得られない。 IE6向けには、cssハックによってIE6以下に最適化したセレクタに対して「position:absolute」とexpressionを付与し、こ
HTMLとCSSで手帳アイコンを書いてみました。 / SQUEEZE - Web Design Studio -
話題の「イラストレーターで四角形オブジェクトを1つだけ配置して、すべてアピアランスで作成されたアイコン」をさらにHTMLとCSSで再現された方がいたので、HTMLとCSSだけで手帳アイコンを作ることにトライしてみました。 参考サイトまずは参考にさせていただいた元ネタはこちらです。 ・イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。｜Web Design KOJIKA17 ・Illustrator Unlimited Appearance - suzuki | JAYPEG 両者とも、とてもクオリティが高いですね。及ばないかもしれませんが、レッツトライ。 HTMLとCSSで作った手帳アイコン HTMLとCSSはこちら ※最新のブラウザでご覧ください。 裏表紙 + 紙 裏表紙をベースに「box-shadow」を内側に、「紙」と「紙の影」を左側に4pxと1pxずつ
【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ
こんにちは、橋本です。 今日は備忘録がてら、CSS3のアニメーションについてまとめていきたいと思います。 iOS端末でFlashが動作しないことから、今後CSS3でアニメーションを実装する場面は増えてくると思います。 そんなときにこの記事を参考にしてもらえると幸いです。 今回の記事に記載されているサンプルですが、Safari、もしくはChromeで動作するようになっています。 IE、Firefox、Operaなどの他のブラウザは対象外です。 （なぜなら、ベンダプレフィックスを書くのがめんどくさかったからです。） 早速ですが、CSS3でアニメーションを実装するためには、以下の２つの方法があります。 1. transitionプロパティでアニメーションを定義する 2. animationプロパティでアニメーションを定義する また、アニメーションを定義する際には、通常のプロパティに加えてtran
[WP]get_posts()関数について
get_posts関数の使い方とCSS Template Listsのページでやってることを紹介しますん。 CSS Template Listsではカテゴリーに記事がpublicで投稿されたら、記事のサムネイルになる画像にリンク貼って一覧表示しています。 記事のサムネイルについては設定や表示をするプラグインもありますが、プラグイン使わなくてもやれる方法があるよ、ってことで。 あるカテゴリーの記事をリストアップしたいという場合、この記事のサンプルのように 普通はquery_posts()とか使うと思いますが <?php query_posts('cat=5');if (have_posts()) :?> <?php while (have_posts()) : the_post(); ?> <div class="post"> <?php the_content(__('Read More
![[WP]get_posts()関数について](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
スタイルシート 背景画像の位置を指定する
背景画像の位置を指定するには、background-positionプロパティを使います。 この前に説明したbackground-repeatの値に、no-repeatを指定すれば画像は繰り返さず画面の左上に一つだけ表示されましたが、このプロパティを使えば左上だけではなく、好きなところに画像を表示させることが出来ます。 位置の指定はまず、数値にptなどの単位をつけて設定する方法があります。最初の値には左側からの位置を指定し、半角のスペースの後の2つ目の値は、上からの位置をそれぞれ指定します。 左からの位置を100px、上からの位置を200pxに設定したい場合は、 background-position:100px 200px;というように記述します。 それと、キーワードを使って位置を指定することも出来ます。キーワードには、left(左）,center（中央）,right(右）,top(上)
IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン BLOG
CSS設定でオブジェクトを半透明にできるプロパティがあります。 IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。 他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。 CSS Opacity in Mozilla,IE, and Opera http://www.mandarindesign.com/opacity.html CSS Opacity設定 以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。 filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; IE alpha(opacity=透明度); 100が100％とな
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
全てのブラウザに対応したcssスタイルシートの透明、半透明の背景設定を記述する | WordPressにGoogle Maps API V3！
通常のWeb画面では、あまり使用しないかも知れませんが、スマートフォンの画面は狭いので、背景（background-color）を透明、または半透明にするテクニックを覚えておくと良さそうです。 背景を透明にする場合： 背景（background-color）に、transparentを指定します。 background-color:transparent; 全てのブラウザに対応した半透明の設定 具体的には、次のように記述します。これで、IEを含む全てのブラウザをサポートできるそうです。 次は、背景白色のカラー（＃FFFFFF）を85％の透過に設定したものです。 #maplist{ background-color:#FFFFFF; filter:alpha(opacity=85); -moz-opacity:0.85; -khtml-opacity: 0.85; opacity:0.85;
レスポンシブWebデザイン、ブレークポイントの考え方とピクセル密度の問題
レスポンシブWebデザインは、画面幅に合わせてレイアウトが変化することで、様々な画面サイズにワンソース(一つのhtml)で対応させることができる制作手法です。Media Queryという技術でCSSを切り替えることでレイアウトが変化します。CSSが切り替わる画面幅を『ブレークポイント』と呼びます。 今回はレスポンシブWebデザインのサイト制作時に、特に気になるブレークポイントの設定について、考え方と注意したい点をご紹介したいと思います。 CSSが切り替わりレイアウトが変化するポイントを「ブレークポイント」と呼びます。 ブレークポイントの考え方 ブレークポイントはどの画面幅でも見やすいレイアウトになるように設定するものです。 レスポンシブWebデザインは「どんな画面幅で見ても、適切に表示させるための制作手法」です。どんな画面幅でも見やすいようにデザインし、どんな画面幅でも見やすいレイアウトに
一目惚れするくらいかわいいダイアログを表示するjQueryプラグイン | アルパカの具
思わず一目惚れしてしまいました。このダイアログのかわいさに。しかも、ものすごく簡単に実装できてしまうんです。 ダイアログの種類は「Notice（通知）」、「Success（成功）」、「Warning（警告）」、「Error（エラー）」の4種類があるので、用途に合わせて使い分けることができます。 使い方 1.jQuery $( function(){ $().toastmessage( { position : 'middle-center' } ); // Notice $( '#demo-notice' ).click( function(){ $().toastmessage( 'showNoticeToast', 'こんなにかわいいダイアログが手軽に使えるなんて' ); }); // Success $( '#demo-success' ).click( function(){ $(
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
めしおのアフィリエイト教材レビューブログ