「HTMLのスーパーセット」Svelteはこんなに進化している — TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線本記事は、TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 では始めさせていただきます。今日はSvelteのこの1年の最新情報をキャッチアップできるということをゴールに発表します。
「昔のインターネット」の精神を取り戻す、HTMLエネルギー運動
今日のWebは商取引などの目的に最適化され、少数の企業によって所有されている。個人に力を与え、自己表現を促すかつてのWebの魅力を取り戻す「HTMLエネルギー（HTMLエナジー）」というムーブメントが密かに盛り上がりつつある。 by Tiffany Ng2024.01.08 363 10 Webサイトは、常に洗練されたデジタル体験だったわけではない。 かつて、ネットサーフィンをするには、自分の意に反して音楽が再生されるタブを開いたり、色つきの背景にタイムズ・ニュー・ローマン書体の文字がびっしり詰まったページを読んだりする必要があった。スクエアスペース（Squarespace、Webページ作成サービス）やソーシャルメディアが登場する以前の2000年代、Webサイトは個性を表現するものであり、コードの知識とインターネット上に存在したいという願望を持ったユーザーが、HTMLを使ってゼロから作るも
Kindle本のブラックフライデー特大セールが開催！ Web制作やUIデザイン、イラスト関連の良書が半額で、超お買い得です
※本ページは、アフィリエイト広告を利用しています。 今週の金曜日から開催されるAmazon ブラックフライデーに先駆けて、Kindle本のブラックフライデー特大セールが開催されています。Webや紙のデザイン、HTML/CSSなどWeb制作の解説書、ディレクションやマーケティング、同人誌・絵師さん向けのイラストの良書がたくさんセール対象です！ セール期間は、12/1まで。 スクロールバーを見ると分かると思いますが、かなりの数がセール対象になっています。対象のKindle本は最安値（当方調べ）、セール初登場のものも多く、貴重なこの機会をお見逃しないように。 【ブラックフライデー】最大70％OFF Kindle本キャンペーン セールでは他にも、ビジネス書・文芸・マンガ・趣味実用書・ライトノベル・雑誌などもたくさん半額になっています。 まずは、Kindle Unlimited 3ヵ月がなんと99円
いざという時に使える7つのHTML&CSS Tips集vol.2 | BUILD Journal
いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。 グラデーションを使ったテキストアニメーション See the Pen Text gradient animation by BUILD (@buildstd) on CodePen. テキストカラーにグラデーションを使ったアニメーションを施す方法。 テキスト要素の背景にanimation プロパティでアニメーションさせたグラデーションを設定し、background-clip: text で背景グラデションをテキストのかたちに切り抜くイメージです。color: rgba(0 0 0 / 0) でテキストカラーを透明にしないと背景グラデーションが表示されないので指定します。 CSSp { color: rgba(0 0 0 / 0); -web
GmailやAmazonでは「HTMLにプレーンテキストでパスワードが保存されている」とセキュリティ研究者が警告
ブラウザのテキスト入力フィールドに関する脆弱(ぜいじゃく)性の分析により、大手企業や官公庁のサイトのHTMLソースコードに平文でパスワードが保存されていることが判明しました。問題を発見した専門家らは、試しに機密データを抜き取れるテスト用の拡張機能を作成したところ、いとも簡単にChromeウェブストアにアップロードできたと報告しています。 [2308.16321] Exposing and Addressing Security Vulnerabilities in Browser Text Input Fields https://arxiv.org/abs/2308.16321 Chrome extensions can steal plaintext passwords from websites https://www.bleepingcomputer.com/news/securi
HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。 HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせて実装することができます。 Izmir Izmir -GitHub Izmirの特徴 Izmirの使い方 Izmirのカスタマイズ Izmirの特徴 Izmirは、画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSのライブラリです。エフェクト用のclassはかなりの数が用意されており、HTMLにclassを追加するだけで、完璧なホバーエフェクトを実装できます。 MITライセンスで、商用プロジェクトでも無料で利用できます。 Izmir 主な特徴は、下記の通り。 エフェク
Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
ReactコンポーネントでレンダリングされるHTML要素の種類を変更可能にするためのパターン
ReactのUIコンポーネントライブラリを使っていると、あるコンポーネントによってレンダリングされるHTML要素の種類を変更したくなる場面がある。たとえば、通常はbutton要素としてレンダリングされるButtonコンポーネントを使うときに、代わりにa要素を使ってレンダリングしたいというケース。 as prop そのような場合、一般的には、Buttonコンポーネントにas propを実装して対処することが多い。 function Button({ as: Component = 'button', ...props }) { return <Component {...props} />; } render( <> <Button type="button"> I’m a <code>button</code> element </Button> <Button as="a" href="
プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS
ポートフォリオやブログ、テキストサイトやシンプルなショップなど、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワークを紹介します。 HTMLもシンプルでプレーンなため、実装は簡単です。CSSはそのままでもカスタマイズしても使用できます。もちろん、レスポンシブ対応で、ダークモードもサポートしています。 Neat CSS Neat CSS -GitHub Neat CSSの特徴 Neat CSSの仕様 Neat CSSの使い方 Neat CSSの特徴 Neat CSSは、ミニマルなWebサイトを素早く構築するシンプルなCSSのフレームワークです。CSSは約2Kbの超軽量サイズ（未圧縮）、カスタマイズも簡単です。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 Neat CSS Neat CSSの主な用途 ブログ ジャーナル テクニカルサイト ドキュメン
Pythonでフォルダ内のMarkdown文書をHTMLに変換する - Qiita
Markdown形式で書いた記事をWebページで公開したい。 まず、markdown形式の記事を整理して、フォルダを作成する。 名前をmd-folderとする。 次に、空のフォルダ（html-folder)を作成する。 md-folder内のmarkdownファイルをhtmlファイルに変換して、変換後のファイルをhtml-folderに上書きしたい。 ＜webサイトを作りたい。webサイトの構想＞ html-folderを、Webページの左側にファイルツリーにして表示するつもりである。 markdown形式の記事を今後もWebページに追加していく予定である。 過去に書いた記事を書き換えることもある。 その度、markdown-folder更新→html-folder更新→ファイルツリー更新とする。 メインページはその都度書き換えたくないので、メインページにファイルツリーのhtmlファイルを
AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE
AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI CODE 実際に試してみましたが、ナビゲーション、ボタン、カード、フォームなど、UI要素やUIコンポーネントやレイアウトが数秒で簡単に実装されました。 また、次のバージョンではJavaScriptにも対応して、UIライブラリも追加する予定とのことです。 AI CODEの使い方 AI CODEの使い方は簡単、登録など面倒なことは一切不要です。 サイトにアクセスし、テキストを入力して「Generate」ボタンを押すだけです。 テキストは英語だけでなく、日本語でも大丈夫です。たとえば
ChatGPTを使用して「Web制作者の疑問に答えるWebアプリ」を作りました
ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。 ChatGPTで高品質な回答を得るために たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。 さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。 これは
フロントエンド技術がなんもわからんプログラマがPythonでMarkdownをHTMLにレンダリングしてCSSを適用してみた - Qiita
フロントエンド技術がなんもわからんプログラマがPythonでMarkdownをHTMLにレンダリングしてCSSを適用してみたPythonHTMLCSSMarkdownWeb 概要 やること MarkdownファイルをHTMLファイルに変換して、HTMLタグへの理解を深める CSSの基本的な扱いに慣れる 想定読者 Pythonはなんとなくわかる Markdownは普通にわかる HTML, CSSはよくわからない 背景 筆者は普段Pythonでデータ加工処理やRPAを作っている。Webアプリ開発も手を出し始めた。 ブラウザを自動操作をするにせよ、Webアプリを作るにせよ、フロントエンドがわからないとつらい。 Markdownには慣れている。そういえば、MarkdownってHTMLを読み書きしやすくするというコンセプトで作られたものでは...? MarkdownからHTMLを生成するツールを使え
HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA
HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経験したことがある人も多いのではないでしょうか？ 不要なスクロール領域ができていた スクロールバーの切り替わりで画面がガタつく これらの問題を防ぐためには、対処法のほかにどんな環境で発生するのかを知っておく必要があります。本記事では、スクロールバーの簡単な説明と、2つのよくある問題と対処法について紹介します。 スクロールバーの簡単な説明と、制作時のポイント よくある問題を紹介する前に、スクロールバーの簡単な説明と、macOSで制作する時の注意点について触れておきたいと思
1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes
ノーコードツール「STUDIO」がスゴイ！ HTML・CSSが不要、FigmaからコピペでWebサイトが完成【1週間まとめ】 - 9/30～10/6のWeb担の記事まとめ | 先週のWeb担まとめ記事 | Web担当者Forum
Figmaで作ったデザインをWebサイトに即反映「STUDIO」 | 進化が止まらない！ 最新ツール
imgタグの変化 - 気づいたら時代遅れなHTMLを書いてた - Qiita
ロリポップ！、ChatGPTを用いたウェブページ作成機能を追加。テキスト情報からHTML/CSS生成 「GMOレンシュ」にも連絡文の生成機能
