display:none と visibility:hidden の違い - Qiita
visibility:hiddenは名前の通り、要素はあるけど見えない状態。 display:noneは、要素も取得されず、完全にその場にない扱い。 検証準備 html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>difference between visibility hidden and display none</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="one" class="box"></div> <div id="two" class="box"> <h3>Visibility:hidden</h3> エレメント描画されず。けど、表示エリアは「残る」。背景色で塗りつぶした感
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
VS Code のワークスペースをちゃんと使いたい - Qiita
はじめに 皆さん、エディタちゃんと使えてますか？ エディタって特に効率的に使おうとしなくても全然開発できちゃうので、なんか非効率な気がしてもそのまま放置してるって人多いと思います。 ここでは、エディタのデファクトスタンダードとも言える VS Code のワークスペースについて公式ドキュメント準拠でまとめていきます。 ワークスペースって？ 公式ドキュメントによると「VS Code 上で開かれた 1 つ以上のフォルダのコレクション」と定義されています。 A Visual Studio Code "workspace" is the collection of one or more folders that are opened in a VS Code window (instance). In most cases, you will have a single folder opened
Dreamweaver→VisualStudioCode移行ガイド - Qiita
本記事は、Visual Studio Code Advent Calendar 2021 11日目の記事です。 Dreamweaver（以下、Dw） から VisualStudioCode（以下、VSCode） に乗り換えて、早2年以上。 乗り換え当初は分からないことだらけで苦労しましたが、今ではすっかり VSCode が手放せなくなりました。 Dwといえば、今年の春に「Dw が Creative Cloud のデスクトップアプリケーションに表示できない」という話題が上がったりしましたね（現在は表示されているみたいです）。10月には他のAdobe系アプリと同時に更新は来ましたが、特に新しい機能が追加されているわけでもなく、積極的に開発されているとはいえない状況にあります。 こういった背景もあり、「まだ Dw を使い続けていてもいいのかな？」「VSCode へ移行したいけど踏ん切りがつかない
<figure> について（やや堅苦しく）考える - Qiita
[UPDATE: 20161027] 誤訳の修正と、コメントを受けて定義変更可能性を追記。訂正箇所は打ち消し線で記述 TL;DR <figure> ってなんだ 世の中の人はどう使っているのか調べてみた <figure> 要素は注釈である 実例 おわりに <figure> ってなんだ HTML5から追加された <figure> 要素で、写真や絵や図を用いる際によりセマンティックな（文章構造を正確に伝えられる）マークアップができるようになった、と言われている。以下がスタンダードな使い方だ。 <figure> <img src="hoge.jpg" alt="hoge"> <figcaption>hoge</figcaption> </figure> ところが、どうも明確な信念を持ってこの <figure> タグを運用しているHTMLマークアップエンジニアみたいな人にはなかなか出会うことがない。
スライダープラグイン「Slick」便利なオプション&動きサンプル集 - Qiita
Slickの便利なオプションと動きサンプルを分かりやすくまとめています。 オプションやサンプルは今後もどんどん追加していきます。 1. よく使うオプション 数多く用意されているSlickのオプションの中でも、知っておくと便利な定番オプション。 1-1. 表示に関するオプション 項目 デフォルト 仕様
何番目系の便利なCSSまとめ - Qiita
最初 :first-child 最初の要素（親要素から見て、子要素すべての最初） デモ :first-of-type ある要素の最初（親要素から見て、ある子要素の最初） デモ 最後 :last-child 最後の要素（親要素から見て、子要素すべての最後） デモ :last-of-type ある要素の最後（親要素から見て、ある子要素の最後） デモ 1個だけ :only-child 1個だけ子要素がある（親要素から見て、子要素が1個だけある） デモ :only-of-type 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） デモ X番目 :nth-child(X) X番目 デモ：５番目 :nth-of-type(X) ある要素のX番目 デモ：５番目 :nth-child(Xn) Xの倍数 デモ：2の倍数 :nth-of-type(Xn) ある要素のXの倍数 デモ：2の倍数
[簡単]コピペするだけ！ナビゲーションホバーエフェクト - Qiita
自分のメモも含めて、最近よく見かけるナビゲーションのホバーエフェクトをまとめてみました。 css：DEMO scss：DEMO cssのみで記述されたシンプルなものになります。 scssでも実装してみましたが、今回は初心者の方向けにCSSで記述したもので解説していきます！ 共通HTML・CSS HTML <nav class="type1"> <ul class="type1-menu"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> 通常のナビゲーションをマークアップします。 CSSをいじる前に… リセットCSSを設置！ Chrome・IEなどのブラウザによって
![[簡単]コピペするだけ！ナビゲーションホバーエフェクト - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5c6bcd55d8721c99f03827b559afa985c1d119/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUIwJUExJUU1JThEJTk4JTVEJUUzJTgyJUIzJUUzJTgzJTk0JUUzJTgzJTlBJUUzJTgxJTk5JUUzJTgyJThCJUUzJTgxJUEwJUUzJTgxJTkxJUVGJUJDJTgxJUUzJTgzJThBJUUzJTgzJTkzJUUzJTgyJUIyJUUzJTgzJUJDJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgzJTlCJUUzJTgzJTkwJUUzJTgzJUJDJUUzJTgyJUE4JUUzJTgzJTk1JUUzJTgyJUE3JUUzJTgyJUFGJUUzJTgzJTg4JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz02ZWZkYzRkYTdmY2VlMzYxZTkzOTlmODc4NGUwNmM5Yw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzX25pdHRhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zZjliNjliNDhlM2NkYWJmMDU3NTA0ZWQ5NzlmMjE5OQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dddb3047c63bf9569df16b5f022640e9b)
たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita
HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？ フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。 しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。 今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。 サンプルを使ってFPSを実際に測定してみる 今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const
iPhone画面サイズ早見表（図付き） - Qiita
インチ：サイズ表記のこと 端末：対応する端末 xcodeの表示：xcodeのアセットカタログの表記名 ポイント：描画座標のこと。論理上の画面サイズ 倍率：ポイントを何倍してピクセル表示するか。 ピクセル：実際に画面に描画されるサイズ 参考資料 xcodeのキャプチャ アップルストアの資料 概念図 参考： https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions sketch資料 グーグルドライブからダウンロードできます。 https://drive.google.com/file/d/1WakoxNaWwGOavcFyf6bmufyKOCH-Sf4u/view?usp=sharing おまけ 役にたったらいいねお願いします😄✨
googleスプレッドシートのフィルタ機能で自分だけの絞り込みを行う方法 - Qiita
googleスプレッドシートの複数人でファイルを同時に編集する機能、とても便利ですよね。 ただ、フィルターをかけようとしたら他の人の表示もフィルターされてしまい、困ったことはありませんか？ 「フィルター禁止！」なんて運用ルールになり、非常に不便な思いをしているケースを見たことがあります。 実は、わかりづらいですが解決策があるので、それをご紹介します。 「フィルタ表示」機能を使う 絞り込み対象の 「データ > フィルタ表示 > 新しいフィルタ表示を作成」 とクリックしていきましょう。 画面の表示が変わり、データの周りの領域がグレーの表示になりました。 これが「フィルタ表示」機能が有効になっている状態です。 このフィルタ表示状態にしてから絞り込みを行うと、他の人には影響を与えずに、自分だけ絞り込み表示をすることができます。 ↑他の人から見ると絞り込なれていない状態で表示されている 仕組み 実は
サイズがバラバラな画像をレスポンシブで縦横比を揃えて表示させる - Qiita
追記（2021/10/14） この記事のやり方は古いやり方です。 IE や過去バージョンのブラウザに対応したい場合に参考にしてください。 今は aspect-ratio プロパティを使ってくださいね。 参考：CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法 | コリス やりたいこと サイズがバラバラな複数枚の画像を表示サイズを合わせて表示したい。 レスポンシブで縦と横の比率も揃えたい。 画像のトリミングは縦方向も横方向も中央部分が表示できれば良い。 CSS で画像をトリミングする方法 CSS で画像をトリミングするには…で思いつくのは2パターン。 ただしどちらも今回のやりたいことが達成できない object-fit を使う方法 object-fit - CSS: カスケーディングスタイルシート | MD
【CSS】複数行でも3点リーダーをきかせる - Qiita
p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } まぁ普通に3点リーダーになりますよね。 複数行で3点リーダー Chrome・Safari でしか実装できませんが（今後はIEとかでも使えるようになる事を期待）下記のように書きます。 複数行での3点リーダー実装するために、 ”display: -webkit-box;” ”-webkit-box-orient: vertical;” 指定をします。 display属性を”box”とすることでフレキシブルボックス状態になり、 ”-webkit-line-clamp”で指定した行までを表示するようになります。 box-orientはそのフレキシブルボックスの並び方向を指定しverticalと指定する。 overflow: hidden;をスクロールバー対策と
IE11のバグまとめ - Qiita
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
スマホサイトのランドスケープ対応(画面横向き対応)をする時間がなくてアイデアで乗り切った話 - Qiita
この記事は、株式会社Y's アドベントカレンダー7日目の記事になります。 ディレクター出身の初心者エンジニアの私が自社コーポレートサイトを実装したときの経験談。 ディレクター時代に培った提案力が功を奏し、アイデアがたまたま採用されて乗り切れただけなので参考になるかはわかりませんが、あまり書かれていなさそうな方法だったのと、そこにたどり着いた経緯を忘れたくないので、備忘録的に残しておきます。 ※方法のみを知りたいという方は、『実際に使った手法②』から読むことをおすすめします。 普通のランドスケープ対応がしたかった 普段スマホでwebサイトを訪れた際に、端末を横向きにして見るケースは個人的にほとんどないし、自分の周りでもそうしている人はあまり見たことがありません。 それでも世の中に一定少数は居るらしく、その人達のために対応をしてあげる必要があります。 デザインにもよりますが、よくある対応方法と
Sassで@mixinを作る時に知っておきたい基礎知識 - Qiita
はじめに Sassの@mixinはメンテナブルなCSS設計にも役立つ強力な機能です。 一方でゆるくも書けてしまうため、気をつけないと不格好なCSSが簡単に出力されてしまいます。 そこで@mixinを自作するにあたって、知っておきたい（おきたかった）基本知識をまとめました。何かの参考にでもなれば幸いです。 前提条件 ソースコードは.scss形式で記述しています Sass 3.4.4で動作を確認しています 使用しているModifierという単語は以下の通りです BEMと呼ばれる命名規則で使われる、基本的なスタイル（セレクタ・class）に追加する形で装飾を調整するclassのこと 目次 @mixinのおさらい 基本的な使い方 @contentの使い方 Modifierに無駄なスタイルを適用させたくない... @contentを使ってみる 制御用の引数を用意してみる 引数に配列（リスト）を使って
疑似要素を使ったhover表示のCSSを分解する - Qiita
See the Pen css sample item-list by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 以上のサンプルはhover時の表示に擬似要素（:after）を使っています。このCSSについて分解して紹介します。 コードのサンプルというよりCSS装飾の考え方の参考になれば。 概要 CSSでやることを言葉でざっと分解すると以下になります。 a:after を半透明フィルムのように a 全体を覆うようにする a:after に Fontawesome のアイコンを出す a:after は平時は透明にする （opacity:0） a:hover で a:after を表示させる （opacity:1） ※完成像が頭の中に（or絵として）あったうえで、こんな風にすれば出来るやろ！という手順をイメージします。
タグを連番で複製するにはEmmetが便利 - Qiita
<li data-id="archive_001">/archive/movie/2014/mov_001.mp4</li> <li data-id="archive_002">/archive/movie/2014/mov_002.mp4</li> <li data-id="archive_003">/archive/movie/2014/mov_003.mp4</li> <li data-id="archive_004">/archive/movie/2014/mov_004.mp4</li> <li data-id="archive_005">/archive/movie/2014/mov_005.mp4</li> <li data-id="archive_006">/archive/movie/2014/mov_006.mp4</li> <li data-id="archive_0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでくの字や三角形を作る - Qiita
【HTML】YouTubeの動画を埋め込む方法 - Qiita
