タグ

関連タグで絞り込む (80)

タグの絞り込みを解除

*CSS3に関するyamadarのブックマーク (364)

  • [CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック

    天地左右の中央に配置したい要素のサイズが幅も高さもピクセルで指定されていれば、marginやpaddingで簡単に配置できますが、サイズ指定にパーセントを使用した要素だと表示サイズに依存されてサイズが分かりません。 そんなパーセントで指定されたピクセルでの正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニックを紹介します。 デモページ：幅780pxで表示 HTML HTMLはシンプルで、中央に配置するdiv要素だけです。 <body> <div>Percentage sized and still centered.</div> </body> CSS ぱっと思いつく方法としてはパーセントをネガティブマージンで使えばいいのでは、となるところですが、ネガティブマージンを使用すると左右の中央はできますが、天地の中央がうまくいきません。 ここではネガティブマージンではなく、

    yamadar
    yamadar 2013/07/09
    うおー、これは使える。transformの対応状況調べねば。
    リンク

  • How to Create an App from Scratch | AppMaster

    Turning an app idea into a working reality is a more complicated task than most people might believe. However, with the wealth of software resources available on the internet, creating an app out of your idea is manageable. You don't even need to necessarily know how to develop mobile apps to make your application work. You can hire third parties or freelancers as there many places where you can f

    yamadar
    yamadar 2013/07/08
    CSSセレクタの知識を試せる。ちょっと素敵なプロジェクト。
    リンク

  • 【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。


    対象になるグループの範囲は？ :(hoge)-child系、:(hoge)-type系のいずれもグループ内での順番を判定します。 その対象となるグループは、同じ階層に並んでいるひと続きの要素群となります。 図にするとこのような感じ。 直属の親要素が異なると、別グループになります。 また、グループ内の要素の種類は一種類に限りません。 ﹁:(hoge)-child﹂は並び順→要素、﹁:(hoge)-type﹂は要素→並び順 ポイントはここ。 :(hoge)-child系と:(hoge)-type系では、並び順と要素の判定順が逆になります。 :(hoge)-child系はまず並び順を見て、次にそれが要素と一致するかを見ます。 :(hoge)-type系は指定の要素だけにしぼって、その上で並び順を見ます。 最後のdt、1つ目のddにスタイルがあたらなくて困った場合、 dt:last-child {
    【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。

  • CSS3で実現するアローアイコン


    CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性﹁arrow﹂を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a
    CSS3で実現するアローアイコン
    yamadar
    yamadar 2013/06/27
    transformプロパティで回転させる。
    リンク

  • スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作


    display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
    スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

  • Untitled — width=device-width, initial-scale=1についてぐちゃぐちゃと


    追記‥﹁場合によって﹂とかが文章中に抜けてるくさい なんだか言いたいことをまとめられてないし、ちょっと書いてるうちに間違った書き方してるとこもありそうな感じでぐちゃぐちゃになっちゃったけど、なんとなく雰囲気はわかりそうなとこまではあるし、あとからもうちょっとずつまとめるってことで、これはこれで悩んだ形跡としてポストしちゃっとく。 Appleはそもそも、日本でのスマホ向けページみたいなやつは想定してないんだよ。多分。 PCのサイトふつーに表示できるのに、わざわざスマホ向けのページ別に作って管理やら運用やらをカオスにする必要ないじゃん。 っぽいもので、Appleが想定してるのは Web application page。 Webアプリならスマホ向けっての全然あり。  でもWebアプリでなくても、アプリって拡大なんてしないでしょ？ 拡大しないで幅変えるだけ 。 だから、日本でいうスマホ向けページ
    yamadar
    yamadar 2013/06/23
    スマホ用の幅設定についての考察。（iOS編）
    リンク

  • floatを解除する手法のclearfix と 次世代のレイアウトの話

    floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな

    floatを解除する手法のclearfix と 次世代のレイアウトの話
    yamadar
    yamadar 2013/06/20
    もっとCSS3の話になるかと思ったら歴史の話だった。でもそれぞれのプロパティについて理解を深める良い内容。小手先の技術でなく、基本をきちんと理解してるのは強いです。
    リンク

  • Creative Button Styles

    Note that on mobile devices the effects might not all work as intended. Button Button Button Button Button Button Button Button Button Button Button Button Button Button Yes No Add to cart Bookmark Favorite Settings Send data Continue Return Continue Return Add to cart Delete Settings Add to cart Delete Settings Button Button Button Button Button Button Button Button Button Button Button Button Cl

    yamadar
    yamadar 2013/06/15
    フラットデザインのCSS3エフェクト付きボタン集。こういうのサクサク書けるようにならなきゃなぁ・・・。
    リンク

  • zzapwebdesign.com

    This domain may be for sale!

    yamadar
    yamadar 2013/06/15
    IE対応してるCSSアイコンセット。
    リンク

  • Magic CSS3 animations by miniMAC - minimamente

    Come sapete, amo molto il linguaggio CSS ed in particolare mi piace sempre andare oltre, in questo caso ho voluto creare un pacchetto di animazioni in CSS3 che potrete usare liberamente per i vostri scopi e quindi nei vostri progetti web, si chiama Magic! Il progetto è hostato anche su GitHub, questo per avere i migliori pareri dai migliori sviluppatori e quindi migliorare il codice, renderlo il p

    Magic CSS3 animations by miniMAC - minimamente
    yamadar
    yamadar 2013/06/15
    CSS3アニメーションのサンプル。中々素敵。
    リンク

  • Browse Fonts - Google Fonts

    Making the web more beautiful, fast, and open through great typography

    Browse Fonts - Google Fonts
    yamadar
    yamadar 2013/06/11
    Googleのwebfontサービス
    リンク

  • レスポンシブデザインをコーディングする時の、自分なりのちょっとしたTips

    前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる事が自分は多いです。 そのデザインを見ながらHTMLを作っていきますが、この時スマートフォンのデザインを見ながらマークアップしたほうが良いと思いました。 文章の意味付け的にデザインで順序変えるのはどうなのよというのはありますが・・・。 positionを使って再現するデザインの場合はPCは簡単に位置を入れ替えることができますが、スマートフォンのデザインは320px～リキッドデザインにすることが多い

    レスポンシブデザインをコーディングする時の、自分なりのちょっとしたTips

  • Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita


    スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
    Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
    yamadar
    yamadar 2013/06/09
    こういう風に実際に実装してみるのは力が付くので見習いたい。
    リンク

  • CSSでグラデーションを使うときにhsl()が便利すぎる。（CSS おれおれ Advent Calendar 2012 – 19日目） | Ginpen.com


    CSS おれおれ Advent Calendar 2012 – 19日目 CSS3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、このhsl()を使うと綺麗に記述する事が出来ます。 実例 こんなグラデーションを実装します。 #rrggbbを使ったグラデーションの例 まずは#rrggbbで書いた例です。 background-image: linear-gradient( top, #ffffff 0%, #a3daf5 50%, #75c7f0 51%, #19a1e6 100% );
    CSSでグラデーションを使うときにhsl()が便利すぎる。（CSS おれおれ Advent Calendar 2012 – 19日目） | Ginpen.com
    yamadar
    yamadar 2013/06/04
    現行ブラウザの hsl() サポート状況は、IE8以前を除けばOKそうです。http://www.browsersupport.net/CSS/hsl()
    リンク

  • [CSS]正方形・ダイアモンド・台形・三角形・円・ハートなどを作り出すスタイルシートのまとめ

    HTML <div id="square"></div> CSS #square { width: 100px; height: 100px; background: blue; } Diamond: ダイアモンド HTML <div id="diamond"></div> CSS #diamond { width: 80px; height: 80px; background: blue; margin: 3px 0 0 30px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin:

    yamadar
    yamadar 2013/05/25
    CSS3の小ネタ
    リンク

  • 意外と多い!? Web フォントに対応していない環境 ～2012 年の Web フォント事情


    Web フォントは﹁Web サイトにフォントを埋め込む﹂ための技術です。 先日、Web フォントを使った 絶対にコピペできない文章を作ったったwwww を公開しました。多くの人に楽しんでもらえたのですが、その一方で、Web フォントが適用されなかった方から﹁コピペできるんだけどどういうこと？﹂﹁意味が分からない﹂というコメントがよせられました。 ほぼすべてのブラウザーが Web フォントに対応しているはずなのですが、一体、何が原因だったのでしょうか。 そこで、Web サーバーのアクセスログを解析して﹁Web フォントに対応していない環境﹂がどの程度あったのかを調べてみました。4種類のフォーマット 一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の4種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
    意外と多い!? Web フォントに対応していない環境 ～2012 年の Web フォント事情
    yamadar
    yamadar 2013/05/25
    webフォントを使わない設定にしている人は確実に数パーセント居る。
    リンク

  • MdN Design｜総合情報サイト


    01シンプルな3カラムを例に、CSS3でどのようなボックスレイアウトが可能になったのか見ていこう。 まず、floatなどのスタイルを何も適用していない状態が︻1-1︼になる。親ボックスに対し、子ボックスを3つ配置している︻1-2︼。 CSSでは親ボックスの幅を指定し、子ボックスに対し余白や色を設定した︻1-3︼。 ︻1-1︼当然だが、何もしないとボックスは縦に配置される ︻1-2︼今回はdivにしているが、もちろんulなど他のブロック要素でも問題無い ︻1-3︼box-sizingプロパティについては︻07︼で後述する02ブロック要素を横並びにする場合、これまではfloatを使用する手法が一般的だったが、CSS3では親ボックスに﹁display:box;﹂と記述するだけで、内包されるボックスを横並びにすることが可能になった︻2-1︼︻2-2︼。 また、floatでブロック要素を横並び
    MdN Design｜総合情報サイト
    yamadar
    yamadar 2013/05/24
    ボックスレイアウトはやく使いたいなー
    リンク

  • css-lecture.com

    yamadar
    yamadar 2013/05/24
    box を使うとレイアウトがすごい楽になるんだけどIE9が未対応かつCSS3PIEも対応してないっぽいので今は見送り。早く使えるようになってほしい。
    リンク

  • CSS3 PIE: CSS3 decorations for IE

    PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!

    yamadar
    yamadar 2013/05/23
    CSS3をおてがるIE対応
    リンク

  • CSS3アニメーションをらく～に実装！オンラインツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作


    こんにちは。デザイナーのハルエです。 最近の流行は﹁トシムリン﹂です。あぁ次こそ生で見たい・・・。 CSS3でアニメーションを作成するとコードが肥大化して複雑になるため、ライブラリやオンラインツールを使用して作成している方も多いと思います。 簡単なアニメーションで言えば、﹁transition﹂でボタンのマウスオーバーに背景色をアニメーションさせたり、画像をフェードさせたり拡大・縮小させたり・・・などなど。 ﹁animation﹂を使えばさらにできることが広がるのですが、まだまだwebkitブラウザ以外では正常に動作しないのが難点です。 今回は、CSS3アニメーションを一瞬で設定できちゃうオンラインツールをまとめて紹介します。もう知っている人もたくさんいるとは思いますが、まだ使ったことのない方はぜひ一度試してみてください。 CSS3アニメーションを実装！オンラインツール7選Animate
    CSS3アニメーションをらく～に実装！オンラインツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
    yamadar
    yamadar 2013/05/23
    CSSアニメーションの動き付きのチートシートは便利！
    リンク
  • 前のページ 4 5 6 7 8 9 10 11 12 13 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.