あと一歩のところでうまくいかないCSSグリッドシステム
しばらく前からわたしはCSSグリッドシステムに取り憑かれたようになっている。このせいで成仏できないので取り憑く側といったほうが正しいのかもしれないが。 わたしが夢想しているグリッドシステムは以下の要件のもの。 HTMLとCSSだけで動く。JavaScriptに依存しない リキッドレイアウトである 行ごとに要素で囲む必要がない グリッドの内容は、％指定でフレキシブルにすることもできるし、固定サイズにしておき領域幅をオーバーしたら改行するようにもできる 使用があやういハックは使いたくない IE8以上に対応する この要件を満たしているサンプルはこちら。ブラウザの画面幅を加減すると、リキッドレイアウトのほうは自動的に幅が伸縮するし、固定幅レイアウトのほうは適宜改行されるようになると思う。 上記サンプルの動作環境はIE8+。うまくいっていない「あと一歩」はどこなのかというと、グリッドの基底要素（サン
[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
![[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a7f8ebcbac962aaeb8aafa79af88e7fa1ccc7c0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082002.gif)
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
JavaScript OFF環境に優しく？jQueryでCSSを追加
JavaScriptやjQueryでCSSを操作することをよくするのですが、jQueryなどで実行しようと思うと、DOMの読み込みを待ってから適用させることがほとんどなので、場合によっては、display:none;にして見せたくないところもチラっと見えてしまうなんてことがあったりしませんか？ それが嫌な場合はあらかじめCSSでdisplay:none;をあらかじめ指定しておくなどの必要があるのですが、JavaScriptがオフの環境でもそれが適用されてしまうことになるので、見せるためのコードが使えないなんて状況になったり。 チラッとも見せたくないし、OFFの環境の人にも見せたい・・・そんな時のために、JavaScriptに影響を受ける箇所のCSSをJavaScriptで追加し、且つ、DOMの完了を待たずに実行するような仕組みにしてみたらどうかと考えたので、それを実現させるコードをjQue
CSSだけでJavaScriptのような動きを実装するサンプル30 – creamu
96332132, iStockphoto/ Thinkstock CSSでかっこいいUIを実装したい。 そんなときにおすすめなのが、『30 Pure CSS Alternatives to Javascript』。CSSだけでJavaScriptのような動きを実装するサンプル集です。 なかなかいい感じのものが揃っています。 Valid Non-Javascript Lightbox JavaScriptを使わずに、libhtbox系の動きを実装。反応が速くていい感じです Create a Content Slider Using Pure CSS さくさくと切り替わるコンテンツスライダー Pure CSS speech bubbles CSSで作る吹き出し型のデザイン Accordion Using Only CSS CSSを使ったアコーディングメニュー CSS-Only Tabbed
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
cssの情報・まとめ - かちびと.net
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツール オンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版 RoundedCornr / 角丸のHTML・CSSコードを生成してくれる CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認 CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できる CSS Builder / オンラインでスタイルを生成可能 Spiffy Box / cssによる角丸を簡単に生成 The
duree dpe
Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par
HTMLからCSSのベースを作ってくれるサービス – creamu
テーブルなどをHTMLで組んだ後に、CSSコーディングを簡略化したい。 そんなときにおすすめなのが、『Primer』。HTMLからCSSのベースを作ってくれるサービスです。 HTMLをペーストして、「PRIME IT」ボタンを押すと、idやclass名からCSSのベースを作ってくれます。 プログラマが作った素のHTMLにスタイルを当てていくときなどに使えるかもですね。 インターフェースがシンプルで、アイコンがかわいかったりするので一度見てみてください。 Primer あけましておめでとうございます。今年もよろしくお願いいたします。 今年は初の東京での年明け。浅草に初詣に行ったりおせちを食べたりで楽しい感じです。 勢いでwiiとニュー・スーパーマリオブラザーズを買いました。めちゃおもろいです。
Yahoo! UI Library: Fonts CSS
YUI Fonts CSS The foundational YUI Fonts CSS file offers cross-browser typographical normalization and control. Fonts CSS: Offers full A-grade browser support. Provides consistent font sizing and line-height. Provides appropriate cross-OS font-family degradation paths. Supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes. Works in both "Q
YUIのfonts.css
YUIのfonts.css ブラウザ間やOS間のフォントの差異を吸収してくれるCSSライブラリにYahoo! Developer Networkで公開されているYUI(Yahoo! UI Library)の「fonts.css」があります。 利用方法は非常に簡単でhead要素などでfonts.css を読み込むだけで利用できます。 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css"> Yahoo!のサーバー上のファイルを直接読み込んでも良いですし、ダウンロードしたファイルを読み込んでも大丈夫です。 fonts.css を読み込むとブラウザやOSは関係なく、font-familyは「Arial」、font-sizeは「13 px 」、lin
9 Most Common IE Bugs and How to Fix Them | Envato Tuts+
Internet Explorer - the bane of most web developers' existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn't really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them. 1. Centering a Layout Centering an element is probabl
ハイクオリティなフリーHTML&CSSテンプレート集「101 High Quality CSS And XHTML Free Templates」
TOP > WebDesign > ハイクオリティなフリーHTML&CSSテンプレート集「101 High Quality CSS And XHTML Free Templates」 今やWEB制作で標準ともいえるCSSとXHTMLによるレイアウト。今日紹介するのはそのCSSとXHTMLによって作られた無料のテンプレートを集めたエントリー「101 High Quality CSS And XHTML Free Templates」です。 Preview | Download 様々な種類、ジャンル、デザインテイストのテンプレートが集められています。今日はその中から気になったテンプレートをピックアップして紹介したいと思います。 詳しくは以下 ■Genious Web XHTML And CSS Template ワイドを大胆に使ったテンプレート。迫力があります。 Preview | D
ハイクオリティなフリーHTML&CSSテンプレート集part2「101 High Quality CSS And XHTML Free Templates:part2」
ハイクオリティなフリーHTML&CSSテンプレート集part2「101 High Quality CSS And XHTML Free Templates:part2」 先日「ハイクオリティなフリーHTML&CSSテンプレート集「101 High Quality CSS And XHTML Free Templates」」と言う記事で紹介した、CSSとXHTMLによって作られた無料のテンプレートを集めたエントリー。その第二弾が早速リリースされており、また第一弾とは違うクオリティーの高いHTML&CSSテンプレートが集められていました。 Preview | Download 今回も紹介されているテンプレートの中から気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Small Corporation XHTML And CSS Template シンプルでスタンダードなレ
CSSで実現する様々テクニック集「35+ very Useful And Powerful CSS techniques」
WEBをデザインしていく上で欠かせないCSS。厄介な部分もありますが、アイデアとテクニックしだいで様々な表現を可能にしてくれます。今日紹介するのはそんなCSSのテクニックをあつめた「35+ very Useful And Powerful CSS techniques」です。 10. CSS Curves 様々なTipsが公開されていますが、今日はその中からいくつか気になったテクニックをピックアップして紹介したいと思います。 詳しくは以下 ■6. Magazine StyleDROP CAPS テキストベースで雑誌のように頭文字だけ大きく表示するテクニック ■8. Link List Block Hover リンクを領域でHober指定するテクニック ■23 . CSS3 Multi-Column Module 2段組みを可能にしてくれるCSSモジュール 上記の他にも様々なCSSのテクニッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
CSS適用前のIEのスタイル情報をまとめた『IE CSS』 | 100SHIKI