Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

2023/12/07 176 users トランジション height displayプロパティ 念願

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto... 続きを読む

これは朗報！ レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります

2023/12/05 160 users srcset img sizes CSS 遅延

朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> こ... 続きを読む

CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 | コリス

2019/12/23 178 users margin Flexbox コリス プロパティ CSS

Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（ma... 続きを読む

レシート買取アプリ「ONE」がDMM AUTOと連携し再開、ガソリンスタンドのレシートを最大100円で買取へ | TechCrunch Japan

2018/06/18 224 users DMM AUTO レシート ＤＭＭ クルマ One

6月12日のサービスリリース直後から注目を集め、結果的には当日中にレシートの買取をストップすることになったレシート買取アプリ「ONE」。そのONEが少し形を変えてサービスを再開するようだ。 運営元のワンファイナンシャルは6月18日、クルマの即時買い取りサービス「DMM AUTO」と連携し、ガソリンスタンドのレシートの... 続きを読む

[CSS]要素を天地左右の中央に配置、最近主流になっている実装方法のまとめ | コリス

2018/03/02 301 users コリス margin CSS center 主流

子要素を親要素の左右中央に配置するのは、簡単です。 インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。 難しいのは上下、天地の中央です。 CSS Hackは使用せず、要素を天地左右の中央に配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。... 続きを読む

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld

2016/05/14 132 users NxWorld ウインドウサイズ 横幅 img height

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置して width:100%; と height:auto; を指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画... 続きを読む

Python - 【ディープラーニング】ChainerでAutoencoderを試して結果を可視化してみる。 - Qiita

2015/07/05 118 users Qiita Chainer Encode ニューラルネット

ChainerでAutoencoderを試してみる記事です。前回の記事、「【機械学習】ディープラーニング フレームワークChainerを試しながら解説してみる。」の続きとなります。ディープラーニングの事前学習にも使われる技術ですね。 1.最初に AutoencoderとはAuto(自己) encode(符号化)er(器)で、データを2層のニューラルネットに通して、自分自身のデータと一致する出力がさ... 続きを読む

CSSのAからZを学べる映像チュートリアル『A to Z CSS』 | 100SHIKI

2014/03/07 134 users CSS 100SHIKI アルファベット 進捗 http

まだリリース前だが期待できそうなのでご紹介。 A to Z CSSでは、CSSのいろいろが学べる動画を提供していくようだ。 動画の数は26、ちょうどアルファベットの数だ。 またAの動画は「auto」、Bの動画は「box-model」といった具合にもなっている。 AからZで学ぶことにより、直感的に進捗がわかるかもですな。リリースに期待したい。 A to Z CSS http://www.atozcs... 続きを読む

height:autoの特殊な仕様について | Webamb | ウェブアンブ

2013/07/05 591 users Webamb height padding ウェブアンブ 挙動

height:autoの特殊な仕様について 皆さんご存知のCSSプロパティ height は基本的にpaddingはmarginは含みません。 ただし、値がautoの時だけ挙動が違います。 今日はその辺りを書きたいと思います。 heightについて heightはコンテンツの高さを指定するプロパティです。 なのでpaddingなどを併記して指定する場合はpaddingの数値を引いて、heightを... 続きを読む

404 Blog Not Found:news - 「自動」車がまだならせめて「自停」車を

2012/04/30 114 users NEWS 自動 404 Blog Not Found 落ち度

ここ数日で立て続けに車の事故の報道が相次いだのだけど、この手のニュースで常々感じる違和感がある。 なぜこうも「人を憎んで技術憎まず」なのか、ということ。 無免許も居眠りも、それは確かに責められるに足りる落ち度であることは確かだ。しかし自動車がちっとも自動ではなく、automobileがちっともautoでないという看板の偽りに比べれば大したことではないと私はずっと思って来た。 本当の自動車は、すでに... 続きを読む

grepで指定オプションを自動付加してくれる環境変数 "GREP_OPTIONS" - RX-7乗りの適当な日々

2012/01/29 100 users grep egrep RX-7乗り 環境変数 自動

IT, Linux "GREP_OPTIONS"という環境変数に、常に付けておきたいオプションをあらかじめ指定しておくと、grepコマンドやxgrep(egrepとかfgrepとか...)を実行したときに、自動でオプションをつけて実行してくれます。 例えば、、、 $ export GREP_OPTIONS="--color=auto" とか。常に含めておくなら、あとは"-I"オプションとかですかね... 続きを読む

CSSをシンプルに書くことができるLESS使ってみた | webOpixel

2011/12/13 181 users less margin border webOpixel 階層

CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなくしやすくなるらいしいです。 ネスト（階層）化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px ... 続きを読む

CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ | コリス

2011/07/24 679 users コリス Tra クロスブラウザ対応 expression 方法

#content { width: expression(document.body.clientWidth 1242? "1240px" : "auto"); min-width: 760px; max-width: 1240px; } RGBa (IE included) 不透明度を使ったカラーをIEでも利用できるようにします。 .element { background-color: tra... 続きを読む

[CSS]たった二行で、さまざまなカラムを設定するグリッドのフレームワーク | コリス

2010/11/14 271 users コリス margin Row カラム フレームワーク

たった二行のシンプルなスタイルシートで、さまざまなサイズのカラムを設定するグリッドのフレームワークをを紹介します。 .row { display:table; width:960px; margin:0 auto } .cell { display:table-cell; vertical-align:top; padding-left:10px } HTMLもシンプルでdiv要素を使うだけです。... 続きを読む

IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌

2009/11/18 674 users phpspot開発日誌 Nettuts センタリング 方法

IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合... 続きを読む

FPN-コミュニケーションの法則　男性にはＳＯＳ・女性にはＡＵＴＯ

2007/05/08 196 users コワイ ＳＯＳ 法則 他人 コミュニケーション

■企業・マネジメント コミュニケーションの法則　男性にはＳＯＳ・女性にはＡＵＴＯ 2007-5-8 7:18:00 by qmoto 女性起業家の吉野真由美さんが「他人を動かすコツ〜AUTOとSOSの法則」というのを提唱していて、吉野真由美という人を私はあんまり知らないのですが、なるほどなあと思ったのでご紹介します。 （吉野さんのブログ、写真がちょっとコワイ） ■他人を動かすコツ〜AUTOとSOS... 続きを読む