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... 続きを読む

CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック | コリス

2018/08/23 68 users margin コリス ヘッダ 両端 ナビゲーション

CSS Flexboxも、margin: auto;も、よく使用していると思います。 しかしよく使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。 CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するかを紹介します。ヘッダやナビゲーションなど、微調整が必要なレイアウトに役立つ... 続きを読む

レシート買取アプリ「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 下記は各ポイントを意訳したものです。... 続きを読む

Android O Developer Previewが登場 | TechBooster

2017/03/21 60 users TechBooster Android 現地時刻 多く 機能

2017年3月21日（現地時刻）、GoogleはAndroid O Developer Previewを発表しました。 Android O Developer Previewは多くの機能が新規に追加・変更されています。主な機能をあげると バッテリ保護のための Background limits 通知情報をまとめる Notification channels パスワードの入力負荷を軽減する Auto... 続きを読む

【カメラ】まだAUTOモードで消耗してるの？〜AUTOを卒業するための保存版マニュアル〜 - 理系男子のぐうの音

2017/01/06 65 users ガジェット デジカメ おぉ 理系男子 ライフハック

2017 - 01 - 06 【カメラ】まだAUTOモードで消耗してるの？〜AUTOを卒業するための保存版マニュアル〜 ガジェット カメラ ライフハック シェアする Twitter Google+ Pocket 【スポンサーリンク】 こんにちは、るびこです。 デジカメを購入してはじめはAUTOモード使いますよね。 「おお！スマホよりきれい！」と驚く。 それでいいんですか？まだデジカメの実力の２割も... 続きを読む

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層のニューラルネットに通して、自分自身のデータと一致する出力がさ... 続きを読む

GoogleIO2014 - Google I/O 2014 Android関連 & Polymer関連セッションまとめ - Qiita

2014/07/05 75 users Qiita Cardboard 目玉 我慢 意見

今年のGoogle I/Oの目玉はなんといってもMaterial Designでしょう。 人によってはAndroidWearとかAutoとかTVとかCardboardとかまぁ色々意見が分かれると思います。一席打ちたいけどぐっと我慢。 去年、Google IO2013 Android関連セッションまとめという記事を書きました。 さて今年も行います僕が勤務するTOPGATE社によるGoogle IO報... 続きを読む

C++14でのreturnとreturn (…)の違い - Faith and Brave - C++で遊ぼう

2014/06/11 60 users return stat Faith and Brave 前者

2014-06-11 C++14でのreturnとreturn (…)の違い C++ C++14で導入されるdecltype(auto)を使うと、returnとreturn (…)で戻り値の型が変わる。前者は値、後者は参照となる。 decltype(auto) f() { static int value = 3; return value; } decltype(auto) g() { stat... 続きを読む

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を... 続きを読む

知らなかった！Appleの「ランダム再生」の仕組みはこうなっていた！ | gori.me

2012/07/28 59 users gori.me Apple iPhone Alt JPEG

<img src="http://gori.me/wp-content/uploads/2012/07/random.jpeg" alt="ランダム再生" title="random.jpeg" width="578″ height="auto" /> 【img via Cult Of Mac】 僕らが思っていた「ランダム再生」とAppleの「ランダム再生」は完全に食い違っていた！ iPhoneや... 続きを読む

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

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

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

WordPressプラグイン「YARPP」と「Auto Post Thumbnail」を使用して関連記事を表示するのにようやく成功した | OZPAの表4

2012/04/23 60 users OZPA LinkWithin YARPP 夜中 カスタマイズ

夜中にいじってます。WordPressを。 どうも、@OZPA です。 記事の終わりにサムネイル付きで関連記事を表示するブログパーツ「LinkWithin」を導入したのが今月頭。 別に取り立てて不満も無かったのですが、ごりゅご.comの2記事を見てムラムラと 「同じようなカスタマイズやってみたい」 との思いが燃え上がって参りまして、先日ようやっと関連記事の表示を実装いたしました。 先に「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... 続きを読む

tfoot は tbody の前に書いた方がいいよ | WWW WATCH

2007/03/18 70 users tbody overflow CSS スクロール HTML

404 Blog Not Found さんにて、「CSS - スクロール可能なテーブル w/o JavaScript」 というエントリーが上がっていて、これ見た時にその HTML ソースはないなぁ、、と思ったのと同時に、tbody に CSS を適用して overflow:auto とかすれば終わる話じゃないのとか思ってそれについてエントリーを書こうかなと思った瞬間、hxxk.jp さんにて 「C... 続きを読む

はてなブックマークで検索フォームを右上に持ってくる

2005/06/10 73 users はてなブックマーク 右上 検索フォーム relative

昨日よりはてなブックマークのデザインを変更できるようになりました。それで、b:id:finalvent を見ていて、おっと思ったので僕もフォームを右上に出るようにしてみました。(b:id:naoya)やり方は結構簡単です。 div.body { position: relative; width: auto; _width: 100%; top: 0; left: 0; } form.hatena... 続きを読む