こんにちは。 最近、今更ながらPodcastって面白いなぁーとワクワクしてます。 どうも、しばひろです。 ということで、Shibajukuでもポッドキャストを始めてみました。 Shiabajukuのサロンメンバーたちの会話を盗み聞きしてもらうというポッドキャスト「シバジュク酒場」です。 さて、今日は、色んなWebサイトでよく見かけるカード型コンポーネントについて書いてみたいと思います。 というのも、よく見かけるコンポーネントだからこそ、色んなマークアップ方法があると思うのですが、僕なりのマークアップ方法が誰かの参考になるかもしれないし、色んなコンポーネントのマークアップを考えるきっかけになるかもしれないので書いてみようと思いました。 カード型コンポーネントって何？ まず、カード型コンポーネントがどんなコンポーネントかっていうと、まるでカードのような縦型になっていて、一般的には、最初に画像が
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
JSer.info #506 - Moment.jsのウェブサイトにProject Statusが追加されています。 Moment.js | Docs Moment.jsに新しい機能の追加などはしないメンテンスモードであることが書かれています。 互換性保ちつつ新しい機能や仕組みを入れるのは難しい状態であるため、別のライブラリの利用を推奨しています。 代替となるライブラリとしてLuxon、Day.js、js-joda、date-fnsについて紹介されています。 また、Intl APIや現在策定中のTemporalについても書かれています。 このプロジェクトステータスの明示の発端は、Chrome Dev ToolsのLighthouseにmoment.js利用の警告を表示したことに起因しています。 If JavaScript libraries are proving costly, repl
Building a Tabs component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build a tabs component similar to those found in iOS and Android apps. In this post I want to share thinking on building a Tabs component for the web that is responsive, supports multiple device inputs, and works across browsers. Try the demo. Demo If y
サイボウズに新卒入社してkintone開発チームに配属されてから1年経ったのでふりかえる - もやし丸の備忘録
こんにちは もやし丸 です。2019年にサイボウズに新卒入社して、kintone開発チームでWebエンジニアとして働いています。 kintone開発チームに配属されてから1年経過したのでふりかえりを書きました。 自分が配属される時期に中途入社された sakito さん、 Nokogiri さん、あおいさんが入社1年をふりかえるブログを書いてて、それを見て触発された感じです。 https://note.com/mki_skt/n/nd11c9fe2ec3fnote.com nkgr.hatenablog.com blux.hatenablog.com shisama_さんも1年ふりかえりブログを書いていたので追記しました： shisama.hatenablog.com 採用に関する仕事に携わったときに「入社した理由」「入社までにやっていたこと」「入社後どんな仕事をしているのか」をよく質問され
Rails: webpack(er)に乗り換える25の理由（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 25 reasons to switch to Webpack(er) - rossta.net 原文公開日: 2020/03/02 著者: I'm Ross Kaffenberger サイト: rossta.net webpack/Webpackerで使える有用なツールも本記事で多数紹介されています。 画像は元記事からの引用です。 最近こんなことをよく聞かれます。「webpackとかWebpackerで頑張る価値ってあるの？」 よい質問だと思います。そして私の短い回答は「イエス」です。 近年JavaScriptコミュニティにおける認知度が急上昇していることで、フロントエンド開発用のツール、開発エクスペリエンス、最適化に巨大なイノベーションが続いています。 Railsはかつて最前線に躍り出ていました。登場した当時のRailsアセッ
What's New In DevTools (Chrome 90) | Blog | Chrome for Developers
New CSS flexbox debugging tools DevTools now has dedicated CSS flexbox debugging tools! When an HTML element on your page has display: flex or display: inline-flex applied to it, you can see a flex badge next to it in the Elements panel. Click the badge to toggle the display of a flex overlay on the page. In the Styles pane, you can click on the new icon next to the display: flex or display: inlin
初心者からちゃんとしたプロになる HTML+CSS標準入門 「初心者からちゃんとしたプロになる HTML+CSS標準入門」がオススメの人 「初心者からちゃんとしたプロになる HTML+CSS標準入門」の特長 「初心者からちゃんとしたプロになる HTML+CSS標準入門」の内容 「初心者からちゃんとしたプロになる HTML+CSS標準入門」Amazonでの購入はこちら 「初心者からちゃんとしたプロになる HTML+CSS標準入門」楽天市場での購入はこちら 「できるポケット Web制作必携 HTML&CSS全事典 改訂版 HTML Living Standard & CSS3/4対応」紹介記事 「できるポケット Web制作必携 HTML&CSS全事典 改訂版 HTML Living Standard & CSS3/4対応」Amazonでの購入はこちら 「できるポケット Web制作必携 HTML
WebKit Features in Safari 17.4
ContentsArchitectural improvementsWeb AppsForm elementsCSSWeb APIJavaScriptMediaSVGWebGLWeb AssemblyWeb InspectorChanges to SafariSafari ExtensionsWeb AuthenticationBug Fixes and moreUpdating to Safari 17.4Feedback Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes. You ca
Safari 16で追加されたWebKit機能まとめ
Appleは2022年9月12日に、iOS 16・macOS Monterey・macOS Big Sur向けにSafari 16をリリースしました。このSafari 16のWebKit機能について、SafariとWebKitのWeb Developer ExperienceチームでAppleエヴァンジェリストを務めるジェン・シモンズ氏が解説しています。 WebKit Features in Safari 16.0 | WebKit https://webkit.org/blog/13152/webkit-features-in-safari-16-0/ シモンズ氏によると、今回リリースされたSafari 16には、ベータ版にはなかった多彩な機能が盛り込まれているとのこと。Safari 16 Betaの機能については、以下の記事を読むとよく分かります。 「Safari 16 Beta」のW
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs. We’ve all been there, at the end of completing CSS for a layout and — what’s that? Ah! An extra scrollbar! Or maybe an element is an unexpected color. An
CSS :has Parent Selector
Have you ever thought about a CSS selector where you check if a specific element exists within a parent? For example, if a card component has a thumbnail, we need to add display: flex to it. This hasn’t been possible in CSS but now we will have a new selector, the CSS :has which will help us to select the parent of a specific element and many other things. In this article, I will explain the probl
「Changelogを読んで自分のエンジニアキャリアを作る」というLTのこぼれ話 - BASEプロダクトチームブログ
はじめまして！フロントエンドエンジニアのがっちゃん（ @gatchan0807 ）です。 9月7日にBASE主催で「BASE Engineer 座談会 〜BASEの若手エンジニアがそれぞれの今と未来を語る！〜」というイベントを実施したのですが、その中のLTパートで発表した「Changelogを読んで自分のエンジニアキャリアを作る」でお話しきれなかった部分があったので、そこも含めてお話した内容を記事にまとめなおしました！ 当日ご参加いただいてLTを聞かれた方も、そうでない方も、ぜひご覧ください！ 「Changelog」と「エンジニアキャリア」がどう繋がるのか 早速この記事でお伝えしたいことから書いてしまうのですが、 Changelogは最新機能だけでなく、未来のビジョンも含めたプロダクトの情報の宝庫で、それらをうまく使えばエンジニアキャリアづくりに活かせる！ ということを記事を読んでいただい
This post describes the Ladybird browser, based on the LibWeb and LibJS engines from SerenityOS. Since starting the SerenityOS project in 2018, my goal has been “to build a complete desktop operating system to eventually use as my daily driver”. What started as a little therapy project for myself has blossomed into a huge OSS community with hundreds of people working on it all over the world. We’v
Safari 14.1 for macOS Big Sur, iPadOS 14.5, and iOS 14.5 brings new WebKit features, APIs, performance improvements, and improved compatibility for web developers. Take a look. Flexbox Gap Support Safari 14.1 now supports the gap property inside Flexbox containers, along with row-gap and column-gap. Gaps in Flexbox make it possible for web developers to create space between Flex items without reso
Next-generation web styling Stay organized with collections Save and categorize content based on your preferences. There are a ton of exciting things happening in CSS right now—and many of them are already supported in today's browsers! Our talk at CDS 2019, which you can watch below, covers several new and upcoming features we thought should get some attention. This post focuses on the features y
CSS界隈の注目記事をまとめてみた【2023年3月版】
この記事は、TechFeed Experts Night#14 〜 絶対役立つ！最先端のCSS総ざらいの開催に際し、TechFeedのデータを元に日本語記事ランキングを紹介していくものです。60日以内で、獲得スコアが高かった順にトップ10を紹介しています（1pt以下の記事はランキングに含めていません）。 いずれも（きっと）読み応えのある記事ばかり。もし見過ごしていた記事があったら、ぜひ読んでみてください。 本記事は、TechFeed Experts Night#14 〜 絶対役立つ！最先端のCSS総ざらいのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 こんにちは、TechFeed CEOの白石です。 この記事は、TechFeed Experts Night#
Full-Bleed Layout Using CSS GridAn elegant solution to a tricky modern layout Back in the day, there was a gold-standard website layout that everyone strived to create, but that was notoriously difficult to get right: the Holy Grail layout. �ӥ�UIt doesn't seem like it would be so tricky, right? But this was an era before flexbox existed; our tools for the job were tables and floats, and neither we
CSS SASS、SCSS、Stylusのいずれかを利用できる 変数を使用した効率化について理解がある、準じたコードを書ける CSS設計についてが何のためにあるか理解している 各設計のメリットについて説明できる 詳細度について理解している IDを含む場合の優先度順 !importantが付与される場合の優先度順 media queryの扱い方について理解している stylelintなどの静的解析ツールを使用できる Grid, Flexboxを使用したレイアウト調整ができる inline-blockやfloatを使用した横並び以外の手段が使える CSS変数について知っている CSSフレームワークについて紹介できる
講義を始める前に 質問があったらその場で聞いてください 他の受講者の理解にもつながります 声を出すのが難しければ、Slack でも OK スライドモードで画面に写しながら話しますが、手元で資料を開きつつ聞くと理解しやすいと思います リッチなウェブページを作ってみよう HTML 構造 CSS 見栄え JavaScript 動き Single-Page Application HTML, CSS, JavaScript を駆使したリッチなウェブページ 書いたことあるよ、という方 🙋♀️ HTML HTMLとは セマンティクス コンテンツカテゴリ HTML Webページを記述する言語 code:example.html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>HTML文書</title>
この記事では、Webデザイン制作で役立つ便利な最新オンラインツール41個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトに使える話題の新ツールを中心に揃えています。 カテゴリごとに整理しているので、目的にあったお気に入りツールを今後の作業に取り入れてみてはいかがでしょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Typedream シンプルなインターフェース画面を利用して美しいウェブサイトをノーコードで作成できる新ツール。 Editor X ドラッグ＆
Figmaはデザイナー向けのUIデザインツールのように思われがちですが、Figmaを使ったプレゼンテーションスライドの作成や、デジタルホワイトボードツールのFigJamを活用したアイデア出しやプランニングなど幅広い用途があります。そして2月1日から正式版となったDev Mode（開発モード）は、デザインデータやその仕様を元にプロダクトを構築するための機能が備わっています。 Dev Modeは主にはコードを書く開発者にとって便利な機能があります。コード生成や、デザインの差分比較、アノテーションによるデザイン仕様の把握、Dev Mode用のプラグインや、VS Code拡張機能などが主な機能です。あまりそれらを使いこなせている実感がある人はまだ多くないようですが、焦る必要はありません。使える機能から徐々に理解し、慣れていってもらえれば良いなと考えています。 一方で「そもそもFigmaに慣れていな
flexbox-cheat.site
This domain may be for sale!
What's New In DevTools (Chrome 100) | Blog | Chrome for Developers
Chrome 100 Here’s to the 100th Chrome version! Chrome DevTools will continue to provide reliable tools for developers to build on the web. Take a moment to click around in the What’s New tab to celebrate the milestones. As usual, you can watch the latest What’s New in DevTools video by clicking on the image. View and edit @supports at rules in the Styles pane You can now view and edit the CSS @sup
HTML & CSS code generators
CSS Generators›Text Formatting›Text ColorAlignmentDecorationText TransformSpacingShadowFontLayout›GridFlexboxBackground›Background ColorBackground GradientBackground ImageBorders›BorderBorder RadiusBorder ImageBox ShadowMore›TransformFilterHTML Generators›Form›ButtonCheckbox ButtonDatalistRadio ButtonSlider Range InputSearch InputSelect InputTelephone InputText InputTextareaURL inputEmail InputFil
Joy Shaheb Posted on Jan 10, 2021 • Updated on May 27, 2021 • Originally published at freecodecamp.org Let's refresh Our CSS Flexbox Memory. Here's a Tutorial & Cheat Sheet of everything you can do with CSS flexbox. Let's Go 🎖️ The original Article at FreeCodeCamp Table of Contents -- FlexBox Architecture flex-direction justify-content align-content align-items align-self flex - grow | shrink | w
GoogleのAI研究部門であるGoogle DeepMindで働くニコラス・カルリーニ氏が、「正しいAIの使い方」を解説しています。 How I Use "AI" https://nicholas.carlini.com/writing/2024/how-i-use-ai.html カルリーニ氏は大規模言語モデル(LLM)が世間から「過大評価されている」と感じているそうです。しかし、「過去1年間、毎週少なくとも数時間をLLMの利用に費やしてきた身として、私が与える困難なタスクをLLMが解決する能力には感銘を受けています」とも記しており、LLMヘビーユーザーの意見として、その能力に太鼓判を押しています。カルリーニ氏は「LLMのおかげで研究プロジェクトとサイドプロジェクトの両方でコードを書くのが少なくとも50％速くなりました」と記し、LLMがユーザーの作業効率を大きく高めることにつながると指
週刊Webテク通信 2020年7月第4週号1位は、JavaScriptを使ったハンバーガーメニューの代替3案、気になるネタは、G Suite向けGmailがChat、Meet、Roomを統合 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2020年7月13日～7月19日の間に見つけた記事のベスト5です。 1. Three CSS Alternatives to JavaScript Navigation | CSS-Trickshttps://css-tricks.com/three-css-alternatives-to-javascript-navigation/ JavaScriptを使ったハンバーガーメニューの代替となる3つの案を紹介しています。 メニューを別ページで用意する 水平
JSer.info #601 - Node.js 18.6.0がリリースされました。 Node v18.6.0 (Current) | Node.js Node.js 18.6.0ではexperimentalで実装されている--loaderの挙動の変更が含まれています。 複数の--loaderを指定した場合の順番を変更。またloaderの実装はshortCircuitを返すのが必須となっています。 そのため、すでに公開されているloaderが動かなくなっている場合があります。 詳しくは、次のIssueと記事で解説されています。 esm: add chaining to loaders by JakobJingleheimer · Pull Request #42623 · nodejs/node Custom ESM loaders: Who, what, when, where, why
17 ways to implement vertical alignment with CSS - LogRocket Blog
Editor’s note: This post was last updated by Emmanuel Odioko on 29 April 2024 to include methods such as using line-height and align-content for vertical alignment, and to address the accessibility implications of these techniques. Back in the good old days, the limits of CSS made even “simple” things like vertical centering a challenge, with some developers even relying on JavaScript solutions. I
Hey kids, you ready for me to tell you all about this newfangled thing called Bootstrap? Well get un-ready, ‘cause I’d never do that to you. It’s not that Bootstrap isn’t great, it’s just that if you work in web design, and you’ve been paying any attention at all, you already know about it. And if you don’t… well… welcome to the industry! We have some articles you may want to check out. For everyo
Before we dive in, let me provide some background. In 2013, a bunch of people signed the extensible web manifesto, in favor of an Extensible Web Platform. The goal is pretty obvious: elaborate new kind of standards, that provides authors freedom and flexibility to build their own features. The aim is to define low-level APIs, an access to the core of the browsers, and so, involve authors into the
IntroductionFlexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed. For example, check this out: This demo is heavily inspired by Adam Argyle’s incredible “4 layouts for the price of 1” codepen. It uses no media/container queries. Instead of setting arbitrary breakpoints, it uses
ContentsWhat is masonry layout?Inventing masonryFour demosCreating a classic masonry / waterfall layoutLeveraging Grid’s full power to define columnsLeveraging Grid’s ability to let content span columnsColumnar vs. Modular GridsUsing subgrid and explicit placementThe DebateWhat is a grid?We want to hear from youP.S. About the name… If you’ve been making websites for years, you know how frustrating
Ten modern layouts in one line of CSS Stay organized with collections Save and categorize content based on your preferences. This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts. Modern CSS layouts enable developers to write really meaningful and robust styling rules with just a few keystrokes. The talk above and this subseque
My brother is a fresh computer engineering graduate and he is currently finishing his internship in front-end development. He learned about both CSS grid and flexbox, but I noticed a pattern that I see a lot on the web. He can’t decide when to use grid or flexbox. For example, he used CSS grid to layout a website header and mentioned that the process wasn’t smooth as he played with grid-column and
Chrome 85 is starting to roll out to stable now. Here's what you need to know: You can improve rendering performance with content-visibility: auto. CSS properties can now be set… in CSS. You can now check if your Windows app or PWA is installed with getInstalledRelatedApps(). App icon shortcuts work on Windows too (for real this time). An origin trial for fetch upload streaming has started. And mo
There are a lot of tutorials and guides out there that teach CSS grid in general, and I wrote about it multiple times. However, I noticed that there is a misunderstanding of the minmax() function as most of the articles are generic or don’t provide enough explanation and real-world use-cases. The minmax() is very powerful and useful. For that specific reason, I thought that writing a complete guid
2020年版：CSS Grid Layoutの対応ブラウザやベンダープレフィックスについて解説！ | Web Design Trends
TOP > Web制作 > 2020年版：CSS Grid Layoutの対応ブラウザやベンダープレフィックスについて解説！ CSS Grid Layoutは、CSSで柔軟にレイアウトを作ることができる便利なレイアウト手法です。 しかし、Flexboxと比べてブラウザ対応が遅れているなど、推奨環境について気になる方も多いのではないでしょうか。 今回は、2020年最新のCSS Grid Layoutのブラウザ対応状況と、必要なベンダープレフィックスについてご紹介したいと思います。 一番分かりやすいCSS Grid Layoutの使い方ガイド CSS Grid Layoutは、CSSによるレイアウト手法の1つです。様々なレイアウトをこれ1つで実装することができます。 ただ、覚えなければならないことも多く、初心者の方にとっては少し難しく感じる... Web Design Trends
これからのWeb制作に間違いなく役立つ！ IEをサポート外にしたレスポンシブWebデザインで重要なCSS、実装方法を学べる解説書
HTML Live Standard対応、FlexboxやCSS GridやCSS関数などを活用して、レスポンシブWebデザインを実装するテクニックを学べる解説書を紹介します。 Webページでよく使用されるさまざまなレイアウトやUIコンポーネントの実装、バリエーションやカスタマイズなども詳しく解説されており、これからのWeb制作に間違いなく役立ちます。 IEのサポート終了のお知らせ（Windows Blog）で、ようやくIEから解放されることに喜んでいる人も多いと思います。これによりIEへの対応をしなくてすむだけでなく、新しいHTMLとCSSも自由に使用できるようになります。 著者は、分かりやすい解説で評判のエビスコム様。中級者向けの実践的なテクニックが満載ですが、初心者でもコードとそれがどのような仕組みで実装されているのかていねいに解説されているので、大丈夫だと思います。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カード型コンポーネントの僕なりのHTMLとCSSを紹介 - Shibajuku
2020-09-21のJS: Moment.jsのステータス、PostCSS 8.0.0、Vue 3.0.0、DOMの順序と表示順序の一致
Building a Tabs component | Articles | web.dev
HTML+CSSの基本から応用までを習得できる教科書 - mojiru【もじをもじる】
A Guide To CSS Debugging — Smashing Magazine
Ladybird: A new cross-platform browser project
New WebKit Features in Safari 14.1
Next-generation web styling | Blog | web.dev
Full-Bleed Layout Using CSS Grid
フロントエンドに関わる人のスキルとして触れておきたい・知っておきたいこと
5日目: リッチフロントエンド - はてなインターン2019 (公開版)
Webデザイン制作で役立つ便利な最新オンラインツール41個まとめ
Dev Mode活用の前に開発者が知っておきたいFigmaのこと10個+α｜Hiroki Tani
Complete Flexbox Tutorial w/ Cheat Sheet
Google DeepMindの研究者が解説する「正しいAIの使い方」とは？
2020年7月第4週号 1位は、JavaScriptを使ったハンバーガーメニューの代替3案、気になるネタは、G Suite向けGmailがChat、Meet、Roomを統合 | gihyo.jp
2022-07-20のJS: Node.js 18.6.0、React NativeのHermesデフォルト化、AWSのデザインシステム
15 Best CSS Libraries for 2019
CSS Houdini - Vincent De Oliveira
An Interactive Guide to Flexbox
Help us invent CSS Grid Level 3, aka “Masonry” layout
Ten modern layouts in one line of CSS | Articles | web.dev
Grid for layout, Flexbox for components - Ahmad Shadeed
New in Chrome 85 | Blog | Chrome for Developers
A Deep Dive Into CSS Grid minmax()