IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal
テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のMobile Safariで非常に機能し、Windows Phone8でも機能します。 IE7以下は非サポートで、IE8はエフェクトなしで機能します。 まずは、テキストを配置したモーダルウインドウから。 Modal Text モーダルウインドウ内にトリガーを設定することも可能で、「Open a new modal」をクリックすると別のウインドウが開きます。 ウインドウを閉じるには、右上のクローズをク
デザイン時に注意したい角丸の使いかた - Design Color
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は？ 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう！と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
Googleに学ぶ、Google Maps APIでできること（デモや技術情報など）
Google Maps APIを使ってできるユニークな特徴を備えたデモが楽しめるGoogleのプロモーションサイトと補足として技術情報を紹介します。 Google Maps API - More Than A Map デモでは6つのGoogleマップを使ったコンテンツと、開発者向けリソースや更に高度なデモを楽しめます。 Googleマップ：ベースマップ Googleマップ：サテライト Googleマップ：ストリートビュー Googleマップ：プレイス Googleマップ：ルート案内 Googleマップ：ビジュアライゼーション Googleマップ：開発者向けリソース Googleマップ：ショーケース Googleマップ：ベースマップ まずは、基本となるベースのマップです。
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
JavaScriptを使わずにPinterest風レイアウトにする
昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns"> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> ... ... </div> </div> CSS Pinterest風レイアウトをCSSで実現するには、二つの方法が考えられます。 一つ目はfloa
Word wrapping/hyphenation using CSS. — Kenneth Auchenberg
A few days back I spent most of my afternoon looking into how I could achieve proper word wrapping within elements with a dynamic width. At Podio, we have a fluid layout, with a dynamic width, to deliver a responsive user experience. This means no element is having a fixed width, instead width’s are defined as percentages. This causes some headaches, now and then. Word wrapping caused a major one.
初めてMacを買い換える時のこれだけは絶対知っておきたい7つのポイント - iTea3.0
こんにちは！@torizoです。 Appleから新製品の発表なんかがあって、新しいMacに買い換えた時、古くなったMacをどのように扱っていますか？ 特に中古Macを手放す時は、バックアップや個人情報をしっかり扱わないと、あとで痛い目に遭うこともあるかもしれません。 中古Macを知人に譲ったり、売却したりする時など、中古Macを手放すときにに最低限知っておいてほしいポイントを紹介したいと思います。 Macを買い換える時の参考にしていただければ嬉しいです。 まず基本中の基本となるのが「バックアップ」です。新しいMacに乗り換える前に、必ず中古Macのバックアップをとっておきましょう！ 「TimeMachine」のバックアップはもちろんのこと、それとは別に外付けハードディスクを用意してバックアップをとることをオススメします。 というのも、TimeMachineを使わずに新品Macの環境をつくり
Mac × TextExpanderで爆速HTMLコーディングを突き詰めてみる - loveMac.jp
どーも！こんちわ。サイトリニューアル後初投稿です。って書いたけど、実際は投稿順序が逆転したので2つ目になりました。最近ひたすらコーディングに明け暮れる毎日で、ブログ投稿さぼってました。でもネタはちゃんとためてるよ！ちなみに今回は、細かすぎて伝わらない可能性大の（そして需要なさそう）、最近とことん突き詰めようと考えてきた、爆速HTMLコーディングについてのTipsです。どうぞよろしく。 目次 はじめに、爆速目指す上で意識すべきこと 準備するもの 爆速コーディングの基本〜キーボードショートカット TextExpanderを導入・設定する 日本語入力時に変換されないバグを修正する TextExpaderにスニペット（省略語）を登録する TextExpanderの優れた点 変換後のカーソル位置を指定する 変換時にクリップボードのテキストを埋め込み可能 爆速のためのスニペット登録のコツ 基本はタグ名
Macユーザーが案外知らないかもしれない便利なこと9個 | loveMac.jp
どーも。Macユーザーのはしくれです。普段何気なく使ってると、便利なのに案外気づかない機能がたくさんあったりもします。Macユーザーの知り合いなんかと話してて喜ばれたこと、また自分が知らなかったことなど、シェアしていきたいと思います。ヘヴィユーザーには当たり前のこともたくさんあるかも知れませんが、何かの参考になれば幸いです。 ちなみに、今回登場する画像の中で、愛らしいお菓子の画像は、フェイクスイーツと言って、粘土で作られたスイーツたちです。 全て、（Macユーザー仲間でもある）blingbling pumpkinsさんの作品で、今回写真掲載を許可していただきました！ありがとうございます。 3/31、4/1に開催される、日本かわいい博in新潟にも作品を展示されるそうですので、ひとつよしなにどうぞ。 command + deleteで行のカーソルより左側の文字が全部消える 見出しそのままですが
HTML5花火大会から学ぶcanvasの表現力
HTML5花火大会が始まりました！ jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています！ 本当にどの花火もクオリティーが高くて、見るだけでも楽しめます。 HTML5花火大会 花火のコードから学ぶcanvasの表現力 花火のコードの大半はHTML5のcanvas要素を使って描画されています。 canvasってなんだっけ？ javascriptから自由にグラフィックを描画できる要素です。 以下のエントリーにわかりやすくまとまっています。 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 今更聞けないcanvasの基礎の基礎 canvasで花火を描くには？ 花火のお手本コードから見ていきま
<!--:ja-->iPhoneアプリのヒントになるか？BtoBtoCアプリビジネスの夜明け。グローバルマーケティング編に参加<!--:--><!--:en-->iPhone app develop hint? Participate in the global marketing Hen<!--:-->
BtoBtoCアプリビジネスの夜明け。グローバルマーケティング編。 のイベントセミナーに参加しました。 apple storeに入るのは初めてでしたのでどんなフロアで行うのかとおもいきや、 専用のシアタールームが用意されているのですね。立派な施設でした。 立ち見で見ている人もちらほらいるなかがっつり話を聞いて来ました。 そのまとめ。 Eagle Inc 代表の挨拶 ちゃぶ台返し とHungry Catsで８８万DL。 ちゃぶ台返し Hungry Cats App Store - Hungry Cats Eagle Incではコミュニケーションのきっかけになるアプリを作成している カンフーランナー、ブロック工場といった人気アプリもリリース Eagle Incが主催する講座の受講生が作成したかるたのアプリ 百人一首暗唱 ３ヶ月でアプリ作成 正月に教育無料で７位 APPBANK紹介で１５００DL
斜めのラインを使うスタイルシートのチュートリアル | コリス
コンテンツ間の区切りやエレメントに斜めのラインを使ったスタイルを与えるスタイルシートのチュートリアルを紹介します。 Slopy Elements with CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ 斜めのラインはCSS3で実装されているので、Chrome, Safari, Firefox, IE9でご覧ください。 demo 1 実装のポイント コンテンツ自身は回転させず、コンテンツのラッパーを回転させます。 回転させたコンテンツは表示領域からはみ出す部分もあるので、余剰分の処理も忘れずに。 HTML 見出しとテキストを含む個々のコンテンツはarticle要素で実装し、そのラッパーとしてdiv要素を設置しclassに「se-slope」を与えます。 <section class="se-container"> <div class="se-slop
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
Mac OSをアップデートしたら必ずしたいアフターケア
今朝、Mac OS X 10.7 Lionの最初のアップデートとなる、10.7.1がリリースされた。 WindowsからMacに乗り換えたばかりという方も多いと思うので、OSをアップデートした後にやっておきたいケアについて簡単に説明しておこう。 Mac OSやSafari、iTunesなど、システムに深く関係しているアプリの更新を行った後には、「ディスクユーティリティ」アプリを起動し、「アクセス権の検証」と「アクセス権の修復」を実行しよう。 この「アクセス権の検証」と「アクセス権の修復」は、Macの調子が悪いな、と感じたら、まず実行すべき対処法。 Macでは、OSのアップデートやアプリのインストールを行う際に、システム内のアクセス権が勝手に書き変わってしまい、そのせいでMacの調子が悪くなることがあるのだ。 アプリをインストールした後や、変なタイミングでMacが落ちたり固まったりするように
「Photoshop」で人物を上手にマスクするテクニックとは | クリエイティブ | マイコミジャーナル
アドビ システムズは都内にてクリエイター向けのセミナー「デジタルフォト&デザインセミナー2011～トップクリエイターのテクニックとアイデア～」を開催した。セミナーでは、「HP WorkstationとAdobe CS5.5による写真と動画の最先端レタッチテクニック」が行われた。 セミナーでは、「Photoshop」のパペットワープを使ったレタッチテクニック、「Illustrator」の「エンベローブ」を活用した画像処理テクニックに続いて、「Photoshop」で人物をマスクするテクニックが、フォートンのプロデューサー 兼子研人氏とレタッチャー toppy氏によって紹介された。 Photoshopで人物をマスクするテクニック この画像の子供のマスクを作成する まず始めに、画像の子供の部分を範囲選択し、「選択範囲→境界線を調整」を選ぶ。次に「エッジの検出(スマート半径)」を使い子供の輪郭に沿っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Start Using CSS3 Today: Techniques and Tutorials — Smashing Magazine