FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューションPHPカンファレンス小田原2024 の発表資料です。 https://phpcon-odawara.connpass.com/event/296492/ https://fortee.jp/phpconodawara-2024/proposal/7c57d5ca-213a-4d7a-aaf0-26ddc44897f0
「昔のインターネット」の精神を取り戻す、HTMLエネルギー運動
今日のWebは商取引などの目的に最適化され、少数の企業によって所有されている。個人に力を与え、自己表現を促すかつてのWebの魅力を取り戻す「HTMLエネルギー（HTMLエナジー）」というムーブメントが密かに盛り上がりつつある。 by Tiffany Ng2024.01.08 363 9 Webサイトは、常に洗練されたデジタル体験だったわけではない。 かつて、ネットサーフィンをするには、自分の意に反して音楽が再生されるタブを開いたり、色つきの背景にタイムズ・ニュー・ローマン書体の文字がびっしり詰まったページを読んだりする必要があった。スクエアスペース（Squarespace、Webページ作成サービス）やソーシャルメディアが登場する以前の2000年代、Webサイトは個性を表現するものであり、コードの知識とインターネット上に存在したいという願望を持ったユーザーが、HTMLを使ってゼロから作るもの
なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io
Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio
strong, b, em, i, u, …、違いがわからんHTML要素の仕様を調べて「新しい見た目」を考えてみたら理解が深まった
「strongもbも太字になるのにどう違うんだ…？」 「emもiもイタリック体になるけど、そもそもイタリック体ってなんなんだよ…？」 「strongの重要と、emの強調って何が違うんだ…？」 などなど、使い方がよくわからなくなりがちな HTML 要素（主にテキストレベルセマンティックスに分類される要素）の違いを調べてみました。 長めの記事になっていますので、気になる要素だけつまみ食いしてもらうのもよいかと思います。 今回の調査対象はこちら span strong b em i dfn cite var mark u ins del s strike big small ブラウザのデフォルトの見た目確認用 CodePen 調査する内容 HTML Standard の仕様に書かれている説明 一部、HTML 4.01 から HTML 5 での変更が理解の助けになるものもあり、HTML 4.01
デザイナー向けに行なったHTML勉強会の資料を公開します｜sakito
今回はChatwork株式会社のデザイナー向けに行なったHTML勉強会で使用した解説資料をお伝えします。私は3年ほど前からChatwork株式会社の開発のサポートやデザイン基盤活動のアドバイザーとして参画しており、その活動の一環で会を開催しました。 開催の意図と目的開催概要は@emimさんが、UI設計はHTMLの理解からというタイトルでnoteに書いてくれています。企画の意図は下記のとおりです。 企画の意図 根本としては、情報整理（情報設計）の基礎概念にHTMLがとてもマッチしている、と考えているからです。 ところが、業界的にも昨今よく聞く話ではありますが、最近意外にHTMLに触れる機会がなくプロダクト開発の現場に入る人が多いのが現実です。これは、デザイナーだけでなく、なんならフロントエンドの開発者であっても。 個人的には、HTMLはマークアップ言語であること以上に、構造化のフレームワーク
【仕様の読み方】HTMLの要素をどうやって学ぶか
<search>要素がHTML Standardに追加されました。私も初めて出会う要素になるわけですが、とても良い機会なので、私が要素を調べる際にどうやって調べて学んでいるのかを共有したいと思います。これは新しい要素に限らず、既存の要素の調査に応用できると思います。また、初学者はもちろん、マークアップを生業としている方にも参考になると思います。 新要素追加の経緯を調べる まずはHTML StandardのGitHubのPRからスタートするとよいでしょう。議論や更新はGitHubで行われています。たとえば、今回の<search>はAdd the <search> element #7320というPRによって更新されました。 そもそも更新自体のキャッチアップ方法はクローズされたPRを更新順にして確認してもいいですし、更新のみをツイートしている@htmlstandardのTLを確認してもいいと思
ファイルダウンロード完全マスター | フューチャー技術ブログ
Real World HTTPでも紹介したネタですが、お仕事で受けている技術コンサル中に質問をいただいた時に、微妙に本で紹介した内容では少し足りなかったので、改めて整理のためにブログ記事にしてみました。次回、本が改訂されることがあればこのブログエントリーの内容も入れて加筆したいと思います。 Real World HTTPだとGoを使っていましたが、フロントとサーバーを同時にいじるので、本エントリーではNext.jsをサンプルに使います。Next.jsでプロジェクトを作って（npx create-next-app@latest –ts)、適当なプロジェクト名を入れてアプリケーションの雛形を作っておいてください。 Next.jsでは、1つのスクリプトファイルを作成すると、それがサーバーAPI(/pages/api以下)と、フロントの画面(/pages/以下のapi以外)になります。Next.j
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
iOS 11でWeb Appが強化されたけど、またしてもメタタグがおかしい - Qiita
Safari 11 でWeb Appが強化された Updated WebKit support for home screen apps. Web applications saved to the home screen now support all features of modern WebKit, such as Fast-Tap, scroll snapping and the new visual viewports behavior. ということで、Safariでは使えていたがホーム画面に追加すると動作しなくなっていた項目が動くようになり、Web Appの使い勝手が若干よくなった。 特に300msのクリック遅延問題が解決されたのは嬉しい。 しかし、またしても他の問題が出てしまっている。 ステータスバーの制御 メタタグに以下を追加することによって、ホーム画面から起動したときに
iOSのホーム画面にオリジナルのアイコンを置く方法 - Qiita
以下のテキストの【～】の部分を好きなように置き換え、SafariのURLバーに入力し、開いたページをホーム画面に追加することで、ホーム画面にオリジナルのアイコンを設置することができます。 data:text/html;charset=UTF-8,<title>【タイトル】</title><meta name="apple-mobile-web-app-capable" content="yes"><link rel="apple-touch-icon" href="【画像URL】"><script>navigator.standalone?location="【URLスキーム】":alert("ホーム画面に追加してください")</script> ポイントは以下のようになります。 data URI … サーバーなどにHTMLファイルを用意することなくHTMLを使える apple-mobile
VSCodeでMarkdownからHTMLを生成 - 滴了庵日録
Wordでドキュメント書くのクソかったるいし、もうMarkdownでええやろと思いつつ、客に読めないと言われたら面倒だからVSCodeの拡張機能でHTMLに変換してみたら見た目が気に入らなくてスタイルシートいじりだして、だんだん何やってるのか分からなくなってきた。 VSCodeのインストール ここからダウンロードしてインストール。 VSCodeはテキストエディタだが、Ctrl+Shift+VでMarkdownのプレビューができる。 拡張機能 Auto-Open Markdown Preview VSCodeの画面左端にある拡張機能アイコン（四角いアイコン）をクリックして、検索テキストボックスに 「auto open markdown」と入力し、Auto-Open Markdown Previewの「インストール」をクリック。インストール後、「再度読み込む」をクリックしてAuto-Open
文字コードの部屋 -- Web のエンコード
ホームページの HTML 文書に使用するエンコード 目次 ページ作成にはどのコードが良いか？ 美乳テーブル <META> タグの charset 指定 1. ページ作成にはどのコードが良いか？ 21 世紀、ブラウザのじゅうぶんに進歩した今の時代、もはや シフト JIS EUC JIS コード どれでも構いません。あなたが一番便利だと思うものを選ぶとよいでしょう。特に思いつかなければ、あなたの OS が得意とするコードでよいでしょう。 エンコード判別のロジックの観点からすれば、EUC が一番判別を誤りやすく、文字化けしやすいです。Shift_JIS は判別が比較的容易です。JIS コードはほぼ間違うことは無いでしょう。しかし、もはや 95 ％のユーザが使っているブラウザは、EUC コードですら、ほとんど判別を誤ることはありません。 さらに、どのコードが日本語サイトに最もふさわしいというコンセ
target="_blank" のセキュリティリスク(デモ動画あり)
HTMLを勉強する際に最初に覚えるものの1つにa要素(タグ)があります。HTMLのアイデンティティと言っても過言ではない、ハイパーリンクを実現する大事な要素です。 href属性に設定されたリンク先のURLをどのウィンドウ等に表示するかを決めるtarget属性というものがあります。任意の値を設定してウィンドウに名前を付ける事で、複数のa要素から同じウィンドウへリンク先URLを表示する事もできますし、常に新しいウィンドウを開く_blankのような、あらかじめ挙動が設定されている値もあります。 target="_blank" のセキュリティリスク リンクの開き方を決定するtarget要素ですが、この挙動を利用してリンク先からリンク元のウィンドウを操作できるというセキュリティリスクが公開されています。 Target="_blank" - the most underestimated vulner
SPAと覚悟
Frontend Meetup vol.1 - SPAを語り尽くす会! でのLT資料です。 http://connpass.com/event/38112/
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
HTTPキャッシュ。なぜ嫌われるのか。 - それマグで！
忌み嫌われるキャッシュたち。 キャッシュはどうやら、世間では嫌われ者のようです。 ScrenCaptured_2016-03-05_0.54.33 どうして、そんなにキャッシュされるのがイヤなんだろうか。 そもそもキャッシュってなんだっけ？ キャッシュとは、更新されていないコンテンツ（画像、CSS、JS、HTML、DNS結果など）を何度も何度も取得行かずに済むように、クライアントPC側で保存し再利用する仕組み。 つまり、転送量の節約。無駄な転送を控える。非常にエコな仕組みであります。 HTTPのエコ。HTTPはエコなプロトコルだったはず。 3つのR です。 Reduce Reuse Remix 。複数のファイルをそれぞれ、別途管理して１つのページとして構成(Remix)する仕組みです。 ブラウザのキャッシュを利用するメリット 通信料の節約、画面表示の高速化、戻るボタン対応など。 ブラウザは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting...
Site unavailable
https://qiita.com/YusukeSuzuki@github/items/3300ed29f053eb7ff799