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

「SEOに強いHTMLの書き方」についての個人的な見解

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

cibea 2023/01/14

リンク

絵文字一覧（顔文字と感情：Smileys & Emotion）

絵文字一覧のトップページはこちらをごらんください😊 Unicode 15.0 と Emoji 15.1 に準拠した 😀😁😂などの色々な表情の顔文字や 👿悪魔 👹鬼 👺天狗 👽エイリアン 👻おばけなどの顔文字と💘💓💕💖ハートマークなどの感情を表す絵文字の一覧です。 2023年 Emoji 15.1では 🙂‍↔️首を横に振る顔 🙂‍↕️首を縦に振る顔の絵文字が加わりました😊 2022年 Unicode 15.0では 🫨震える顔 🩷ピンクのハート 🩵水色のハート 🩶グレーのハートの絵文字が加わりました。以下の一覧のテキスト部分をコピーすれば、XやFacebook にペーストできます。 HTMLに埋め込む場合などは、HTMLコードをコピペしてください。

cibea 2020/09/16

リンク

15秒くれ。HTMLサイトをWordPressのテーマへ変換してやる、ってどんな仕組み？

【発表】WP テーマ選びで悩んでる？日本語テーマの比較はこちら。デモサイトを見ながら使い方とできることを比べられます【テーマ選び方】8つ比較ってのが気になってまして、ようやく試してみました。ドラッグ&ドロップだけで、HTMLデータからWordPressテーマに変換してくれるサービスです。変換にかかる時間は15秒。ほんまかいな。やってみた先にこんな感じにHTMLサイトを用意しておきます。デモとして、HTMLテンプレートを利用して作ったシングルページです。JavaScriptで簡単なアニメーションもついてます。デモページを見てみる利用したテンプレートはこの記事で紹介してますそれで、このサイトデータをフォルダごとブラウザにドラッグ＆ドロップします。下のような画面なので、中央フォルダマークのところへです。すると、そのあと15秒あれば、WordPressのテーマへ変換できると言うん

cibea 2019/10/30

リンク

Tabulator - Interactive JavaScript Tables

Easy to use, simple to code, fully featured, interactive JavaScript tables and data grids Download v6.2 HTML <div id="example-table"></div> JavaScript - Simple Table //define data array var tabledata = [ {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1}, {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:t

cibea 2018/12/21

リンク

マーカー - CSS Dencitie

HTMLでは li要素の手前に、黒い点や数字が自動で付きます。それをマーカーと言います。それを独立させて考えようというのが、このマーカーボックスという考え方です。マーカーボックスは、'display: marker'で生成します。マーカーボックスを使うと、今まで出来なかった背景やボーダー、文字の大きさなど、各種指定が出来ます。例えば、このような事を書くと、 li { display: block; } li:before { display: marker; content: counters(mycount, lower-roman) "."; counter-increment: mycount; } 以下のHTMLが <ol> <li>これが1つ目の項目。</li> <li>これが2つ目の項目。</li> <li>これが3つ目の項目。</li> </ol> こんな具合に表示され

cibea 2018/03/15

html
css

リンク

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