タグ「border」 - はてブログ

タグ border

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

(1 - 21 / 21件)

【CSS】borderを使って、三角形作るのはやめませんか？ - Qiita

2023/06/18 291 users Qiita ベストプラクティス CSS みなさん三角形

はじめにみなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？この記事では、CSSで三角形をつくるベストプラクティスを紹介します。今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このよ... 続きを読む

自然に見える画像の枠線を求めて - Qiita

2022/09/14 113 users Qiita ユーザーアイコン枠線視認性画像

この記事の概要サムネイル画像やユーザーアイコンなど、どんな画像が適用されるか分からない要素ってありますよね。そんな要素に対して、視認性を確保するためにborderをひいてあるのによく遭遇します。そのborderが時折ちらついて見えるのが嫌だったので、改善策を考えてみました。完成物＆通常のborderとの比較全... 続きを読む

[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック | コリス

2018/02/26 211 users コリス矩形 height width CSS

パンくずでよく見かける三角形の実装方法に注目です。今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。 Breadcrumb with arrow shaped links 三角形をborderで実装 ... 続きを読む

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary

2015/11/04 639 users padding phiary box-sizing CSS3

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-s... 続きを読む

スマートフォンサイト制作で「なんで拡大縮小できるようにしてるの？」と言われた時の対処法 | Border/memo

2014/10/16 368 users memo viewport device-width 実在

※ この話はフィクションです。実在の人物や団体などとは関係ありませんスマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自... 続きを読む

コーディングを考えたPSDのレイヤー整理 // Border/blog - RYO NAKAE, Web Designer

2013/09/09 323 users psd ヒストリーカオスコーディングレイヤー

ついつい勢いで作ってレイヤーがカオスになりがちなPSDですが、コーディングのことを考えたレイヤー整理について考えてみました。使っていないレイヤーは削除するいきなり個人的にぐぬぬ…となりますが、使っていない(古い)レイヤーは削除しましょう。コーダーさんが間違って非表示にしているものを表示してスライスしてしまうかも知れません。「あれ、おかしいかな？」と思った時にヒストリーでPSDを開いた初期状態... 続きを読む

[CSS]これは素敵なアイデア！borderを使ったCSS3アニメーションのテクニック | コリス

2012/10/04 141 users コリス CSS アイデアテクニック CSS3アニメーション

Simple yet amazing CSS3 border transition effects デモ実装デモデモはFirefox, Chrome, Safariなどのモダンブラウザでご覧ください。 IEはたぶん10でしょうか。デモは大きく分けて、3種類です。デモ下段最後は矩形のデモ、円形とは異なるアニメーションが楽しいです。実装 HTML HTMLは非常にシンプルでa要素にcla... 続きを読む

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life

2012/09/25 638 users padding box-sizing height CSS3

[CSS]アロー付きの吹き出しのスタイルシートが簡単に作成できるオンラインツール -CSS Arrow Please! | コリス

2012/04/12 122 users コリス relative CSS background div

HTML 使用するHTMLは、下記のような感じでokです。 <div class="arrow_box">ふきだし</div> CSS 生成されるスタイルシートはアローやボーダーのみなので、吹き出しのサイズなどは別に指定して利用してください。 .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f... 続きを読む

CSSをシンプルに書くことができるLESS使ってみた | webOpixel

2011/12/13 181 users less margin webOpixel auto 階層

CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなくしやすくなるらいしいです。ネスト（階層）化できるたとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px ... 続きを読む

[CSS]hr要素をおしゃれにスタイリングする8つのテクニック | コリス

2011/11/23 613 users コリス background CSS height hr要素

デモページ CSS3を使った8つのテクニックデモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; ba... 続きを読む

立体感のある水平線をCSSだけで実現する方法 | IDEA*IDEA

2011/06/08 497 users IDEA box-shadow CSS 水平線こいつ

おっと、こいつは便利かも。小技として覚えておきたいです。えと、あれですね、立体感のある水平線をつくる方法です。 ↑ こういうの。これ、細かくみると線と影が描き込まれていて、今までは画像で表現するしかありませんでしたが・・・BorderとBox-Shadowで実現できるようです。 Two-Toned Border with CSS3 h1 { border-bo... 続きを読む

社内講習わくわくjQuery編1 - jQueryを使ってみよう ::ハブろぐ

2011/03/19 122 users jQuery ラクチン git diff LL言語ハブろぐ

HatenaRecent社内講習わくわくjQuery編1 - jQueryを使ってみようgit diffの結果を差分ファイル群としてエクスポートするRubyスクリプトfacebookページのLike Boxからborderとかを消して無個性にするLESS.appで最小化されたmin.cssも同時に作る方法Sassよりラクチン，LESS.appで簡単CSSコンパイル生活！（Mac限定）LL言語と学習... 続きを読む

CSS - dtをfloatする場合の注意点 | Try | d-spica

2008/05/12 506 users TRY padding margin Recent CSS

dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテ... 続きを読む

[CSS]マージンとパディングの使い分けをおさらい | コリス

2008/03/18 269 users パディング padding margin コリスマージン

CSSnewbieのエントリーから、ボックスモデルのマージン(margin)とパディング(padding)の利用シーンにおける違いを紹介します。 When to Use Margins and Padding マージン(margin)を採用する場合パディング(padding)を採用する場合ブラウザによる問題マージン(margin)を採用する場合 borderの外側にスペースが必要な場合。ス... 続きを読む

<img src="http://i.yimg.jp/images/ybm/icons/sbm_nw.gif" alt="別ウィンドウで表示" border="0" height="11" width="11">

2007/12/23 451 users icons Alt height width yimg.jp

ぼくがCSSを書くときに手放せないツール - ぼくはまちちゃん！(Hatena)

2007/04/17 295 users CSS ボクツール Hatena まちちゃん

こんにちはこんにちは！！ CSS書いてますか！！ぼくなんか書きすぎて border: 1px solid red; が0.5秒で打ち込めそうな感じなんです＞＜ところで、CSSいっぱい書いてると、ぱっと見ただけでおよそ何ピクセルか、わかったりするようになるから人間ってすごいよね！この余白は 6px だな、こっちのblockは 40px くらいかな？とか…！大きいのは難しいけど！最近はエ... 続きを読む

ちょっと使えるかもしれないCSS(1) - 見出しを飾る | オトコのキモチ２

2006/09/23 496 users きもち CSS オトコ見出し padding

ちょっと使えるかもしれないCSS(1) - 見出しを飾る Design ちょっとHTML(2) - h4，h5 で紹介した見出しをCSSで装飾する例をいくつか。見出し h4 はてなでよく見かけるタイプ。 h4 { width:12em; border:solid #CCCCCC; border-width:0 0 1px 12px; padding:0.4em 0.4em; } 見出し h4 付... 続きを読む

なつみかん。 | borderの幅はwidthに含まれるのか

2006/02/23 116 users padding width widt なつみかん Box

borderの幅はwidthに含まれるのか 2006.02.24 Friday borderの幅はboxの外側にあるのか、内側にあるのか。これについては「URL入りのDOCTYPE宣言をした場合は外側に（標準モード）、そうでない場合は内側」と思っていた。padding についても同様に標準モード：実際の幅 = width + padding + border 互換モード：実際の幅 = widt... 続きを読む

NTTデータが独自開発オープンソース・セキュアOS「TOMOYO Linux」を公開，ポリシーの自動学習機能を備える：ITpro

2005/11/11 116 users ITpro width TOMOYO Linux グリ公開

NTTデータが独自開発オープンソース・セキュアOS「TOMOYO Linux」を公開，ポリシーの自動学習機能を備える記事一覧へ >> 関連記事）でTOMOYO Linuxを発表するNTTデータの原田季栄氏" width="200" border="0"> Linux Kernel Conference 2005（関連記事）でTOMOYO Linuxを発表するNTTデータの原田季栄氏 [画像のクリ... 続きを読む

作って理解するAjax (1)：IT Pro

2005/11/06 406 users Ajax width Ajaxアプリケーションまわり漢字

Ajaxアプリケーションの例。Webブラウザさえあれば，MS IMEのように，かな漢字変換できます。" width="200" border="0"> 図1 Ajaxを使ったFull IME Ajaxアプリケーションの例。Webブラウザさえあれば，MS IMEのように，かな漢字変換できます。 [画像のクリックで拡大表示] 最近，Webエンジニアのまわりで注目されている技術に「Ajax」(エイジャッ... 続きを読む