[B! HTML] otakumesiのブックマーク

サーバーサイドレンダリングしないReact SPAのSEO - 橋本商会

普通にwebpackと@babel/preset-envで"last 2 versions", "Safari 10"をターゲットにしてビルドしているだけ

otakumesi 2017/07/26

React
HTML

リンク

リアルガチにヤバいAMP Start - Qiita

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? AMP(Accelerated Mobile Pages)がGoogle検索の仕様に加わってからひさしくなりますが、さらなる広がりの予感をAMP Projectがみせております。ウェブデザインが収束の方向に向かっている BootstrapやMaterial design、Reactなどコンポーネント単位でウェブモジュールをつくっていこうという動きがあります。これは当たり前です。たとえ、オリジナルデザインでウェブサイトを作ろうとしても、パーツの再利用性などを考えることは効率やブランディングの観点からも正しく、みんなそうしてウェブサイトを

otakumesi 2017/03/24

リンク

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミックデザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を

otakumesi 2017/01/12

リンク

2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA

HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がないウェブコンテンツのキーワードを指定するmeta keyw

otakumesi 2016/12/20

リンク

head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など

HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。オススメの最小限の構成要素 meta要素 link要素ソーシャル関連のhead内の要素ブラウザ・プラットフォーム関連のhead内の要素スマホアプリ関連のhead内の要素メモオススメの最小限の構成下記は、head内に記述する最小限のタグです。

otakumesi 2016/06/01

リンク

「HTML5/CSS3モダンコーディング」を読みました - ryunix's blog

www.shoeisha.co.jp かっこいいプロフィールページを作ってみたいと思い購入しました！また、VimConf2015で「 Vim で書いた本」と紹介があったのも惹かれました。著者による紹介エントリは以下です。 yoshiko.hatena blog.jp 感想私のHTML/ CSS の知識についてですが、業務画面を作成する程度なら問題ありません。しかし、 HTML5 /CSS3はまったく分かりませんでした。実際に手を動かしながら本を読み進めていきました。基本的にはHTMLを書いて CSS で装飾してブラウザで確認の流れを繰り返す感じで、どんどんページがお手本に近づいて行くのが面白く、スラスラと読み進めることができました。また、初めて知るプロパティなどが出てきてもONE POINTでその他に指定できる値などの紹介があり、値を変更してどう表示されるかを確認す

otakumesi 2016/01/24

HTML
CSS

リンク

フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]

みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React、vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 DOM についての説明は長くなるのでここでは省きますが、簡単に説明すると HTML や XML の構造を表現するための仕様です。DOM は JavaScript のためだけにある仕様ではなく、 Java や Python など、多くの言語に対応する仕様です。前述した各ライブラリーは多くのウェブブラウザー間の差異を吸収してくれるため、非常に便利なものです。しかし、その機能の豊富さからライブラリー自体のサイズは大きく、ウェブブラウザーで読み込むファイルの数や合計の容量が増えてしまいます。状況

otakumesi 2015/12/29

リンク

脱Bootstrapガイド〜フルスクラッチCSS〜 - Qiita

2021/02/12 追記この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、現在のBootstrapは内部的にもflexboxになっていたりと改良されています。まずは剥がす前に最新版への更新を検討してみてください。一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで

otakumesi 2015/11/06

リンク

そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita

帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。ライブリロードで、リアルタイムなスタイル調整バックエンドではなくフロントエンドで生成できる前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環