スクロールバーをスマホで表示させる！｜とあるクリエイター
スマホや最近のブラウザではスクロールバーが出ないことがありますよね。 スマートでとてもいいのですが、枠の中にしっかり文字が収まってると スクロールできるかが分からない！と、いうこともあります。 （※あくまで個人的な意見ですが） (K)iPhoneでもスクロールバーを表示させて、カスタマイズする方法はWebkitで | web(K)campus 上は、参考にさせていただいたサイトです。 仕事で「文字がはみ出した時だけスクロールバーを出したい！」 という時に使用させていただきました！とても助かりましたm(_ _)m 同じ色、方法ですが私もご紹介させていただきます。 デモはこちら （スマホで開くにはデモサイトのレイアウト配慮できていません） html <!--普通のスクロール--> <div> 文章いっぱい<br> 文章いっぱい<br> 文章い
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
Accessible Rich Internet Applications (WAI-ARIA) 1.0 (W3C Recommendation 20 March 2014)
Accessible Rich Internet Applications (WAI-ARIA) 1.2 W3C Recommendation 06 June 2023 More details about this document This version: https://www.w3.org/TR/2023/REC-wai-aria-1.2-20230606/ Latest published version: https://www.w3.org/TR/wai-aria-1.2/ Latest editor's draft:https://w3c.github.io/aria/ History: https://www.w3.org/standards/history/wai-aria-1.2 Commit history Implementation report: https
Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s
HTML_CodeSniffer
あなたのHTMLが規約に準拠しているかチェックしましょう HTML_CodeSnifferは、HTMLソースコードをチェックし、設定したコーディング標準に違反している部分を検出するクライアントサイドスクリプトです。HTML_CodeSnifferはすべてJavaScriptで記述されているため、サーバーサイドの処理を一切必要としませんし、開発者はルールを追加することにより、独自の規約も遵守するよう拡張することができます。 てはじめとして、HTML_CodeSnifferにはWeb Content Accessibility Guidelines (WCAG) 2.0の3つの適合レベルと、アメリカ合衆国リハビリテーション法第508条のWeb関連部分の規格が付属しています。また、どんなWebページでもアクセシビリティをチェックできる監査インターフェースがブックマークレットで提供されます。
HTML5日本語訳
This Version: https://www.w3.org/TR/2018/SPSD-html5-20180327/ Latest Published Version: http://www.w3.org/TR/html5/ Latest Version of HTML: http://www.w3.org/TR/html/ Latest Editor's Draft of HTML: http://www.w3.org/html/wg/drafts/html/master/ Previous Version: http://www.w3.org/TR/2014/REC-html5-20141028/ Previous Recommendation: http://www.w3.org/TR/1999/REC-html401-19991224/ Editors: WHATWG: Ia
longdesc属性が復活しそうなので思うところを書いてみた。その１ ウェブアクセシビリティな話 - bathtimefish's blog
白石さんのおなじみのスレでも紹介されているとおり、HTML Image Description ExtensionがW3CのWorking Draftとして公開された。現時点の仕様をみるかぎりではlongdesc属性を復活させるという内容のようだ。 これはちょっとWebアクセシビリティ的に興味があるので思うところを書いておくことにする。 longdesc属性とは？ 使ったことない人も多いんじゃないかと思う。つーか知らない人もけっこういるかも、ボクも実際仕事では一度もマークアップしたことがない。longdesc属性はHTML4.01でサポートされていて、画像の詳細な説明を記載した文章へのリンクを示すものである。値にはURLを設定する。 画像を説明するための代替テキストとしてはalt属性を使うのが一般的だけど、説明がすごく長くなるような場合、別の文章を用意して、そのリンクをlongdesc属性
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
パンくずリスト（BreadcrumbList）のマークアップを追加する方法 | Google 検索セントラル | ドキュメント | Google for Developers
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 パンくずリスト（BreadcrumbList）の構造化データ ページに表示されるパンくずリストは、そのページがサイト階層内のどこに位置するかを示しており、ユーザーはサイトを効果的に理解し、移動できます。ユーザーは、パンくずリスト内の最後のパンくずから順番にさかのぼることで、サイトの階層内を 1 レベルずつ上に移動できます。 構造化データを追加する方法 構造化データは、ページに関する情報を提供し、ページ コンテンツを分類するための標準化されたデータ形式です。構造化データを初めて使用する場合は、構造化データの仕組みについてをご覧ください。 構造化データの作成、テスト、リリースの概要は次のとおりです。ウェブページに構造化データを追加するための手順ガイドについては、構造化データの Codelab
contenteditable （直接編集） の傾向と対策
contenteditable （直接編集） の傾向と対策 【 ありのごとくあつまりて 】 この記事に含まれるタグ （Keyword） : 直接編集 contenteditable ブラウザ contenteditable （直接編集） の傾向と対策 2010/01/10 (日) カテゴリー： ブログ雑記・その他 スクリプトを使わなくても Web上で文字や画像を直接編集させる方法 最近、この contenteditable="true" について新たな収穫（？）があったので載せておきます。 contenteditable="true" を使ったページ （実例） ブログ外 ソースの 直接編集・コピー用ページ 私が多用しているスタイル ブログ外 ソースの 直接編集・コピー用ページ <pre> を使えばタブも扱える ブログ内 ソースの 直接編集・コピー用ページ 記事ではなく テンプレートで
ユーザーが簡単にHTMLを入力できるWYSIWYGエディタ ベスト3 | ランサーズ（Lancers）エンジニアブログ
2017年最新版の記事をあげました。最新情報は「商用でも利用できる、イケてるWYSIWYGエディタ7選 2017年版」を御覧ください。 こんにちは。リートの satoshi です。 前回の投稿より、少し時間が空いてしまいましたが、今回はWYSIWYGエディタについてご紹介したいと思います。 WYSIWYGエディタって WYSIWYGエディタというのは、ブログ記事を書くときにフォントサイズを大きくしたり、見出しや色を変更したり…といったことをボタン一つで簡単に操作ができるとても便利な機能です。 今回はその中でも使えるエディタベスト3をご紹介します！ WYSIWYGエディタベスト3 私が選んだのは TinyMCE, CKEditor, NicEdit の3つです。3つともデザインはもちろんのこと、使い勝手がとても良かったです。 それでは3つのエディタについて詳しく紹介していきます。 TinyM
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
PC向けサイトがスマホでも崩れないようにする方法 - Qiita
PC向けに作った Web サイトをスマートフォンでみると、「 部分的に意図せず文字が大きくなる 」といった不具合が起きることがあります。 解決策ググって修正しようとすると、こんどは「 毎回、ページの左上が拡大された状態で表示されてしまう 」状況に陥ってしまうことがあります。 （私はありました。） ということで、PC向けサイトも最低限スマートフォンで見られるようにする方法をメモっときます。 勝手に文字が大きくなる対策 -webkit-text-size-adjust という、モバイル版ブラウザでのみ有効なプロパティがあるようです。 このプロパティが、デフォルトでは auto になっているため、文字が自動的に調整されて大きくなってしまう、というカラクリでした。 reset.css あたりに追記しておくのが妥当かと思います。 参考：iPhone版Safariで文字サイズがおかしくなるときは-we
[css] フォームのボタンをスタイルシートで画像ボタンに変更する
フォームのボタンについては以前、buttonタグにボタン画像をそのまま入れるという手法を書きましたが、 もう一つ、ボタンの見た目をCSSで変更する手法がございます。 この記事ではCSSでスタイリッシュなフォームボタンを作る方法について解説します。 メリットとしては、ロールオーバーアクションをCSSで制御出来るという点と、 タイプ属性にimageを指定しないので、送信やリセットなどの機能を殺さないという点があります。 ただし、CSSでのロールオーバーはIE6未対応なので、気になる方はJavascriptと併用してください。 （個人的にはスルーしても問題ないと思っています） (X)HTMLソース buttonとinputどっちでもOK <button id="submit" type="submit">Submit</button> <input id="submit" type="submi
![[css] フォームのボタンをスタイルシートで画像ボタンに変更する](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
HTML5 マークアップ入門 | TM Life
これらの要素を使うことで, 人間の目にもクローラにもやさしいコーディングができます. 注意点 注意することが一つあります. それは, やみくもに div を section や article, aside に置き換えてはいけないということです. html5doctorに以下の一文があります. Don’t use it unless there is naturally a heading at the start of the section セクションの始まりに見出し(h1~h6)を自然に入れられない場合は使わないでください 的なことが書かれています. この点だけ注意してください. HTML5 マークアップの例 HTML5 マークアップの例です. jsdo.it で作ったサンプルの内容になります. HTML5 マークアップ部分 HTML5 によるマークアップ部分です. ブログ記事用のマ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
W3 Watch Reference
Web制作 W3G
Another HTML Lint
DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier