モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
コンポーネントを小さく・きれいに設計しよう。Vue Composition APIを活用したコンポーネント分割術 - ICS MEDIA
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか？ なぜ、Vueのコンポーネントは肥大化するのか？ 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
知っておくと実装に役立つ！JavaScriptのテクニックのまとめ
デベロッパーのコミュニティには、実装に役立つテクニックやヒントが満載です。その中から特に有用なJavaScriptのテクニックとヒントを紹介します。 8 JavaScript Tips & Tricks That No One Teaches 🚀 by Garvit Motwani (@GarvitMotwani) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. JavaScriptにおける機能継承 2. .map()の置換 3. 数値から文字列に、文字列から数値に 4. lengthを使用して配列のサイズを変更したり、空にする 5. 配列の分割で値を入れ替える 6. 配列から重複を削除する 7. ループのコードを少なくする 8. パフォーマンス 終わりに はじめに JavaScriptは世界で最もクールな言語
ファイルを分割してアップロードする(Javascript, PHP) | バシャログ。
どうもfujiharaです。本日はファイルを分割してアップロードする方法をご紹介します 背景 ファイルをアップロードするシステムを作るときに容量の要望にアップロードサイズ、アップロード時間の変更で対応するには 大きすぎるサイズだったので分割してアップロードして、結合するという方法にしました。 ファイル構成 以下のようになります。uploadsはアップロード先になりますので作成しておいて下さい。 ├── js │ └── upload.js ├── index.html ├── upload.php └── uploads HTML まずは簡易HTMLです <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Upload</title> </head> <body> <p>input size <sp
CSSでアニメみたいに文字や画像を真っ二つ、斜めに斬るスタイルシートのテクニック
* { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background-color: hsl(0, 0%, 20%); } .wrap { position: relative; } .text { font-size: 20vw; line-height: .8; color: whitesmoke; text-transform: uppercase; font-weight: bold; /* background-color: pink; */ } .wrap .text:nth-child(2), .wrap .text:nth-child(3), .crack { positio
マウスホバーで画像にスプリットエフェクト
Result 昔Flash等で少し流行した、画像が分割されるアニメーションエフェクトです 今ではCSSだけで出来るようになりました css.card {/*親要素*/ border-radius: 16px; width: 360px; height: 360px; background: url(https://picsum.photos/400/300); position: relative; overflow: hidden; } .card:before {/*オーバーレイ*/ content: ""; position: absolute; width: 100%; height: 100%; top: 0; background-color: rgba(0, 0, 0, 0.92); } .card .img { position: absolute; top: 0; lef
CSSスニペット：CSSで要素を斜めに2分割して境界線を透過 | かちびと.net
Result mask-imageとlinear-gradientを使います。 素材次第ではちょっとアーティスティックな合成写真っぽいのが作れそうですね ※右下のRerunを押せば再読み込みして画像が変わります css:root {/*境界線を斜めに*/ --direction: -45deg; } main {/*包括要素*/ position: relative; } div {/*各要素基礎設定*/ position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-size: cover; background-repeat: none; } .background { background-image: url(https://source.unsplash.com/1600x900/?huma
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.from編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのザワです。肌寒くなってきたきましたが、いかがお過ごしでしょうか。 さて、普段からJavaScriptを触っていながら、配列についてはぜんぜん知らないなと思った今日この頃、あらためて配列を知っていこうと思い立ったわけです。JavaScriptの配列にまつわるメソッドはたくさんあるので、気が向いたときに少しずつシリーズにしてお送りしていく予定です。 ここでは、言語仕様に関する詳しい説明はしません。広く浅く、なにをするメソッドなのか、実際に使う場面になったときに思い出せる引き出しを増やす目的でやっていきます。 今回はArray.fromメソッドを見ていきます。では早速いってみましょう！ ※ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ！ Array.fromメソッドとは Array.fromメソッドとは、
画面を斜めに分割して2つの動画を表示する
Result 画面を斜めに分割して動画を2つ同時に再生するサンプルです cssbody { background-color: black; overflow:hidden; } .parent { position: relative; height: 100vh; width: 100vw; } .video { position: absolute; top: -8px; left: -8px; width: 100%; height: 100vh; background-position: center; background-size: cover; overflow: hidden; } .clip-video { clip-path: polygon(99.9% 0, 0 99.9%, 0 0); } .clip-video-reverse { clip-path: poly
リストを自動で3列に分ける
Result リストを自動で任意の列数に振り分ける、みたいなの。マルチカラムレイアウトを使います。 リスト分けたいだけならテキストコンテンツのようにbreak-insideやpage-break-insideを考えなくていいので楽ですね。 CSSではなくJavaScriptを使う方法は過去に書いてます。jQueryを使いますが・・ →リストを任意のカラム数に分ける css.columns {/*分けたいリストの親要素に指定する。column-countはカラム数*/ column-count: 3; column-gap: 26px; list-style: none; margin: 0; padding: 0; }html<ul class="columns"> <li> <label> <input type="checkbox" />1 lorem ipsum </label> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
