[B! html] sometkのブックマーク

Python だけで作る Web アプリケーション(フロントエンド編)

Python だけで作る Web アプリケーション第一弾です。HTML/CSS/JSを使わずに、PythonだけでUIを含むWebアプリケーションを作ります。

sometk 2022/05/30

おもしろそうだ！

リンク

どうしてHTML5が廃止されたのか | フューチャー技術ブログ

フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては﹁何をいまさら﹂という話題かと思います。しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。広義のHTML5 / 狭義のHTML5HTML5

sometk 2021/06/21

良い方に行くか、悪い方に行くかわからないが、w3cに準拠しろと言う奴らが好きじゃなかった。

リンク

2021年だから人類はHTMLを手打ちしろ

youkoseki.com 2021年だから人類はHTMLを手打ちしろ新しい年だ。人並に新しいことを始めようなどと考える人もいるだろう。しかし、なにを始めればいいのか？　僭越ながら一つ提案をさせてもらえるなら、私はこう言いたい。HTMLを手打ちしろ。ハイパーテキストマークアップランゲージを学べ。なぜなら、個人がコツコツとタグを手打ちしたウェブページには暖かみがあるからだ。私は中学一年生のとき、はじめてパーソナルコンピュータを買ってもらった。中学受験がうまくいったら買ってもらえるという約束で、受験には失敗したのだが、買ってもらったのだ。中学時代、ほとんどずっとパソコンと向かいあっていたが、CONFIG.SYSとAUTOEXEC.BATを書き換えてメモリ残量の上下に一喜一憂していた記憶しかない。あとA列車で行こう4や、ルナティックドーンのようなアートディンクのPC ゲーム。Windows3

sometk 2021/01/01

良いと思う。自分がかつて、やりたかったこと。

リンク

お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA

フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。サンプルを別ウィンドウで開く︵シンプル版︶サンプルを別ウィンドウで開く︵リアルタイム版︶コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーションまずはセマンティックなマークアップをWAI-ARIAを使ったコーディングというと、とにかくrole

sometk 2020/10/19

電話番号は3つじゃなくて1つがいいとか、そういう話じゃなかった！

リンク

ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ

平尾誠@ARUTEGA.Inc @Makopontass コーディングを外に出すことが増えてきた。やはり経験値が少ない人の品質管理は大変だと感じつつも、しぶとくピクセルパーフェクトを狙ってくる方に仕事を任せてよかった。この再現性への執着心がないと伸び代を感じれない。 2020-09-20 00:34:07 吉本集 / aru inc. @tsuDoi220 いやー、実際そうなんですよねー。ピクセルパーフェクトに、そもそも拘っていない人に、仕事お願いしたくない。テクニックどうこうより、全然こっちのほうが大事。ほんとに。後、速度とちゃんと納期守ること。当たり前のようだけど、意外とね、、、 twitter.com/makopontass/st… 2020-09-20 00:45:27

sometk 2020/09/21

ピクセルパーフェクトって言葉知らなかった。例外もあるが、おおよそ上位ブコメの言うとおり。おかしなデザインの間違いも吸収したりもした。

リンク

Node.js でお手軽スクレイピング 2020 年夏 - Qiita

皆さんは Web ページのスクレイピングって書いた事ありますか？私はあります。だってどんなに平和で平穏な生活を送っていても数年に一度はスクレイピングってしたくなりますよね。﹁うわーまじか！API ないのかよ…。﹂的な。そうしたら HTTP クライアントと HTML パーサのライブラリを探してきてインストールした上でごりごり書くことになると思います。でも実際に書いてみると、そうやってライブラリのインストールをしたりサンプルコードで動作確認している時間よりも、HTML を解析して実際にパースしたところから対象の要素を取得して欲しい値を取り出す試行錯誤の時間の方が長かったっていう事はないですか？今日ご紹介する Node.js でお手軽スクレイピングは、その辺の試行錯誤の手間を極力減らすことが出来る方法です。2020 年夏の最新版です。まずは環境から。特に古いものを使う理由もないので 202

sometk 2020/07/21

リンク

必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css

用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。 MVP.css MVP.css -GitHub MVP.cssの特徴 MVP.cssのデモ MVP.cssの使い方 MVP.cssの特徴 MVP.cssはHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。用意するのは、HTMLだけ MVP.cssはHTMLの各要素にス

