タグ「div」 - はてブログ

タグ div

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 84件)

これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape

2024/05/08 136 users CSS HTML 形状 img div要素一つ

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loa... 続きを読む

なぜ <div> に onClick がダメなのか？

2023/06/18 144 users eslint onclick 要素みなさん設定

■ はじめに <div>要素にonClickを定義しない方がいい、ということを聞いたことがあります。みなさんも聞いたことないでしょうか？ただ、なぜ良くないのか？理解してなかったので今回調べてみました。ちなみに、ESLint でもそのような場合にワーニングを吐いてくれるものがあります。 ESLint の設定にもそれに対応す... 続きを読む

GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*

2023/04/10 55 users textarea シンタックスハイライト GitHub 目次

ここのことです*1。真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている目次目次シンタックスハイライトはどうしているのか？上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？なぜこうしたのか？困ることはないのか？たしかこないだまでは普通に div... 続きを読む

divはボタンではない、ボタンの実装について知っておくべきすべてのこと

2023/02/09 160 users Button 実装 buttonタグ divタグ HTML

クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したも... 続きを読む

React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita

2022/05/30 202 users Qiita const Button Prev ＡＤＤ

const Counter = () => { const [count, setCount] = createSignal(0) createEffect(() => { console.log(`Count: ${count()}`) }) //第２引数はありません。SolidJSが勝手に依存している状態を感知してくれます。 return ( <div> <div>{count()}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button... 続きを読む

マコなり社長の株式会社divを退職しました

2021/09/04 464 users まご株式会社div 親友社長同僚

マコなり社長の株式会社divを退職しましたあなたは誰？マコなり社長が経営する株式会社divの元社員です。数年勤務した後に退職しました。 divで働けて良かった？良かったと考えてます。 divの同僚はみんな心優しくて有能な方ばかりでした。退職した今では、親友として連絡を取り合っている元同僚もいます。また、div... 続きを読む

CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法 | コリス

2021/08/04 191 users コリス section inline CSS display

sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block... 続きを読む

CSS の Container Queries おためし - 見返すかもしれないメモ

2021/04/25 176 users Container Queries CSS コンテナクエリ

CSS に、コンテナクエリという機能があるらしい。メディアクエリでは画面全体の大きさに応じて要素のスタイルを変えることができたけど、コンテナクエリを使うと当該要素の親の大きさに応じてスタイルを変えられる。 /* メディアクエリの例 */ /* 画面幅が 400px 以下だったら、div を赤くする */ @media screen and (m... 続きを読む

エビも中国発ウイルス「DIV1」猛威　アジア拡散の恐れ　強烈な感染力、致死率80％以上も（みなと新聞） - Yahoo!ニュース

2020/07/15 104 users 猛威震源広東省毒性エビ養殖

中国発の新型コロナウイルス感染症が世界を混乱に陥れる中、エビ養殖の世界でも中国を震源とする「DIV1」（十脚目虹色ウイルス）と呼ばれる毒性の強い新種のウイルスが猛威を振るっている。今年2月に中国の養殖エビ一大産地の広東省で再発したのに続いて、5月には海を隔てた台湾にも拡散。東南アジアのエビ養殖主要国に... 続きを読む

W3C、「HTML 5.2」勧告。同時にHTML 5.3のファーストドラフトを公開－ Publickey

2017/12/14 226 users Publickey バグフィクス勧告 dialog HTML

Web技術の標準化団体であるW3Cは、HTML 5のマイナーバージョンアップである「HTML 5.2」の策定を完了し、勧告としました。 HTML 5.2ではいくつかの機能追加、削除、バグフィクスなどが行われています。機能追加の例では、ダイアログボックスを表示する＜dialog＞要素が追加されました。下記は＜dialog＞要素を用いたサンプルです。 ... <body> <div> <!-- ... 続きを読む

この打ち水をする女性の素晴らしい写真だが昭和29年の撮影でもなく撮影者不明でもなかった。このツイートは良い写真を紹介したが、情報は虚偽しか書いてなかった。 - Togetterまとめ

2017/08/11 810 users TinEye 打ち水虚偽 Togetterまとめコンテスト

Googleでは引っかからないが、tineyeではtmblrで横流しされる大元の画像販売が見つかる。撮影者はToji Takahashi、タイトルはMagic of Water、コンテストの白黒部門で5位入選したとある。 gettyimages.co.jp/license/517397… リンク Getty Images Fifth prize in the black and white div... 続きを読む

[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック | コリス

2017/05/19 162 users YouTube コリス padding CSS 主流

動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。この問題を解決するには、動画を配置するiframeをdivなどの親コンテナで内包し、アスペクト比にあった高さをpaddingで指定し、親コンテナのサイズに合わせて動画のサイズを変更させます。動画をレスポンシブ対応で実装する現在主流となっているテ... 続きを読む

katatema.js - ✘╹◡╹✘

2016/11/23 347 users React import React コマンド HTML

2016 - 11 - 24 katatema.js 次のようなコードを書いて、 import React from "react"; export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、 katatema というツールをつくった。 <!DOCTYPE html> <html... 続きを読む

CSSでTokyo Otaku Modeのロゴを作ってみる | Tokyo Otaku Mode Blog

2016/02/05 61 users CSS Tokyo Otaku Mode ロゴ吉見描画

こんにちは。 Tokyo Otaku ModeのUXデザイナーおよびフロントエンドエンジニアの吉見です。みなさんCSSは好きですか？先日弊社のロゴを眺めているとCSSだけでも表現できそうだなと思い、実装してみた話をしたいと思います。 Tweet HTMLの準備描画のためだけのDIVを大量生産して実装していくだけではおもしろくないので、ある程度制約を設けたいと思います。 Tokyo Otaku... 続きを読む

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

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

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

react-railsでサーバーサイドレンダリングしつつクライアントでsetStateできて最高になった - Qiita

2015/08/09 126 users Qiita React サーバーサイド pushState

土日でreact-railsとturbolinksを勉強してみた成果ですやりたいこと画面遷移するときは<div id='content'></div> の中身だけ入れ替えて、pushStateで行き来できるようにしたい reactを使ったリッチなページでも、イニシャルロードやSEOの為にサーバーサイドでレンダリングしておきたいサーバーサイドレンダリングした要素を破棄することなくReactで初... 続きを読む

[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory | コリス

2015/04/09 78 users コリスイージングミニマルスライダースクリプト

デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides">... 続きを読む

innerText(textContent)/innerHTMLを使ったHTMLエスケープは充分でないので今すぐやめろ、お前たちはもう終わりだ - TODESKING

2015/02/05 65 users jQuery innerHTML todesking

// jQueryでHTMLエスケープする例 function escape(content) { return $('<div />').text(content).html() } 続きを読む

CSS で「吹き出し」をつくってみる | バシャログ。

2014/12/25 76 users バシャログ CSS macky マッキ before

こんにちは。mackyです！最近、何かと吹き出しを目にすることが多かったので自分でもサンプルを作成してみることにしました。よかったら読んでみてください。では、早速。 HTML HTMLはこの一行。 <div class="baloon">お久しぶりです。まっきーです。ここに好きなテキストをいれてね。</div> CSS：スタンダードな角丸長方形使える環境であれば使いたい :before 。... 続きを読む

各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR | コリス

2014/12/19 65 users Onepager コリス section要素 Step タッチ

div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファ... 続きを読む

[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ | コリス

2014/12/02 442 users コリスＨＲ囲い CSS 実装

divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。...記事の続きを読む続きを読む

[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック | コリス

2014/11/26 187 users コリス box-shadow keyframes class

三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。左のSingleだと、divは一つだけ！左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要あり... 続きを読む

JavaScriptでリンク先URLがhttp/httpsか確認する方法 - 葉っぱ日記

2014/10/30 79 users https 葉っぱ日記 http JavaScript 方法

JavaScriptで動的にリンクを生成する際に、DOM-based XSSを防ぐためにリンク先がhttpあるいはhttpsに限定されていることを確認したい場合がある。典型的には以下のようなコードとなる。 var div, elm; // 変数 url は攻撃者がコントロール可能な文字列 if( url.match( /^https?:\/\// ) ){ div = document.getEl... 続きを読む

[CSS]紙がふわりとする繊細なエフェクトをシンプルなHTMLで実装するテクニック | コリス

2014/10/23 97 users コリスベンダプレフィックス Box エフェクト CSS

divで実装したパネルに紙がふわりとするようなエフェクトを与えるスタイルシートのテクニックを紹介します。デモではパネル底の左右がふわりとなります。 Pure CSS Paper Lift Effect 実装は非常にシンプルです。 HTML HTMLは、div一つだけです。 <div class="box"></div> CSS スタイルシートはベンダプレフィックスも含めてあるのでちょっと長いです... 続きを読む

[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider | コリス

2014/09/17 53 users コリス jQuery head エレメント jquery.js

divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link re... 続きを読む