[B! Web制作] starneon3517のブックマーク

2022年のモダンCSS改

7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy

starneon3517 2022/07/28

リンク

HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA

ダイアログやハンバーガーメニューといったユーザーインタフェース︵UI︶は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから﹁簡単に作成できる﹂と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ダイアログを表示中に、裏側のコンテンツがスクロールできてしまったダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、

starneon3517 2022/06/24

リンク

Webサイト制作をどれくらいの粒度で分解してタスク化するか｜重松佑 / Shhh inc.

プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも重要なものです。たとえば「Webデザイン作成」というスコープにどのような実作業が含まれているかはWBSを作ることによって見える化しプロジェクトメンバーやクライアントと共有できるようになります。ときどき下記のように書かれたWBSを見ることがあります。 Webデザイン作成・作成・確認・修正・確認2 ・修正2 ・確定しかし、これでは「Webデザイン作成」に必要な知識、さらには作業量・スケジュール・予算も分かりません。Webデザイン作成の例を続けると、下記のように「作成」のスコープを分

starneon3517 2021/07/07

リンク

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"

starneon3517 2021/03/10

リンク

どう書くんだっけ？を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ

この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペットベスト100発表どう書くんだっけ？を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー

starneon3517 2021/01/28

リンク

Web制作者が知っておくと便利なCSSの小ネタ

CSSの進化はすごいですね🚀 一昔前はJavaScriptが必要だったり、トリッキーなCSSで記述しないとできなかったことが、1行もしくは数行のCSSで簡単に実装できるようになりました。 Web制作者が知っておくと便利なCSSの小ネタを紹介します。 CSS Tips by Marko Denic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにスムーズなスクロールはたった1行のCSSで CSSだけでテキストを省略複数行のテキストも省略できます水平と垂直方向のすべてに中央揃え影を画像のコンテンツのみに与える CSSでカーソルをSVGに変更 CSSだけでタイピングのエフェクトテキストのハイライトカラーを変更どんな要素でもサイズを変更 CSSで実装するモーダルサイズ指定にcalc()関数が便利空の要素をスタイ

starneon3517 2021/01/27

リンク

「Angular」「React」「Vue」の3大フレームワークに集約　ICSの代表が教える「フロントエンド技術」のトレンド

﹁キャッチアップしておきたいウェブ制作の最前線﹂というテーマで、Vue.jsなどJavaScriptを駆使したユーザーインターフェイスの開発を主に担当してきた池田泰延氏が、Webのフロント周りの近年の技術的な動向を解説します。前半はフロントエンド技術のトレンドについて。スピーカー自己紹介、﹃JavaScript コードレシピ集﹄を出版池田泰延氏︵以下、池田︶‥みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こ

starneon3517 2021/01/27

リンク

Hotwireとは何なのか？

はじめに HotwireはBasecampが発表した、モダンなWebアプリケーションを作るための新しいアプローチです。名前もHTML OVER THE WIREから来ているように、HotwireではHTMLをサーバーから送ります。﹁それ普通のWebアプリケーションでは？﹂と思う方もいるかもしれませんが、SPA + APIサーバでJSONが使われるのに対し、SPAと同様の体験をHTMLを中心に置いて作るアプローチであることを示す表現です。僕個人は、最初は﹁ふ〜ん﹂という感じだったんですが turbo-railsを読みつつHotwireのデモアプリをPhoenixに移植してみたり WebSocketではないTurbo Streamsのsourceを作ってみて遊んだりと、ある程度触ってみて良さが理解できてきたので、Hotwireを使うと何が嬉しいのか、Hotwireの各要素の紹介を記事として

starneon3517 2021/01/25

リンク

Webエンジニアとしていま知っておきたいWebアクセシビリティ

この文章についてこれは Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」で基調講演をするにあたって、登壇内容を整理するために書いたものです。登壇内容とは一部に差異があります。イベント映像この文章はむちゃくちゃに長いので、登壇映像を見たほうがいいかもしれません。わたしの発表は13:23くらいから30分ちょっとです登壇資料（内容は同一です） https://speakerdeck.com/ymrl/webenziniatosite-imazhi-tuteokit ai-webakusesibiritei https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit?usp=sharing 目的 Web業界で「エンジニア」の肩書で仕事して

starneon3517 2021/01/14

リンク

Micro Frontends Architecture Patterns

本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような考え方が役に立つことは多いです。フロントエンド観点で、様々なアーキテクチャパターンをまとめることで、Web開発の助けになればと考えています。また、アーキテクチャの歴史と変遷を知ることで﹁Micro Frontends﹂への理解を深めることができると筆者は考えました。Micro FrontendsはThoughtWorksのTechno logy RadarではすでにADOPTとなり、海外で多くの事例が存在します。Micro Fronte

starneon3517 2020/12/22

リンク

レスポンシブの確認がこれで快適に！複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App