sometk 2020/03/30

タイトルみてわかるけど、それ一行じゃないと思う。。

リンク

ソースコードの形状ルール | 吉本式BEM設計（BEM設計ベース）

HTMLのソースコードの形状ルール今回のこの記事に対しての反響について日頃から他の実装者が制作したWebサイトのソースコードを見るようにしていますが、美しいソースコードだと思えるソースコードにはなかなか出会えません。「美しいソースコード」という意味には、単に「美しい」だけではなく「見やすい」という意味も含めて使用しています。タイトなスケジュールに追われて、ソースコードを整える余裕がないというのが現状でしょうか。中でも最も気になるのが、インデントです。 Webサイトのソースコードを見ると8割程度の割合で、インデントが付いています。なぜインデントを付けるのかを聞くと「コーディングミスが防ぎやすい」「作業効率が良くなる」という回答がきます。これについて否定はしませんが、ではインデントを付けないとコーディングミスが起きやすく、作業効率が悪いのかというと、そんなことはありません。私は

sometk 2018/05/11

インデントはスペース派・タブ派、それと‥ナシ派がある。という程度なら良いと思うのだけれど。

リンク

HTMLコーディングの人気のスタイルは？アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA

ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。連載第3回目となる本記事ではウェブ業界の﹁HTMLコーディング﹂や﹁フロントエンド﹂を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのレイアウトに使うのはFlexboxが多いウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり﹁float﹂が32%、﹁Flexbox﹂が51%、﹁Grid Layout﹂が11%、﹁table﹂が6%でした。 Flexboxが最多となったのは、未対応ブラウザ︵例‥IE9︶が無視できるシェアまで下がったことや、floatよりFlexboxのほうが

sometk 2018/01/11

flexboxは困った時に結局解決できなかった案件があるので以来あまりメリットを感じていない

リンク

dev.toがなぜinsanely fastを実現出来ているか - Qiita

INSANELY FAST Qiitaを読んでる人なら https://dev.to をほとんどの人が見たはず。見てない人は見てきてください、速すぎて驚くはず。またmizchiさんがdev.toに書いたなぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか - dev.to を見た人も多いと思う。個人的にHeroku, Railsを採用してここまで爆速なサイトを構築出来ていることは今までの常識を覆す衝撃な出来事だった。こんな新しい発見をもたらしてくれたdev.toには本当に感謝してる。自分もこんなサイト作ってみたいなと思ってdev.toのことを色々調べてて少し知見がたまったので共有してみます。この記事はOkinawa.rb Advent Calendar 2017 7日目の記事です。 Twitterやってるのでよかったらフォローしてください🙋‍♀️ @saboyut

sometk 2017/12/06

シンプルにしてある

リンク

HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css

WebブラウザがFlexboxやCSS Gridをサポートしていく中、HTMLメールではXHTMLとtableレイアウトがまだまだ主流です。 HTMLメールを作成する時のベースになる、HTMLのテンプレートと有用なデフォルトのスタイルを提供するCSSリセットを紹介します。 normalize.em ail.css -GitHub normalize.em ail.cssの特徴 normalize.em ail.cssの構成 HTMLメールを作成する時のテンプレート normalize.em ail.cssの中身 normalize.em ail.cssの特徴ほとんどの電子メールクライアントに有用なデフォルトのスタイルを提供。ネイティブプラットフォームのフォントスタイルを作成。 HTMLメールの一般的なバグに対応。コメントを使用したスタイルの説明。 normalize.em ail.cssの構成

sometk 2017/12/06

あれ？万能じゃないよね。外部cssが使えないというケースに幾度となく遭遇したような気が。

リンク

HTML minifier

Case-sensitive Treat attributes in case sensitive manner (useful for custom HTML tags) Collapse boolean attributes Omit attribute values from boolean attributes Collapse inline tag whitespace Don't leave any spaces between display:inline; elements when collapsing. Must be used in conjunction with collapseWhitespace=true Collapse whitespace Collapse white space that contributes to text nodes in a d

sometk 2017/11/14

minify,minifier

リンク

これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！

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

sometk 2017/10/26

リンク

HTMLのheadの書き方、head内に記述する要素の総まとめ

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素ソーシャル関連のhead内の要素ブラウザ・プラットフォーム関連のhead内の要素メモ head内に記述する最小限の構成下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c

