[B! css] sutanto1983のブックマーク

http://www.okuni.me/entry/hover-animation-button-matome

sutanto1983 2018/08/02

css　動き　参考　ホバー　ロールオーバー　まとめ

css

リンク

【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO

はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。問題となるのはパラレルロード︵複数のリソースを同時にロードする︶ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。比較する3つの読み込み方今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む対象ブラウザ今回の検証ブラウザはChromeとInternet Explorerです。どちらも備え付けの開発者ツールで検証します。今回計測したサンプルサンプルはこちらに公開しているので問題があ

sutanto1983 2016/11/07

@import　遅い原因　高速化

css

リンク

CSSが苦手なWebデザイナーが知っておきたい、デザインに関係するCSSのテクニックのまとめ

Webデザイナーはデザインの知識やテクニックだけでなく、どのような実装テクニックがあり、何が実現可能なのか知っておくことで、さらに素晴らしいデザインを作りだすのに役立たせることができます。 Webデザイナーにとって、CSSは難しく感じるかもしれません。しかし全部を覚える必要はありません。デザインに関わるいくつかの有用なCSSのテクニックを紹介します。 20 essential CSS tricks every designer should know イラスト: Girls Design Materials 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. 絶対位置への配置 2. 全称セレクタ︵*︶ 3. すべてのスタイルを上書き 4. 左右の中央に配置 5. 天地の中央に配置︵テキストのナビに︶ 6. ホバーエフェクト7

sutanto1983 2016/11/07

css　テクニック　色々

css
CSS3

リンク

Webpark　

今年になって仕事でPowePointを使う機会が増えまして、今までまったく使ったことがないので、どのようにすれば見栄えがよくなるのか色々と調べてみました。久々の投稿なのにブログの本筋から外れた内容になりますが、調べるなかで役に立ったものと、個人的な感じることを書いてみます。

sutanto1983 2016/10/18

web　情報　色々

リンク

CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ︵特にIE7・IE8など︶によっては動きや見栄えが説明と異なる場合があ

sutanto1983 2016/04/28

css　ボタン　アクション　まとめ

リンク

jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい

sutanto1983 2016/04/25

アニメーション　スクロール　css　jquery　可視範囲

jquery
css

リンク

メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS

メンテナンス性に優れ、拡張性を備えたCSSを書くための﹁MaintainableCSS﹂を紹介します。あるスタイルを修正する際に他に影響を与えてしまわないか、せっかく書いたコードが先祖帰りしないか、似たページをつくる時にコードを再利用するのに問題はないかなど、全部はもちろん個々でも非常に参考になると思います。MaintainableCSS 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。メンテナブルCSSにすることのメリット 1. はじめに 2. セマンティック 3. 再利用 4. ID 5. コンベンション 6. モジュール 7. ステイト 8. バージョニングメンテナブルCSSにすることのメリットモジュール化、カプセル化スタイルはあなたの許可なしで、他のスタイルの影響を受けません。どんなデザインの要件でもあなたの必要

sutanto1983 2016/04/25

css　メインテナンス

css

リンク

รูเล็ต ทดลองเล่นรูเล็ต เว็บพนันออนไลน์ อันดับ 1 เครดิตฟรีกดรับเอง

7 คาสิโนออนไลน์ ชั้นนำที่ดีเยี่ยมที่สุด Ichimaruni-design คาสิโนออนไลน์ ขอชี้แนะ 6 เว็บเดิมพันออนไลน์ชั้นหนึ่ง ที่มีครบทุกสิ่งที่มีความต้องการ ไม่ว่าจะเป็น คาสิโนออนไลน์ บาคาร่าออนไลน์ ไพ่โป๊กเกอร์ออนไลน์ พร้อมรับโปรโปรชันเครดิตฟรีที่แจกให้แบบจุใจ เว็บไซต์ตรงไม่ผ่าเอเย่นต์ เล่นง่าย ได้เครดิตฟรี ๆ ไปเลย UFABET เครดิตฟรี ไม่รับไม่ได้แล้ว กับโปรเด็ด โบนัสปัง UFABET เครดิตฟรี สิ่งดีๆที่พวกเรามีให้เฉพา

sutanto1983 2016/04/20

viewport　メディアクエリ　css　meta

css

リンク

CSSの content プロパティーを使いこなそう！

2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す

sutanto1983 2016/04/19

content　使い方　css

css

リンク

CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス

2021年12月6日 CSS フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ ↑私が10年以上利用している会計ソフト！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサイトではJavaScriptにより色の移り変わりを実装しているようですが、CSS3のキーフレームアニメーションだけでも表現できます！ CSS3 キーフレームアニメーションの基本まずは要素を徐々に変化させるアニメーションについて覚えていきましょう！CSS3の animation プロパティでは、キーフレームを設定して細かい動き

