空のdiv要素について - uhyo/blog

2021/09/06 71 users span uhyo 妥当 span要素 観点

昨日はこちらの記事に端を発する形で、空のdiv要素やspan要素は妥当なのかといった話題が見られました。 中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか？ - dskdこの記事は空のdiv要素やspan要素が妥当かどうかという疑問にHTML仕様の観点から考察を加える大変面白い記事です。記事の結論として... 続きを読む

div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui | コリス

2019/09/18 149 users コリス 矩形 ユーザーインターフェイス class CSS

Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされ... 続きを読む

CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシート | コリス

2017/12/13 105 users コリス ヘキサゴン class CSS CSS Grid

シンプルなHTMLで、レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシートを紹介します。 JavaScriptは完全に不要で、CSS Gridを使用してdiv要素にclassを付与するだけで実装できます。 Hexi-Flexi Grid Hexi-Flexi Grid -GitHub Hexi-Flexi Gridの特徴 Hexi-Flexi Gridのデモ Hexi-... 続きを読む

[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ | コリス

2017/07/31 258 users コリス transform Flex ビューポート CSS

div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。 Centering horizontally and vertically in CSS float, transform, position, display:flex;などを使ったテクニックが紹介されて... 続きを読む

[CSS]マージンの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック | コリス

2017/07/11 78 users コリス margin-bottom マージン 相殺 CSS

まずは、クイズ。 Aのdiv要素には「margin-bottom: 10px;」を、Bのdiv要素には「margin-top: 30px;」を指定した場合、それらを垂直に配置するとマージンはいくつでしょうか？ What's the Deal with Collapsible Margins? これは「マージンの相殺（Collapsing Margins）」と呼ばれるものです。 このマージンの相殺と... 続きを読む

CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス

2017/06/14 917 users minmax コリス Calc CSS 関数

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッド... 続きを読む

[CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ | コリス

2016/01/21 434 users コリス ビューポート サポートブラウザ CSS 天地

テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、天地・左右・天地左右・ビューポートの天地左右の中央に配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実... 続きを読む

CSSで片方可変、片方固定のカラムレイアウトを実装する方法 | NxWorld

2015/10/19 220 users 片方 レイアウト HTML NxWorld 見た目

CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTML 以下で紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 H... 続きを読む

divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ | コリス

2015/10/13 436 users ユーザエージェント セクショニング セマンティック コリス

HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Con... 続きを読む

[CSS]画像のキャプションをいい感じのアニメーションで表示するシンプルなホバーエフェクト | コリス

2015/06/10 69 users コリス しぐさ キャプション ホバーエフェクト 見出し

シンプルな実装で、画像のキャプションを美しいグラデーションのパネルにアニメーションで表示するシンプルなホバーエフェクトを紹介します。 イラストは、以前紹介した「Girls Design Materials」です。 生き生きとした表情やしぐさが魅力たっぷりなガーリー素材 実装 Step 1: HTML 画像とキャプション（見出しとテキスト）をセットに、a要素で括り、全体をdiv要素で内包します。 <... 続きを読む

[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse | コリス

2014/08/06 125 users class フレームワーク コリス HTML CSSファイル

p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 [html... 続きを読む

[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify | コリス

2014/06/16 188 users jQuery コリス section要素 スクリプト デス

section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 Scrollify Scrollify -GitHub Scrollifyのデモ Scrollifyの使い方 Scrollifyのデモ デモはデス... 続きを読む

[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic | コリス

2014/03/09 381 users コリス パララックス jQuery スクリプト エフェクト

スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロール... 続きを読む

テレビ画面はdiv要素でできている！- Hybridcastとテレビの未来 – | HTML5Experts.jp

2013/10/09 114 users HybridCast インタービュー 松村 未来 加藤

日本放送協会（以下、NHK）が提供するHybridcastについて、NHKメディア企画室専任局長の加藤久和氏（以下、加藤氏）、同放送技術研究所ハイブリッド放送システム研究部主任研究員の松村欣司氏（以下、松村氏）に、Web技術者の視点からさまざまな話を聞きました。インタービューで気になったキーワードを取り上げます！ 加藤 久和氏 松村 欣司氏 変わりゆくテレビ 1953年にNHKがテレビの本放送を開... 続きを読む

[JS]高さの異なるパネルをレンガ状に配置する機能最小限・実用性重視の超軽量スクリプト -waterfall | コリス

2013/06/25 180 users GitHub Waterfall Zepto コリス デモ

div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリ... 続きを読む

[JS]お気に入りのカラースウォッチをアウトプットするためのスクリプト -Swatches | コリス

2013/05/21 50 users コリス rel jQuery ポパー head

たった一つのdiv要素を使うだけで、お気に入りのカラースウォッチのコレクションページを作成できるjQueryのプラグインを紹介します。 ホバーでコード表示 Swatchesの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル スタイルシートはhead内に、スクリプトを</body>の上に配置します。 <head> <link href="css/swatches.css" rel="s... 続きを読む

[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック | コリス

2013/04/18 289 users border-radius コリス 絵筆 div ラッパー

角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。 HTMLはdiv要素が一つだけで、ボーダーも単にborderとborder-radiusを使用しているだけです。 デモページ 実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 [html] This is my para... 続きを読む

[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート | コリス

2013/01/23 184 users span コリス 見出し CSS バリエーション

このレトロ風の凝ったデザインのリボン、HTMLはh1要素だけで実装されています。 余分なspan, div要素もなく、もちろん画像は一切使用されていません。 Single Element Pure CSS3 Double Fold Ribbon CSSはそれなりのボリュームになりますが、スタイルシートだけでデザインする見出しのバリエーションとしてストックしておきたいですね。 HTML HTMLは非... 続きを読む

[JS]jQueryのプラグイン33+1選 -2012年12月 | コリス

2012/12/06 258 users jQuery コリス Carousel スライダー 水玉

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 videoBG 動画をページの背景（あずきの水玉）でもdiv要素の背景（暗いトンネル）でも配置します。 Superslides フルスクリーンサイズで軽快なアニメーションを備えたスライダー。 Carousel 水平・垂直・クロス・タイマーに対応したカルーセル型のギャラリー。 ayaSlider さまざまな要素のタイミングを設定して... 続きを読む

[CSS]JavaScript無し、レスポンシブ対応、背景をコンテンツのスクロールに合わせて変更するスタイルシート | コリス

2012/11/12 235 users コリス CSS スクロール レスポンシブ対応 背景

デモを幅780pxで表示 実装 実装は、5ステップです。 Step 1: 背景画像の用意 デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。一番大きい表示サイズを想定して、1,800x1,200pxの画像です。 Step 2: HTML HTMLは非常にシンプルです。 各コンテンツは4つのコンテンツはrapperのclassを付与したdiv要素で配置し、header, secti... 続きを読む

[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners | コリス

2012/10/30 77 users コリス 四隅 CSS エフェクト 美しいエフェクト

[CSS]背景に切り込みをいれて、パネルの四隅を留めるCSS3の美しいエフェクト -CSS3 tucked corners デモページ 実装 Step 1: HTML パネルは4つのコーナーのエフェクトを疑似要素で作成するため、2つのdiv要素で実装します。 <div class="tucked-corners-top"> <div class="tucked-corners-bottom"> <... 続きを読む

たった一つのdiv要素とCSS3を使ってiPhone 4Sを描いてみた、がすごいな | IDEA*IDEA

2012/09/09 112 users IDEA After 右下 iPhone 4S CSS3

このスクリーンキャスト（っていうのか？）が凄いですよ。たった一つのdiv要素だけでiPhone 4Sを描いちゃっています。 ↑ 右下にあるプレイボタンでコーディングしている様子を再現することができます。 変態的なテクニックが満載ですな・・・。やっぱり:beforeと:afterを使いこなせるようにならないとなー。ご興味がある方は以下からどうぞ。 » Creating Single Element ... 続きを読む

[CSS]JavaScriptを使わずに、Pinterest風レイアウトにするスタイルシートのテクニック | コリス

2012/08/22 160 users コリス columns wrapper CSS テクニック

昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns... 続きを読む

[CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス

2012/07/18 574 users コリス before hover チュートリアル CSS

HTMLを汚したくない、もしくは変更することができないときに役立つ擬似要素の基本的な使い方から応用テクニックまでを紹介します。 擬似要素で、div要素の両端にシャドウをつけたり、一枚の画像を重ねたりすることができます。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3で... 続きを読む

[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシート | コリス

2012/06/27 79 users コリス パラグラフ slider CSS スライダー

CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。 画像はそれぞれの背景として配置します。 <div class="slider"> <a href="#"> <... 続きを読む