レスポンシブの確認ツールやサービスをいろいろ紹介してきましたが、ついに本命とも言える無料ツールの登場です！ Windows, macOS, Linux対応で、しかもオープンソース、快適にレスポンシブの確認ができるResponsively Appを紹介します。5つのデバイスを同時にすれば、制作時間は5倍速くなります。無料とは思えないほど高性能で、すべてのWeb制作者にお勧めです！ Responsively App Responsively App -GitHub Responsively Appの特徴 Responsively Appのダウンロード Responsively Appの使い方 Responsively Appの特徴 Responsively Appは、レスポンシブのWeb制作に役立つElectronで構築されたブラウザです。ユーザーインタラクションは、すべてのデバイス間でミ

starneon3517 2020/06/25

リンク

Bubble | Build Powerful Full-Stack Apps Without Code

Discover the future of software development with Bubble, a no-code platform used to build SaaS tools, marketplaces, CRMs, & more — hosted securely in the cloud.

starneon3517 2020/06/23

リンク

フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note

フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。なんでこんな話になったのか︵前置きなので次の章まで飛ばしてOKです︶デザイナーさんから﹁この画面をこんな風に作ってください﹂とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。僕の個人的な意見・経験ですが、いざ実装するぞとなったときに﹁あれ…ここってどうしたらいいんだろう？﹂と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。手が止まるたび、デザイナーさんに﹁ここってどうしたらいいですか？﹂と質問するのが何か新しい画面を作るときに必ず発生していました。﹁︵いつも聞いてる

starneon3517 2020/02/28

リンク

ウェブ制作をスピードアップ！便利すぎる最新オンラインツール、無料素材51個まとめ

この記事では、Webデザインやグラフィックデザインの制作がグンと捗る、便利すぎる最新オンラインツールをまとめてご紹介します。通常、時間のかかってしまう面倒な作業も、これらのツールやサービスをうまく活用することで、より快適にデザイン制作をすすめることができます。お気に入りのツールを自分のワークフローに取り入れ、自分だけの爆速制作スタイルを確立してみませんか。ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。コンテンツ目次 1. イラスト系ライブラリ 2. デザインコレクション 3. モックアップツール 4. デザインからコードへの変換ツール 5. Web制作お役立ちツール 6. プロトタイプツール 7. アイコン素材パック 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめイラスト系ライブラリ Illustrations 商用利用もでき

starneon3517 2019/12/10

リンク

CSS3のセレクタ全42種まとめておさらい使い方リファレンス | WP-E (仮)

こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときにあれ？コレなんだったっけ？というセリフを何度心のなかでつぶやいたか分かりません。また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。なお、仕様書の日本語訳は以下のページをご参照ください http:/

starneon3517 2019/12/07

リンク

CSS3を使ってできる画像まわりのエフェクトやスタイリング18

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレームまとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません

starneon3517 2019/12/04

リンク

未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie

﹁即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける﹂ということを目的としたドリルを作りましたので、皆様に公開します。ダウンロード[PDF/PSD/XD]︵92MB︶本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。内容は、私たちが未経験デザイナーの採用を進める中で、﹁こういう知識は早い段階で身に付けておいてほしいよね﹂という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。身に付くのはあくまで﹁即戦力クラスの知識﹂であって、﹁即戦力﹂になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を

starneon3517 2019/10/31

リンク

VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA

﹁Visual Studio Code︵略称‥VS Code︶﹂はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。コード補完の様子を次のスクリーションショットでご覧ください。入力候補の﹁★﹂マークが付いているところが、補完候補になっているところです。人工知

starneon3517 2019/05/15

リンク

拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、﹁自然に帰ろう……自然に帰ろう……﹂と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。さて。さてさて。皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。失礼ながら、そのお気持ち、たぶん5ヶ月、遅いです！仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD︵テクニカルディレクション︶やPM︵プロジェクトマネージャー︶として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には﹁Web制作﹂の考え方にお

starneon3517 2019/05/09

web制作

リンク

【AMP】Googleが推進するAMPとは？概要と対応方法まとめ

突然ですが、最近スマホで検索をした時にたまにカミナリ⚡マークが付いたページが表示されるのをご存知でしょうか？赤い枠で囲っているリンクにはカミナリのマークがついています。このようなリンクはAMP HTMLで構築されたWebページに遷移します。リンクをタップして見てみると、非常にシンプルな見た目のコンテンツが表示されます。これらは﹁AMP(Accelerated Mobile Pages)﹂という、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツです。﹁最近よく聞くけど、AMPってなんなの？﹂と疑問をお持ちの方も多いのではないかと思います。 SEO界隈で何かと話題のAMPについて、概要から対応方法までまとめてみました。 AMPのメリットや設定方法について、こちらの動画でもわかりやすく解説しています。記事とあわせてぜひご覧ください。

starneon3517 2019/04/16

リンク

はてなブックマーク

タグ

関連タグで絞り込む (244)

Web制作に関するstarneon3517のブックマーク (1,075)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス