JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita

2024/02/21 264 users Qiita script src function width

要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.... 続きを読む

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

2023/12/07 176 users トランジション auto displayプロパティ トリガー

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

marquee 入れ子 どうなる - hogashi.*

2023/07/11 44 users Marquee Direction hogashi div

<marquee scrollamount="1" direction="right"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> <marquee scrollamount="10" direction="right"> <marquee scrollamount="9"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> </marquee... 続きを読む

Forking Chrome to turn HTML into SVG - Fathy

2022/11/14 12 users Standards width modern web

Forking Chrome to turn HTML into SVG November 11th 2022 I've been working on a program called html2svg, it converts web pages to SVG. It's based on a fork of Chromium to support modern web standards. This post explains most patches. Take a picture SkiaBlinkPDF<div style="width: 50px; height: 50px... 続きを読む

imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法

2022/07/21 175 users アスペクト比 バック 手動 width スペース

レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登... 続きを読む

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

2022/06/07 387 users rem font-size width マージン ピクセル

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility ... 続きを読む

🎤 卒業生インタビュー kasumi さん、ima1zumi さんにインタビューをしました

2022/05/20 5 users kasumi agile.esm Rails Proxy

2021年12月2日(木)、[株式会社永和システムマネジメント](https://agile.esm.co.jp/)さんに就職したフィヨルドブートキャンプの卒業生、<img class="js-user-icon a-user-emoji" data-user="kasumi" width="40" height="40" src="https://bootcamp.fjord.jp/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsibWVzc2FnZ... 続きを読む

助けてくれ⋯百貨店は隠してんだ⋯休業すべきなんだ⋯⋯⋯

2021/08/21 251 users 百貨店 archive.today src width PNG

<a href="http://archive.today/wt6F9"> <img style="width:300px;height:200px;background-color:white" src="https://archive.md/wt6F9/1b63a9d01c304c57073b9869947760bd23de2622/scr.png"><br> 助けてくれ⋯百貨店は隠してんだ⋯休業すべきなんだ⋯⋯⋯<br> アーカイブされた 2021年8月21日 06:35:55 UTC </a> {{cite web... 続きを読む

これからはこの実装がオススメ！ブラウザの高さいっぱい、iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック | コリス

2021/08/19 403 users iOS コリス ビューポート min-height CSS

高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。Ja... 続きを読む

CSS Layout API で Masonry Layout | blog.jxck.io

2020/12/03 12 users API jxck.io CSS Layout layout

Intro Pinterest でおなじみの Masonry Layout を CSS の標準にする作業と実装が進んでいる。 Masonry Layout 以下のように画像を敷き詰めるタイルレイアウトのことを Masonry (石工やレンガ造りの意味らしい) Layout という。 上の例の場合は、 Height が不揃いの画像を並べる上で、左から敷き詰め、折り返したら既にあ... 続きを読む

【CSS】iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる方法 | Zenn

2020/10/03 255 users iOS Zenn メインビジュアル min-height 要素

メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表... 続きを読む

CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック | コリス

2020/09/11 341 users iOS コリス ビューポート min-height CSS

iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heigh... 続きを読む

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver

2020/07/02 650 users Rriver link jpg width img要素

そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般... 続きを読む

tiny-console.js · GitHub

2020/06/01 14 users GitHub SOLID position Left

tiny-console.js (function(c,b,cs,r,d){ b.frameBorder=0; b.style = 'position:fixed;bottom:0;left:0;width:100%;height:30vh;background:#fff;border-top:4px solid #bbb;box-shadow:0 0 2px #000;z-index:999;cursor:ns-resize;'; b.onpointerdown=function(e){b.setPointerCapture(e.pointerId);b.e=e;b.h=b.offse... 続きを読む

CSSのプロパティ値「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど | コリス

2020/04/14 22 users Flexbox コリス Grid auto width

CSSの「auto」は非常に便利な値で、マージンやサイズ（width, height）や配置などのプロパティに使用することができます。「auto」がどのように機能するのか、「auto」を活用したテクニックを紹介します。 自動マージン、autoを使った要素のサイズ指定、中央配置に使用するautoの仕組み、FlexboxやGridで知っておくと便... 続きを読む

「桜を見る会」安倍首相「すべての費用は参加者の自己負担」 | NHKニュース

2019/11/15 26 users 安倍首相 NHKニュース 費用 自己負担 すべて

<a href="http://archive.today/Cg1Cr"> <img style="width:300px;height:200px;background-color:white" src="https://archive.is/Cg1Cr/c978c8e40a4fc3fc7b90ec64f0c518f5c7a4cb1e/scr.png"><br> 「桜を見る会」安倍首相「すべての費用は参加者の自己負担」 | NHKニュース<br> アーカイブされた 2019年11月15日 11:22:... 続きを読む

hrの使いやすそうなスタイリングいろいろ | かちびと.net

2019/07/01 39 users ＨＲ relative margin result net

Result いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にした的な感じになっています css .hr_b {/*シャドウ付き*/ height: 8px; border: 0; box-shadow: 0 8px 8px -8px #666 inset; } .hr_c {/*フルワイド*/ position: relative; width: 100vw; margin: 10px 0 10px -50vw; left: 50%;... 続きを読む

立ち上げたTwitterアカウント(BuzzFeed Kawaii)が1年で30万フォロワー、ノープロモで超えたので分析面でやったことをまとめた。 - ひにログ

2019/05/10 138 users Twitterアカウント BuzzFeed Kawaii

<a href="http://archive.today/U9Um9"> <img style="width:300px;height:200px;background-color:white" src="https://archive.fo/U9Um9/69db81d8d41a053aa6e950073bde6f93471aed3a/scr.png"><br> 立ち上げたTwitterアカウント(BuzzFeed Kawaii)が1年で30万フォロワー、ノープロモで超えたので分析面でやったことをま…<... 続きを読む

セックスレス舐めてた。

2019/03/17 26 users セックスレス archive.today src width

<a href="http://archive.today/6xLzQ"> <img style="width:300px;height:200px;background-color:white" src="https://archive.fo/6xLzQ/bcd23257d4a48bd12bf8e910f4fa87e210860f33/scr.png"><br> セックスレス舐めてた。<br> アーカイブされた 2019年3月17日 05:21:34 UTC </a> {{cite web | title = セックスレス舐め... 続きを読む

文大統領の支持率が過去最悪へ。外交問題と経済政策が原因か。 – 東アジアの風見鶏

2019/03/15 18 users 風見鶏 politics TBS arti width

韓国の文大統領の支持率が過去最低を記録しました。 url=”http://japan.hani.co.kr/arti/politics/33025.html” width=”600″ height=”450″] リアルメーターがtbs（交通放送）の依頼で11～13日、全国の成人1510人を対象に調査(信頼水準95%に標本誤差±2.5%ポイント)し、14日発表した結果によると、文大統領の国政遂行に対す... 続きを読む

アウトプット大全の著者はイケハヤやはあちゅうの完全上位互換バージョンだという話

2019/03/04 8 users イケハヤ アウトプット大全 著者 archive.today

<a href="http://archive.today/RoqmW"> <img style="width:300px;height:200px;background-color:white" src="https://archive.fo/RoqmW/b26878f4ed9ded56b85aee623b612e99f38b29a4/scr.png"><br> アウトプット大全の著者はイケハヤやはあちゅうの完全上位互換バージョンだという話<br> アーカイブされた 2019年3月4日 ... 続きを読む

CSSスニペット：CSSで要素を斜めに2分割して境界線を透過 | かちびと.net

2018/12/21 14 users 透過 CSSスニペット net 境界線 要素

Result mask-imageとlinear-gradientを使います。 素材次第ではちょっとアーティスティックな合成写真っぽいのが作れそうですね css :root {/*境界線を斜めに*/ --direction: -45deg; } main {/*包括要素*/ position: relative; } div {/*各要素基礎設定*/ position: absolute; top: 0; left: 0; width: 100vw; height: ... 続きを読む

俺の必殺技 ボイスバージョン喜び度100%マシマシ - ねうしとらうたつみうまひつじさるとり押井守い - Radiotalk(ラジオトーク)

2018/11/06 68 users Radiotalk scrolling Embed 必殺技

俺の必殺技 ボイスバージョン喜び度100%マシマシ ねうしとらうたつみうまひつじさるとり押井守い <iframe width="460" height="185" src="https://radiotalk.jp/embed/82363" frameborder="0" scrolling="no" allowfullscreen style="max-width: 100%;"></iframe> 続きを読む

渋谷ハロウィンを5年見た感想

2018/11/01 300 users 渋谷ハロウィン 感想 archive.today src

<a href="http://archive.today/XXv0v"> <img style="width:300px;height:200px;background-color:white" src="https://archive.fo/XXv0v/a57038bd6da710cad765280a7b542c64ccf0bce6/scr.png"><br> 渋谷ハロウィンを5年見た感想<br> アーカイブされた 2018年11月1日 10:31:24 UTC </a> {{cite web | title = 渋谷ハロウ... 続きを読む

渋谷ハロウィンを5年見た感想

2018/11/01 582 users 渋谷ハロウィン 感想 archive.today src

<a href="http://archive.today/XXv0v"> <img style="width:300px;height:200px;background-color:white" src="https://archive.fo/XXv0v/a57038bd6da710cad765280a7b542c64ccf0bce6/scr.png"><br> 渋谷ハロウィンを5年見た感想<br> アーカイブされた 2018年11月1日 10:31:24 UTC </a> {{cite web | title = 渋谷ハロウ... 続きを読む