地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
HTMLとCSSだけ！要素の表示・非表示を切り替える方法
今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavaScriptやjQueryは使わないので、AMP対応している場合にも利用できます。 この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。 表示⇔非表示を切り替える仕組み ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。 inputタグに連動させて切り替え
2020年、知っておくと便利なCSSのプロパティのまとめ
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun
iframe内の表示位置を指定して、フレーム自体の位置を水平方向に中央に配置する方法は？ - フレーム内の表示位置を、例え... - Yahoo!知恵袋
こんにちは♪ 参考 URL の知恵袋ではない方では、 <div> の中に <iframe> を入れています。 このとき、 <div> を表示したいフレームサイズにして、 <ifame> はそれよりも十分に大きいサイズにします。 この状態で、 <div> のスタイルシートで「overflow:hidden」を指定して、 <div> の中からはみ出した <iframe> の部分を 非表示にしているワケですねヽ(・ω・o この状態で、 <iframe> を <div> の内部で移動すれば、 <div> の大きさの枠で切り取られた部分が表示される、 という仕組みです♪ さて、 <div> の内部で <iframe> を動かすには、 いろいろ方法がありますが、 参考 URL では「マイナスの余白」を使って移動しています。 外余白（margin）は普通、 その要素の外側に、指定した値だけスペースが空き
睡蓮花 湘南乃風 歌詞情報 - うたまっぷ 歌詞無料検索
睡蓮の花のように 朝日に向け今日も歌う 睡蓮の花のように この思い水面に光る 花びらが流した涙 貴方は笑えていますか? 上がりまくる季節が来た ヤバくなれるのは誰… 俺!俺! 俺!俺!Ole!Ole! Ah 真夏の Jamboree レゲエ<砂浜<<Big Wave!! Ah 悪ノリの Heartbeat めっちゃゴリゴリ Welcome Weekend Ah 灼熱の Jamboree 暴れまくってイイぜ!! Ah 冷めないで Summer Dream ｢濡れたまんまでイッちゃって!!!｣ 夏だぜ (Yeah!!) 夏風 (Fuu!!) 夏晴れ (Yeah!!) 夏バテ (Boo↓↓) またコイツで決まりだ Summer Again 青く晴れた日を 笑う太陽 溢れる希望 むすぶ靴ひもに期待のせて 風を連れて 夢の種植えるため 今走り出そう 黄色いバス越え江ノ島方面 スゲエ混み合ってる ひま
CSSで作る！押したくなるボタンデザイン100（Web用）
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合、昔はfloatプロパティを使うのが主流でした。しかし、CSSの「Flexboxフレックスボックス」を使うとfloatよりも簡潔なコードで、ボックスの豊富なレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サン
:nth-child()疑似クラス (E:nth-child(n))｜セレクタ｜CSS HappyLife ZERO
CSS3で定義された:nth-child()疑似クラスは、ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを適用します。 尚、n番目というのは隣接している要素を全て数えるので、間に別の要素が有るとその要素もカウントしてn番目にスタイルが適用されます。 この疑似クラスは、偶数と奇数で指定を変えしましまにするとか、何番目だけ指定を変えるといった事ができます。 対応ブラウザ :nth-child()疑似クラスのサンプル ol li:nth-child(2n) { color: green; } ol li:nth-child(5) { color: purple; font-weight: bold; } <ol> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト
CSSでtable幅を設定するためのまとめ
CSSでtable幅を設定するためのまとめです。 以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあったので、このエントリーにまとめてみました。 うまくまとまっていなかもしれませんが参考になれば幸いです。認識誤りがありましたらどこかでつぶやいてください。 記事中で使ったサンプルの表示は、Firefox/Google Chromeで確認しています。 １．table要素に幅を設定 table要素にwidthプロパティを設定すると、th要素/td要素の幅は次のようになります。 th要素/td要素の内容の幅が同じ場合は均等割りつけ th要素/td要素の内容の幅が異なる場合は長さに応じて割りつけ th要素/td要素にwidthプロパティを設定した場合、table要素に設定したwidthプロパティの値を超えない範囲で適用 例として、次のtable要素を利用します。
テーブルをレスポンシブデザインに対応するためのCSSを使ったレイアウトパターン - YCOMのホームページの制作・運営に役立つブログ
ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。 大阪のホームページ制作YCOMトップ ホームページ運営ブログ レスポンシブデザインをしていると悩まされるんがテーブルのデザインです。 PCの画面と違って表示領域が狭いので、工夫しないとうまくテーブルを表示できません。 CSSを使ってテーブルをレスポンシブデザインするためのパターンを３つ紹介します。 見出しとコンテンツを交互に縦表示 テーブルの縦横を切り替える テーブルそのものをスクロール レスポンシブでレイアウトを変更する 一般的にテーブルはTableタグを使っているでしょう。 その構成要素は、Tableはdisplay:tableが初期値で、tdやthタグはtable-cellが初期値になっています。 これらを操作す
twitterのウィジェットを簡単に作成する方法まとめ
ウィジェットという言葉を耳にしたことがある人も、多いのではないでしょうか？ サイトやアプリを開かなくても、すぐに情報の確認ができるという意味を持ち、複数のウィジェットを同時に開くことも可能なのでとても便利です。 そんなウィジェットはtwitterにも対応しており、特定ユーザーのタイムラインを表示しなくても、相手のツイートを取得し一覧で表示できます。 ブログやサイトにソースコードを貼り付けると、同一ページにタイムラインが表示されるのでツイートの確認がすぐにでるのです。 この記事では、twitterのウィジェットのメリットを把握しつつ、ウィジェットを作成する方法について紹介します。 twitterでウィジェットを作成するメリットとは？ ウィジェットという言葉が広く浸透し始めたのは、androidのスマートフォンが普及してからです。 ホーム画面にウィジェットを設定すると、アプリを起動することなく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
「Firefox 79」からtarget=“_blank”なリンクの挙動が変更、より安全な仕様に／「Safari」は実施済み、「Google Chrome」も追随へ
ごめんなさいね。 - Lopan.jp
https://www.d-3.site/entry/2017/07/03/180000
ろくデブログ - ろくじゅうどデザインのブログ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
まだ中央寄せで消耗してるの？ - @yoshiko_pg