[B! Css] dacksf25のブックマーク

マウスオーバーエフェクト　Creative Link Effects

If you enjoyed these effects you might also like: Creative Button Styles Simple Icon Hover Effects

dacksf25 2015/07/15

css

リンク

CSS3の「フレキシブルレイアウト」使い方まとめフラップイズム

どうも、くーへいです。今回は﹁レスポンシブデザイン﹂での使用が想定される、﹁フレキシブルボックス﹂についてまとめてみたいと思います。なお、本記事は﹁CSS Flexible Box Layout Module Level 1﹂の2014年5月22日付けの編集者草案︵Editor’s Draft︶を基に作成しています。また、﹁CSS Flexible Box Layout Module Level 1﹂は未だに策定中であり、現在は2014 年3月25日付の最終草案︵Last Call Working Draft︶が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。最初にブラウザの対応状況について注意点﹁フレキシブルボックス﹂で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。﹁

dacksf25 2015/05/19

Css

リンク

Flexboxで決まり！ | Webクリエイターボックス

2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

dacksf25 2015/02/25

Css

リンク

CSSで要素を画面中央に配置する方法 | hT DESIGN blog

ある要素を画面の中央︵縦横ともに中央︶に配置したい。そんなとき使えるCSSテクニックについて書きます。※IE7以下のブラウザには対応していません。要素を画面中央に配置するサンプル水平方向︵横位置︶に対する中央揃えは、CSSで text-align: center; を使ったり、ブロック要素ならば margin: 0 auto; を使ったりして実現できます。しかしながら、垂直方向︵縦位置︶の中央揃えとなると、簡単に出来そうでなかなか上手くいかず、悩むところです。tableタグによって実現することもできますが、あまりスマートなやり方ではありませんので、ここではCSSを使って中央に配置する方法を説明します。 <TABLE>タグをレイアウト目的で使用するケースがありますが、 <TABLE>タグは本来はテーブル︵表︶を作成するためのタグです。レイアウト目的には、できるだけスタイルシートを利用

dacksf25 2014/11/19

Css

リンク

動くCSSのためのメモ。

CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす﹁動く﹂といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ

dacksf25 2014/06/06

Css

リンク

ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ

ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！画面いっぱいに背景画像目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max

dacksf25 2014/01/13

Css

リンク

知っておくと速い！CSS3に関する「便利」なまとめ

作成‥2013/11/25 更新‥2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で﹁知っておくと効率的﹂なものをまとめました。エンジニア速報は Twitter の@commteで配信しています。もくじ知っておきたいプロパティ1．カウント数を出力2．要素の前後に文字や画像3．カーニング4．画像フィルタ5．均等幅にレイアウト6．アニメーション一覧スマホサイト対策7．viewport ８．改行削除9．Webクリップアイコン10．UIリセット／入力フィールド拡張11．横並び12．ボタンサンプル13．画像を使わない矢印14．自動改行15．はみ出しを隠す1

dacksf25 2013/11/26

Css

リンク

もうCSS設計で悩まない！「CSSコーディングガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -

構造やクラス名、プロパティの記述方法などをルール付ける﹁CSSコーディングガイドライン﹂策定のための参考記事を紹介します。チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックスコーディング規約を見直すうえで抑えておくべきポイントを紹介。チェックポイントコーディング規約に含むべき項目・ディレクトリやファイルの階層・名前・記述順やインデント、単位などのフォーマット・ID,classなどの命名規則・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"

dacksf25 2013/09/13

Css

リンク

はてなブックマーク

タグ

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

Cssに関するdacksf25のブックマーク (8)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

月間はてなブックマーク数ランキング（2024年5月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス