ログイン読み込んでいます…

はじめに こんにちは、ABEMA で Web フロントエンドエンジニアをしています、20新卒の坂上です。 ABEMA には、各日付ごと、各チャンネルごとにどの時間帯にどの番組が放送されているかを確認できる 番組表 機能が存在します。 この番組表は開局当初から存在するものの、現在までそれほど変わりはない機能です。 そのため、実装にも手が加えられておらず、数年前の React のコードがそのまま残っている箇所も存在していました。 それゆえ、コードリーディングがしづらく、実装の詳細や仕様に関して詳しく知っている人がいないという状態から、番組表のパフォーマンスが芳しくないことは課題として上がっていましたが手をつけられていない状態でした。 その番組表に対して、再レンダリングの抑制と新しく提案された CSS プロパティである content-visibility を導入しました。 結果としては、Tim

本格Webサービス開発ならCAMP

カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カルーセルをCSSのみで実装するテクニックのまとめ カルーセルやスライドを実装する時、HTMLとCSSだけでどれだけのものが実装できるか知るとあなたは驚くかもしれません。以前に紹介したHTMLとCSSで実装するスライダーを見てましょう。 実装のポイントは、下記の通りです。 スライダーの各パネルは、Flexboxで横一列に設定します。 パネルを1つだけ表示するにはオーバーフローを使用し、-

はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん！』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ（S○f○ri、E○ge）でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。（最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。） その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な

WordPressのテーマによっては最初から蛍光ペン風のマーカーが付いていることがあります。 その場合は設定する必要はありません。 この記事は設定されていない方向けに書いています。 蛍光ペンマーカーを設定（CSS） まずはCSSの設定からスタート。 蛍光ペンマーカーのCSSは「linear-gradient()属性」を使います。 linear-gradient(transparent 線の太さ, 線の色 0%) このlinear-gradient属性、グラデーションを使って設定します。 （）内の線の太さと線の色を好みの色と太さに変更するだけでOK。 線の太さと線の色の意味は下の通りになります。 線の太さ 黄色の蛍光ペン(太) .marker_yellow_futo { background: linear-gradient(transparent 0%, #ffff66 0%); } 黄色

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

「第19回ゼロから始めるセキュリティ入門 勉強会」での, CSS Injection の脅威と対策に関する short talk 用に作成した資料です :-) 勉強会ページ: https://weeyble-security.connpass.com/event/98127/ I explai…

コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V

CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-items: center; } デモを別ウインドウで再生する ソースコードを確認する Flexboxだと3行 対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。すべてのモダンブラウザでベンダープレフィックスなしで動作します。 ▼ CSS .container { display: flex; justify-content: center; align-items: center; } ▼ 画像をウインドウの上下中央に配置

2017年も、CSSの進化がすごかったですね。 CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 イラスト: Girls Design Materials 2017年によく目にしたもの一つが、グラデーションです。一昔前は同一色相のグラデーションが多かったですが、最近では複数の色相をし、グラデーション自体も大胆に使用するのが増えています。

これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2

BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。

こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で

スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ

CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…

なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま