タグ「border」 - はてブログ

タグ border

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

(1 - 25 / 37件)

【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]もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ | コリス

2018/05/16 72 users コリス font-size button要素 CSS ノウハウ

フォームをスタイルするのが苦手、という人は少なくないと思います。中でも、button要素はお問い合わせのようなフォームに限らず、さまざまなページに使用される使用頻度が高い要素です。 button要素はfont-sizeを適用するだけで見た目が大きく変わり、「border: 0;」を適用するとブラウザごとに異なる見た目になります。そんなbutton要素のデフォルトのスタイルを美しくするために、b... 続きを読む

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

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

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

CSSでリストの最初と最後のボーダー（border）を非表示にする方法 | NxWorld

2016/01/15 63 users NxWorld 最初 CSS ボーダー HTML

タイトル通り、リストでボーダー（border）を指定しているけど最初と最後のボーダーは非表示にしたいという時に使えるCSSの小ネタです。最初と最後とは言っていますが、要は最初のボーダーを非表示にするという感じで全部で4つの方法をご紹介します。以下で紹介しているのはいずれも上のイメージのようによく見るリストで、ボーダーが最初と最後に引かれていないものを実装する方法です。 HTMLは以下のように u... 続きを読む

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... 続きを読む

[iOS][Swift] UIKitをベンリにしてくれる Spring (2) ｜ Developers.IO

2015/06/22 51 users UIKit GitHub CocoaPods Swift アレ

はじめに Springは、Meng Toさんが GitHub で公開されているライブラリです。Core Animation を使ったアニメーションや、View の周りの border の調整など UIKit のアレやコレを、カンタンにしてくれます。今回は、ほかにどんなアニメーションが実現できるのかを見て行きましょう。サンプルプログラム前回は、プロジェクトに Cocoapods でプロジェクト... 続きを読む

【上杉隆が池田信夫氏に完全勝訴した事案についてのご報告】 - ニュース～多様な自由空間。NO BORDER<ノーボーダー>

2015/04/29 91 users 火付け役上杉デマ判決誹謗中傷

弊社代表・上杉隆がこの数年ネット上で、「デマ」「記事を盗用した」との誹謗中傷を受け続けてきたきっかけである「読売新聞の記事盗用疑惑」について、その火付け役の評論家・池田信夫氏らを相手取った訴訟が結審しました。東京地裁は平成27年3月16日に「上杉が記事を盗用したという事実は無かった」として池田氏に50万円の損害賠償と該当記事の全面削除を命ずる「上杉隆完全勝訴」の判決を下しました。〈事件の概要〉... 続きを読む

コピペでOK！WordPressのサイトマップを人気記事ランキングにする方法 - ゆめぴょんの知恵

2015/02/19 57 users ゆめぴょんコピペ WordPress 知恵 toc

WordPressの新テーマ・デザインに変更した時に、サイトマップについても人気記事順にしてみました。それに伴いずっと使ってたプラグインをまた1つ減らしました。そのカスタマイズ方法を紹介します。<style type="text/css"> .toc { margin: 18px 5px; background: #ffd; border: 1px solid #666; border-radiu... 続きを読む

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

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

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

Sublime Textで今いるインデントに縦線を引く | Border/memo

2014/03/23 93 users インデント memo Notepad+ WIn エディタ

会社ではコード書く業務が無いくせに(デザインしかしてない)エディタはPCにインストールしている。会社のPCはWindowsで、Notepad++というエディタを使っていた。最近MacでSublime Text 3を使い出したからWinもMacもST3にしてるんだけど、不満点があった。それは今現在いるインデントに縦線を引いて欲しいのに引いてくれないところ。説明が難しいんですが…。で、ググるのも難し... 続きを読む

「12の月のイヴ」が面白くてエロいとユーザーから超超超超超大好評！！:【2ch】ニュー速VIPブログ(`･ω･´)

2014/02/11 61 users イヴニュー速VIPブログ hspace ユーザー pict

2014年02月12日「12の月のイヴ」が面白くてエロいとユーザーから超超超超超大好評！！ <img src="http://livedoor.blogimg.jp/insidears/imgs/f/7/f7f81c29.jpg" width="600" height="425" border="1 alt="z0" hspace="5" class="pict" /> １月の注目作「minor... 続きを読む

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

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

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

【お詫び】 - ニュース～多様な自由空間。NO BORDER<ノーボーダー>

2013/05/26 60 users Togetter 苦言改訂ノーボーダー騒動

まず初めに、今回、弊社広報の行なったツイッター上の「まとめ」（togetter）の改訂に際し、茂木健一郎様（NOBORDERダイバシティ・アドバイザー）を同ツイッター上での騒動に巻き込んでしまったことに心からお詫び申し上げます。茂木様から頂戴した苦言、得心しました。ありがとうございました。茂木様のお言葉を受けて茂木様やご心配くださる方々と正直に向き合いたいと思い今回の経緯の説明をさせていただき... 続きを読む

攻殻機動隊ARISEで草薙素子が所属する陸軍「501機関」について語られる特別映像「DECODE 501FILE」 - GIGAZINE

2013/05/17 62 users バトー decode 荒巻草薙 GIGAZINE

草薙と公安9課の荒巻、後に攻殻機動隊のメンバーとなるバトーやトグサらとの出会いとともに、電脳ウィルス「ファイア・スターター」を巡る壮絶なアクションと電脳戦が展開されるのが、攻殻機動隊の始まりとも言える「エピソードゼロ」を描く「攻殻機動隊ARISE」、その1つめのエピソードである「border:1 Ghost Pain」にて登場する陸軍義体化部隊「501機関」について語っているのが以下のムービーにな... 続きを読む

【ブログ】imgタグに「 border="0" 」が入っていると減点対象になるを知っていますか？MarsEditを使っているブロガーは要注意です。 | Halfway

2013/03/30 55 users MarsEdit Halfway 減点ボーダー IMGタグ

僕はMacでブログを書くときはいつもMarsEditというブログエディタを使っています。画像をアップロードしたときにimgタグ内にborder="0"というものが入力されていて、これはなにを指定しているものなのか調べてみました。するとこれはW3CのHTML文書では減点の対象になっているようなんです。スタイルシート imgタグにboeder=”0″を使わずスタイルシートでボーダー0にする | テ... 続きを読む

杉本有美にこんなグラビアをさせる弱小事務所ｗｗｗ　画像8枚 : モノが違います速報-赤鯉魂-

2013/01/24 80 users 杉本有美 Alt Tumbl グラビア赤鯉魂

1：風吹けば名無し：2012/05/25 07:20:53 ID:uMFl7ZTg <img src="http://blog-imgs-43-origin.fc2.com/r/3/0/r30r30/2012120416263970b.jpg" alt="杉本有美にこんなグラビアをさせる弱小事務所ｗｗｗ" border="0" width=300" /> http://24.media.tumbl... 続きを読む

画像の最大幅を calc() で制御する – terkel.jp

2012/12/16 99 users padding パディング Calc img terkel

画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (... 続きを読む

[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]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ | コリス

2011/07/21 89 users コリス fff outline CSS ボーダー

Method 1: borderとoutline borderプロパティとoutlineプロパティを併用します。この方法はoutlineプロパティをサポートするブラウザだけうまくいきます、つまりIE6/7以外です。 .one { border: solid 6px #fff; outline: solid 6px #888; } この方法が機能するのは、outlineがボックスの外に配置されるた... 続きを読む

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

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

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