sutanto1983 2016/04/18

グラデーション　背景　css

リンク

CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. | Stronghold Archive

CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. どうもこんにちは。Toshikuraです。今回のTipsは︻CSS 画像やテキスト要素を縦横中央配置する6つの方法︼です。CSSの基礎的な記事ですが縦横中央配置には色々な方法がありますのでメモしておきます。うまく使い分けると便利な場面もあったりしますので備忘としてお役に立つかもしれません。 1. display:tableでの実装 CSSのdisplayプロパティによって要素をテーブル化し、vertical-alignで縦方向へ中央配置する方法でレスポンシブ化も容易です。もっとも安定した方法だと思いますがIE7では動作しません。 HTML <div class="table"> <p>p tag p tag p tag p ta

sutanto1983 2016/04/18

中央配置　テキスト　css

css

リンク

[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要

レスポンシブ用のMedia Queriesを使う時に﹁@media (min-width: 400px) {}﹂のように﹁px﹂を単位に使用している人も多いと思います。しかし、px指定には注意が必要です。 Webページでよく使用される条件で検証を行い、Media Queriesでなぜpxを使ってはいけないのか、そして何が適しているのかが分かる検証記事を紹介します。 PX, EMor REM Media Queries? 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。はじめにpxとemとremの検証方法検証1. html要素でfont-sizeを指定検証2. ブラウザでズームが可能検証3. ブラウザでフォント設定が変更可能検証の結果はじめにあなたはMedia Queriesで使う単位にpx, em, remのどれが一番

sutanto1983 2016/03/29

フォントサイズ　pc en rem　確認

リンク

[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック

テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p

sutanto1983 2012/04/23

画像置換の-9999pxを使わない方法

CSS

リンク

jQueryでスクロールすると表示する系いろいろ

Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。ちょっとスクロールするとフェードして﹁トップへ戻るボタン﹂を表示を表示します。ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-

sutanto1983 2012/03/11

スクロールトップ　jquery　動き色々

リンク

[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ

Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ実装デモデモはbox-shadowに対応した下記のブラウザでご覧ください。対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装基本となるHTML8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height

sutanto1983 2012/02/28

ドロップシャドウ効果　色々　css3

リンク

deCSS3 - a bookmarklet for graceful degradation.

Drag this to Bookmarks Bar → deCSS3 Use this bookmarklet to get a whiff of what your site will look like on older browsers that don't support CSS3. It doesn't do everything right now, but if you’d like to help please fork it on Github, we're looking for collaborators with regex-fu. Currently supports: Chrome, Safari

sutanto1983 2012/02/02

ブックマーク　チェック　確認　クロスブラウザ　CSS

リンク

[CSS]フォントのサイズ指定はpx？ em？既存の再検討とこれからのテクニック

フォントのサイズの単位に何を使ってますか？px？ em？それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。はじめにpxを使ったサイズ指定 emを使ったサイズ指定remを使ったサイズ指定はじめにフォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。それらの中で短所が少なく、よく利用されるテクニックは2つあります。pxを使ったサイズ指定 emを使ったサイズ指定これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。pxを使ったサイズ指定ウェブの初期に、私たちはテキストのサイズを定めるために﹁px﹂を使用していました。これは一貫しており

sutanto1983 2011/11/15

フォントサイズ　pxとemの違い

css

リンク

レスポンシブwebデザインで制作する時のポイント

先日、CSSNite in Ginza, Vol.59﹁DreamweaverによるレスポンシブWebデザインの実装﹂に出席してきました。とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。︵一部の図はセミナーの資料を元に作成してます。︶始めに‥スマートフォンサイト制作の選択肢スマートフォンサイトを制作するには幾つかの方法があります。アプリ独自系スクラッチ︵0からスマートフォンサイト用に構築︶ jQuely mobileを使用流用系現在のデザインをほぼ流用、調整のみレスポンシブ・デザインどの方法にもメリットデメリットはあり、どれが最適かはサイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。今回のエントリーではレスポンシブ・デザインのみにふれます。レスポンシブwebデザ

sutanto1983 2011/10/23

CSS3 レスポンシブデザイン　考え方　作り方

リンク

https://frecklesandhandsome.com/

sutanto1983 2011/09/11

positon: fixed　ナビ固定　緑　飲食　テクスチャ　ダイナミック

リンク

Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice

レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。レスポンシブwebデザインエラスティックレイアウトリキッドレイアウトフレキシブルレイアウト固定幅レイアウトグリッドレイアウト可変グリッドレイアウトレスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。メリット一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。また今後デバイスの種類が増えてもそれに対応できます。それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。デメリッ

sutanto1983 2011/09/04

webサイトを作る時のレイアウト方法　色々

リンク

はてなブックマーク

タグ

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

cssに関するsutanto1983のブックマーク (37)

お知らせ

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

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス