1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ (Tumblr for Android) の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript (jQuery 使用) で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE? 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね (画像は 「Tumblr Staff」 から
ボタンをホバーすると、サークル状のフラットなアイコンを使ったソーシャルメディアへのシェア用のボタンがアニメーションで表示されるスタイルシートを紹介します。 Animacion CSS ※デモは最新のモダンブラウザでご覧ください。 デモ自体は上記のアニメーションに比べてちょっと遅い動きですが、スタイルシートで調整すれば好みのスピードに変更できます。 実装は、下記のようになっています。 HTML 各シェアボタンはa要素で配置し、div要素で内包します。 <div id="redessociales"> <a class="smedia facebook" href="https://www.facebook.com/josernitos">Uno</a> <a class="smedia twitter" href="http://www.twitter.com/josernitos">Dos
この度、ソフトバンク クリエイティブさんから、私の3冊目の著作となる、「基礎からのWordPress (BASIC LESSON For Web Engineers)」 が発売になりました!この度 … と言っても、1月29日に発売になっているので、ちょっとご報告が遅くなってしましました …。 この本は WordPress のテーマをカスタマイズしたり、オリジナルテーマを作るときに必要となる基礎的なことに重点を置いた入門書になっています。でも Webサイト作成の入門書ではなくて、あくまでも WordPress のテーマ作成の入門書なので、HTML や CSS については解説はしていません。 また、WordPress は PHP で作られているので、テーマを作成する上でも PHP の知識は必要になりますが、「PHP はわからないけど …」という人にも、できるだけそのまま読んでいただけるように、
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-
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません! はじめに結論を言うと、CompassでCSSを書くと 早い! 見やすい! メンテしやすい! コード量がぐっと減る! 一度使い出したら最後、もう元には戻れない! 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず! 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください! Compassとは? Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/CSSを簡略化したものです。 1. スクロールしてもバーを常に最上部に表示 2. サブナビゲーションのドロップダウン 3. シャドウを使った光沢が美しいボタン 4. 吹き出しスタイルの通知パネル 5. Appleのページラッパー 6. Appleのコンテンツボックス 7. Appleのフィーチャーリンク 8. 画像にさりげなくシャドウを添える 9. フォームの入力を目立たせる 10. エラステック
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
コーダー必見、SCSS・Compassで開発効率アップ|Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか? 2月のリア充イベントといえばバレンタインですね(企業戦略)。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ|便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
作成:2013/01/28 更新:2014/11/01 Tool > Webサービス フリーソフト、無料ツールなのにここまで使える 前回、無料素材をご紹介しました。 今回は無料で使える「ツール」をまとめます。フォント、画像、配色、htmlからエディター・アフィリエイトリンク作成補助まで。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 1.フォント 2.画像編集 3.ロゴ作成 / ネタ 4.配色 5.HTML5 6.CSS 7.ブラウザチェック 8.エディター 9.アフィリエイトリンク作成 10.フォーム作成 1.フォント PCにインストールされているフォント一覧をプレビュー Font picker イラスト等に使われているフォントを調べる WhatTheFont Windows上のテキストをくっきり、見やすく表示。 gdipp - k本的に無料ソフト・フリー
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
Twitter Bootstrap 3 の変更点概要 Bootstrap 自体の仕様だけでなく体制なども変更されるようです。 モバイルファースト twitter/bootstrap, twitter/bootstrap-server, mdo/bootstrap-blog(プライベートレポート)を twbs organization アカウントへ移行 サイトの URL を http://getbootstrap.com に変更 CSS はレスポンシブ用スタイルも含めて1ファイルにする IE7, Firefox3系 のサポート廃止 Glyphicon のフォント版を採用 Apache ライセンスから MIT ライセンスへ移行 *-wip ブランチの開発スタイルから 3.1.0-modal-revamp のような機能ごとのブランチに変更 過去バージョンのダウンロードにタグを使う コミュニティの
軽量且つ、クロスブラウザにも対応したレスポンシブWebデザイン対応のCSSフレームワーク・Responsive Boilerplateのご紹介。パッと見た限りですが、かなり使いやすそうです。軽量なのも◎。 軽量なレスポンシブWebデザイン用のボイラープレート(文例集)です。圧縮版で2KBほど。また、IE7等でも表示が崩れません。 いわゆるCSSフレームワークですね。軽量でシンプル。IEにも対応と、欲しい特徴だけ絞られた感じでよかったです。 IE TabのIE7のスクショです。 また、Sublime textのパッケージも用意されていますのでSublime textユーザーの方で興味がありましたらお試しになってみては如何でしょう。ライセンスはMITです。 Responsive Boilerplate
「tableはダサいからdivを使おう!」とよく聞かれたのは5年前くらいからでしょうか。 それ以後、divにfloatを設定してレイアウトを組むのがスタンダードになりました。 ただし、floatというプロパティを正しく理解していない人はけっこう苦労したはず。 *floatについての正しい理解はこちらの記事を参考のこと > IE6の呪縛 フロート(float)を正しく理解する ということで、floatというプロパティを正しく理解してclearfixをきちんと使えるようになると、floatレイアウトは楽勝になってきます。 ですが、このfloatレイアウトはマークアップが複雑になりがち。 可変レイアウトを基本とするモバイルファーストのWeb制作においては特に。 以下のようなレイアウトをもっとスマートに記述できないものか? 「display: table」と「display: table-cell
単独でも素敵なかっこいいエフェクトで十分なのに、それらが全部まとまって、更に実装方法にもこだわったオープンソースのCSSのフレームワークを紹介します。 ドラッグ&ドロップでさまざまなエレメントを表示します。 Maxmertkitの特徴 Maxmertkitのデモ:スタティック Maxmertkitのデモ:CSS3アニメーション Maxmertkitのデモ:ソーシャルメディア てっとり早くワクワクしたい人は、3つ目の「Maxmertkitのデモ:CSS3アニメーション」をご覧ください。 Maxmertkitの特徴 SASSベースのオープンソースのフレームワーク CSS3アニメーションを使った演出効果 他のフレームワークとかぶらないネームスペース デザイン(カラー・サイズ)変更はテーマで簡単 Creed Creed(主義)のページではMaxmertの主な特徴が解説されています。例えばコードの簡
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
posted on:February 7, 2011 Drawing Calendar Icon With CSS3 In this article I am going to use some of the CSS tricks to create a calendar icon you can use for your blog posts or something similar. It is important to notify that there are no images used here and the markup couldn’t be simpler than it is. The final result looks like the image below. Take a look at the demo HTML As mentioned the HTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く