[B! CSS] mirie0908のブックマーク

mirie0908 id:mirie0908

CSSに関するmirie0908のブックマーク (9)

要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告︵と付録︶を元に書いています。基本的な内容であり、目新しいことは特になにもありません。スタックコンテキストとスタックレベル用語と概念から。ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。スタックコンテキスト︵スタッキング・コンテキスト︶簡単に言えばauto以外のz-indexと位置︵static以外のposition︶を指定した要素によって生成される階層構造を形成する固まりです
mirie0908 2015/12/31
CSS

HTML
リンク
第1回　HTML5による業務システム開発に踏み出そう
出典‥ITpro 2015年2月23日︵記事は執筆時の情報に基づいており、現在では異なる場合があります︶ ITpro読者のみなさん、はじめまして。新日鉄住金ソリューションズの横山です。本特集は、次世代Web標準である﹁HTML5﹂を使って業務システムを構築するために必要な情報や役立つ情報を解説します。HTML5を採用することで、業務システムがどのように見やすく、使いやすいものになるかを紹介すると共に、開発を効率的に進めるための道具や留意点などについてもみていきます。身のまわりで着実に普及が進むHTML5最近、ニュースや雑誌で見聞きする機会が増えてきた﹁HTML5﹂という言葉ですが、実際に身のまわりでどれくらい利用されているのかよく分からないという人は多いのではないでしょうか。わざわざ﹁これはHTML5で作ったコンテンツです﹂と明記しているケースは少ないからです。 HTML5が使われて
mirie0908 2015/04/23
CSS

CSS3

html5
リンク
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門！
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門！
mirie0908 2015/04/11
netbeans

Backbone.js

CSS

webアプリ
リンク
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
mirie0908 2015/04/07
JavaScript

CSS

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

Webデザイン
リンク
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る﹁CSS3﹂ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと﹁あれ、あのプロパティはどう使うんだっけ？﹂とか﹁この要素だけにスタイルを適応するCSS3は何だっけ…？﹂など忘れてしまうこともしばしば…。最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し﹁これCSS3だけで作れるの!?﹂というような驚きの作品の数々をまとめてみました！ CSS3とはそもそも﹁CSS3﹂とは何のことでしょうか。改めてその定義を確認してみましょう。﹁CSS﹂は、ウェブページの
mirie0908 2015/02/07
CSS

Webデザイン
リンク
Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
mirie0908 2014/12/01
CSS

レスポンシブ

webデザイン
リンク
擬似要素を利用したベースライン・グリッド
Fig 1: 擬似要素を利用してテキストをベースライン・グリッドに揃える CSS でテキストをベースライン・グリッドに揃えるとなると、ベースラインの高さに応じて上下のパディングやマージンを調整するアプローチがよく見受けられますが、あまり実用的なものとは言いがたかったと思います。 p { padding-top: 0.30116em; padding-bottom: 0.19884em; /* ... */ } しかし、::before と ::after 擬似要素を利用すると、かんたんにベースライン・グリッドに合わせることができます (Fig 1)。 /* Vertical rhythm unit: 0.5rem */ p { line-height: 1.5rem; margin: 0.5rem 0; } p::before, p::after { content: ""; displa
mirie0908 2014/11/09
CSS
リンク
Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも〜こんにちはぁ！ Web制作者として日々勉強中でありますライターの、のび太です。先日﹁Webが学べる海外サイト10選﹂をご紹介させていただきましたが、もちろん国内サイトでも、Webに関してガッツリ学べる有益なブログはたくさんあります。国内サイトでは、およそ80ぐらいのWeb系ブログをRSS購読させてもらっていますが、今回はその中でも厳選に厳選しまくった﹁これはWeb屋なら絶対必須でしょ！　もはやお金取られてもいいレベルや！﹂って感じた10個をみなさんにシェアしたいと思います。また、大変恐縮ながら、個人的にベスト3だと思った記事︵特に有益だと思った記事︶も一緒にご紹介させていただきます。︻こちらもおすすめ︼ ☞ Web制作者がマジで学べる国内ブログ厳選10個︻制作+SEO対策編︼ Webクリエイターボックス http://www.webcreatorbox.com/ あまりにも
mirie0908 2014/05/27
webデザイン

WordPress

CSS

html5
リンク
1