sometk 2017/09/26

リンク

CSSで子要素の縦位置をセンタリングしよう。 - みかづきブログその3

CSSで子要素の縦位置をセンタリングしてみます。その1 position:absolute をつかう。己を position: absolute に、親要素を position: relative ︵もしくは absolute、fixed︶にして、自らのtopを50%、margin-topを己の高さの半分に設定すれば、なんということでしょう。縦位置のセンタリングのできあがりです。必要な情報としては、己の高さのみなので非常にお手軽です。その2 display:table-cell と vertical-align:middle をつかう。親要素を display: table-cell、 vertical-align:middle に、さらにその親要素を display: tableにすることによって、縦位置のセンタリングのできあがりです。要素がひとつ増えてしまいますが、誰もな

sometk 2016/11/29

vertical-alignめんどくさい

リンク

HTMLコーダーやWebデザイナーをバカにしているプログラマーは全員腹切って死ね - kなんとかの日記

デザイナーとプログラマーの間に優劣なんかない。あるのは役割の違いだけ。なのになんでHTMLコーダーとかデザイナーとかをバカにするプログラマーが多いのかサッパリわからない。 HTMLコーダーやWebデザイナーをバカにしているプログラマーは全員腹切って死ね。 web業界にも様々な職種があり、最近では分業化も進んでるみたいだが、だからって﹁自分はHTMLコーダーですから、プログラミングには興味ありません﹂は通用しない。 HTMLコーダーやデザイナーも、プログラミングは勿論サーバーやネットワークの知識を持つべき。まぁデザイナーは別業界でもある程度潰しがきくかもしれない。プログラミング知らないHTMLコーダーがダメな理由なんでやねん。なんのために仕事が分かれていると思ってんねん。デザイナーがサーバやネットワークを知らないといけないような状況って、プログラマーがクソなだけだろ。そんないうんや

sometk 2016/11/29

そういう時代もあったような

リンク

ブラウザでストレージ？ Web Storageを使いこなそう

連載目次 ■Web Storageの概要と活用例旧来︵＝HTML 4.1以前︶のWebブラウザでは、eコマース・サイトのカート情報やログイン状態の管理情報などのデータをブラウザに保存する仕組みとして、大半のWebサイトではクッキーを利用していた。しかし、クッキーでは、保存容量が4KBytesまでであることや、すべてのリクエストに対してサーバにデータを自動で送信するため、容量制限やセキュリティ対策に悩まされることも多くあった。 HTML5では、クッキーに代わるデータ保存の仕組みとして、﹁Web Storage﹂と呼ばれる機能を利用できる。Web Storageは、ブラウザ側でKey-Value型でデータを保存する機能のことで、現在のインターネットを取り囲む環境に対応した﹁クッキーの後継技術﹂ともいえる。 Web Storageとクッキーの機能の差異は、以下の表のとおりだ。

sometk 2016/07/06

リンク

HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King

WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替えるウィンドウサイズに合わせて画像を切り替えるウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt

sometk 2016/06/15

リンク

極力、タイプセレクタを使わない

CSS Architecture Advent Calendar 2014 17日目の記事です。ぶっちぎってますが、17日目の記事です。僕は、タイプセレクタ︵ E { … } ︶をたくさん使うCSSはあまり好きじゃありません。タイプセレクタを使ったCSS例えばこんなCSSがあったとします。 /*css*/ h1 { font-weight: bold; margin: 0; padding: 0; } header h1 { font-size: 30px; border-bottom: 1px solid #ccc; } article h1 { font-size: 20px; background-color: #ccc; } .subContent h1 { font-size: 18px; } こういったCSSが書かれると僕はおこです。なぜおこなのかheader要素の中の

sometk 2016/05/06

リンク

ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ

私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム︵以下、WF︶を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。設計者がコーダーに文書構造の意図を説明する時間の無駄設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄コーディング時にWFやPSD上のテキストをコピペして移し替える無駄リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄更新するたびに新しいWFを印刷する紙の無駄いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？

sometk 2016/04/14

クライアント案件だと難しい

リンク

はてなブックマーク

タグ

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

htmlに関するsometkのブックマーク (256)

お知らせ

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

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

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス