現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti
この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！） 対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。 あとホームページ屋さんとかウェブコーダ
CSS フレームワークを使いたくない - ジンジャー研究室
CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない！」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ
いまさらだけど、Webのイケてないところについて - Tortoise Shell
Webは面倒くさくて、本当にイケてない。 わたしはWebデザイナーとして働いているので、Webについての色々な事を当たり前だと思い込んで何の疑問も抱きませんでした。 しかし、冷静に考えてみると、おかしいことだらけだと思います。 Webデザイナーは、デザインするのが仕事です。 コンテンツの魅力を最大限にエンドユーザーに伝えるべく、情報をデザインしています。 つまり、Webデザイナーは「コンテンツの質を高めること」に注力しなければならないのです。 しかし、現状はどうでしょうか。 人間ではなく検索エンジンに優しいWebサイト 本来ならデザインに集中すべきなのに、なぜブラウザの差分に振り回されたり、SEOを気にしながらWebコンテンツを作らなければならないのでしょうか。 ブラウザもSEOも「手段」であるはずなのに、わたしたちはいつもその「手段」に振り回されています。 特に、SEOなんてひどい話だと
ID使っても別に問題ない
CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
CSSフレームワークは良くないと思った理由 - Librabuch
もっと挑発的なタイトルにして冒頭で「このタイトルは釣りです」とか書こうとか思ったけど、各方面からの報復が怖いので止めた（←どこから）。 本日、お仕事で初めてCSSフレームワークを使う機会があってその仕様的なものを初めて見たのだけれども、かなりショックというか思うところがあったのでエントリにすることにした。 CSSフレームワークとは おそらくTwitter Bootstrapが最も有名かつ実際に利用されている、と思われる。 マルチカラムレイアウトとか、角丸でお洒落なメールフォームとか、アコーディオンなメニューとかのデザインがあらかじめ良く設計されよく作り込まれていて、HTMLの制作者はclass属性にちょちょいと記載するだけでお手軽に「今風」なセンスでWebデザインを組み立てられるというもの。フレームワークという呼び名には疑義もあるようだけれど、海外でもそう呼ばれているので今回はCSSフレー
全てのブラウザで表示崩れをなくす魔法のコーディング方法 – No.1026
全てと言いましたが、当方アンドロイドはあまり詳しくないので、そこで崩れたらゴメンナサイ。 HTML5を捨てる HTML5なんて使うのはやめましょう。HTML4.01 Transitional、XHTML1.0 Transitionalあたりでいいです。 CSSを捨てる cssなんてブラウザごとに違いが出るものを使うのをやめましょう。テーブルレイアウト最高です。 裏ワザ カンプをjpg1枚で書き出し→後はmapでリンクをつけよう！ これであなたもハッピーコーディングライフがおくれるよ！
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
perldoc.jp の運営とデザイン公募のお知らせ - Japan Perl Association運営ブログ
JPA の山口です。 オンラインで閲覧出来る、perldoc.perl.orgの邦訳サイトに当たるperldoc.jpですが、これまでtokuhirom氏個人による運営となっておりましたが、現在 JPA が運営母体となるよう手続きを進めております。 デザインの公募に関して 現在のページ構成要素として、概ね下記のようになっています。 TOP 本体 関数 モジュール 各 pod エラーページ これらに対して情報構成要素は同等に、技術ドキュメントとしての見やすさを考慮したデザインをして頂ける方を募集中です。(有償にて発注致します) 特に pod (Perl の標準的なドキュメント生成言語です)から生成した部分は、他の簡易テンプレートと同様に、主要な HTML 要素である次のような要素から構成されます。 h1, h2, … ul, ol pre, code 現在の pod ドキュメントの幾つかを
WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～
第6回 岡山WEBクリエイターズのセッション1で発表したスライド内容を全文掲載。第6回 岡山WEBクリエイターズ セッション1『WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～』 岡山WEBクリエイターズ勉強会でお話した内容を、スライドとともに全文掲載しています。 テキストはあくまで原稿そのままですので、実際に喋った内容とは幾分異なる場合があります。 スライドのPDFをダウンロード 講師概要 SKPRODUCT代表。 デザイン、コーディング、PHPによるシステム構築、ActionScriptを使用したFlashなど、WEB制作全般を行うWEBアーキテクトです。 岡山の大手企業・学校などを中心にWEBサイトと独自に開発したCMSフレームワーク『SEED』の提供を行っています。 本日は、WEB標準デザインはじめの一歩です。 WEB標準というと、技術的なことを想像される方
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
ゆーすけべー日記
サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一本吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には食材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい食材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
『CSSのidなんかなくなっちゃえよー＾＾＾』に対するWEB屋、システム屋さんの反応
みゃみゅ玉子🐣 @myamyu @yuko985 idは、cssのためにあるわけではなく、Documentのなかで唯一のモノを表すためのものなので、cssだけ考えたらclassで全然オッケーかと思います。でも、jsでなにかするときには欲しい。。。 2010-10-05 10:46:28 アライユウコ @yuko985 @pomu0325 普段使いの用途だとページ内リンクくらいしか思いつかない・・・それだって代替のやりようがあるしな、とか思っちゃうとアレなんです。他に、『idがないとサイト制作やってらんねーーー』みたいなのってあるのかなあ。idがなくて死にそうな場面が思いつかない 2010-10-05 10:47:26
「CSS3でドラえもん」はスゴイけれど……
1． 画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなブックマークニュース 画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD CSS3 ドラえもん 画像を一切使わないCSS3で製作した新サイト「NetaGear」！ - 裏技shop DD NetaGear 「すごい」と思う。そのアイデアにも技術にも感心する。ただ私は、本題から外れたところで、ちょっと違うことを考える。 2． IEは非推奨です。IEでも一応閲覧は可能ですがGoogle Chrome、firefox、Operaのようなデザインでは表示できません。 ここで今IEを使っている人に言いたい！ そのブラウザを使うのをさっさとやめてくれ。あれはWeb業界の足を引っ張りまくっているお荷物なんだ！ もうIEとかネタでしかないし、早く滅びればいいのにｗ 昔からいっているのだけれども
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのid/class名のルールとそれにまつわるgetElementByIdとquerySelectorの動きの違い - Qiita
HugeDomains.com
メディアクエリが勧告になったので。 - 血統の森+はてな
css-eblog.com
6 new articles about character encodings and HTML/CSS | Internationalization Activity Blog
Using character escapes in markup and CSS