「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の

そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか

しぐれグランデ @signal_green @y_k_m_s_ 三ヶ月ほど前の話ですが、marqueeかblinkのどちらかはandroidのchromeで動きましたよ tao @tao_chameau @asami_vtj キラキラサイトに夢中だった学生時代。平成のインターネット文化が、私の働き方の原点になっている - はたらく気分を転換させる｜女性の深呼吸マガジン「りっすん」 e-aidem.com/ch/listen/entr…

Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。

どうも！LSSです！ 今回は「HTML超入門！…のさわりだけ！！」と題して、 「はてなブログ書いてるけど、HTMLは全く知らない。広告挿入のためにHTML編集画面を開くとドン引きする。」 という方に向けてちょっとだけ、HTMLってどういうものかを知る入口になったらいいな、って記事を書いてみます。 HTML編集画面を開いてみます HTMLとは？ タグとオプション タグの種類と、それぞれオプションの種類…は割愛します^^; はてなブログで即効で使えるHTMLタグ例２つ！ <hr>タグ＝区切り線 <table>タグ＝表 余録：HTMLと組んでWebページを賑やかにするお友達 CSS JavaScript PHP まとめ HTML編集画面を開いてみます 「編集　見たまま」画面で冒頭の文章を書いてから、適当に数回Enterキーを叩いて、HTML編集画面を開くと↑のような感じになります。 自分の書いた

カレーライスを作りました ※スマホではバグりますすみません See the Pen カレーライス by Thugumi Ishimaru (@thugumi-ishimaru) on CodePen. どうやって作ったの この記事ではカレーライスをHTMLとCSSで作ったときのポイントをいくつか抜粋したものを紹介します。 実業務ではきっと役には立ちませんので、 「CSSってこんな表現できるんだな」・「CSS楽しい」と思っていただければ幸いです。 パーツを細かく作る カレーのカレーによるカレーのためのAtomic Designの記事で言及した、 Atomic Designの考えを元にして作りました。 Atomsの用意 にんじん じゃがいも 牛肉 切った具材 米 皿 これらをどう作ったか後ほど解説します。 （厳密には米はMoleculesですが、まぁよしとしましょう。） これらを全て組み合わせ