[B! css] shayashのブックマーク

jQueryの.cssとzoomでページ全体を拡大・縮小表示してみる｜DAD UNION – エンジニア同盟

jQueryでやる必要もないかもしれませんが、jQueryの.cssとzoomを使ってページ全体を拡大・縮小させてみます。 zoomさせるためのクリックボタンのCSSの記述 ※zoom表示させるためのボタンのcss記述です。必要に応じて変更して下さい。 <style type="text/css"> <!-- .cWrap{ width:800px; height:800px; margin:0 auto; border:solid 3px #333; } .clBtn{ width:120px; height:35px; background-color:#333; color:#fff; font-weight:bold; margin:20px auto; line-height:2.2em; cursor:pointer; } .clBtn:hover{ width:120px;

shayash 2020/09/07

jquery
css

リンク

背景の一部だけ色をつけたい場合のCSSスタイルシートの書き方 - Qiita

ブロック全体に背景色を付けるのではなく、ブロックの一部にだけ色をつけたい、という状況があったので、方法を考えてみた。目的: こんな感じで、青い背景を灰色のブロックの全体ではなく、左側だけに表示したい。 2017/08/16追記 @oreoさんから紹介していただきましたが以下の方法で簡単に実現できました。 CSSの線形グラデーション(linear-gradient) https://codepen.io/oreo/pen/jLabE 手っ取り早く動作確認したい方はこちらやりかた例えば、以下の図のようにブロックの左側に色をつけたい場合の指定方法。 containerというクラスの中に、background-blueという青の背景色を担当する要素とcontentsというメインのブロックがある。背景担当のbackground-blueはabsoluteにしてcontentsと重なるようにす

shayash 2018/12/20

css

リンク

【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | Recruit Tech Blog

ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ

shayash 2018/10/22

css

リンク

[CSS]順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し

Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。対応ブラウザはすべてのモダンブラウザで、IEは8+です。

shayash 2018/10/18

リンク

テーブルをレスポンシブデザインに対応するためのCSSを使ったレイアウトパターン - YCOMのホームページの制作・運営に役立つブログ

ホームページのことを中心にためになるかもしれないことをいろいろと書いています。ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。大阪のホームページ制作YCOMトップホームページ運営ブログレスポンシブデザインをしていると悩まされるんがテーブルのデザインです。 PCの画面と違って表示領域が狭いので、工夫しないとうまくテーブルを表示できません。 CSSを使ってテーブルをレスポンシブデザインするためのパターンを３つ紹介します。見出しとコンテンツを交互に縦表示テーブルの縦横を切り替えるテーブルそのものをスクロールレスポンシブでレイアウトを変更する一般的にテーブルはTableタグを使っているでしょう。その構成要素は、Tableはdisplay:tableが初期値で、tdやthタグはtable-cellが初期値になっています。これらを操作す

shayash 2018/10/05

css
table

リンク

CSSで背景グラデーション+アニメーションで変化する背景色を実装してみよう！ | WebLifeTimes

最近では鮮やかなグラデーションを背景などに採用するというのが1つのトレンドになっていますよね。単色の背景では味気ないと感じた時などに試してみるとインパクトを加えることができるのでオススメです。 CSS3からグラデーションをCSSのみで表現できることができるようになったこともあり積極的にと入れる価値があると思います。また、アニメーションも合わせることでより目を引く背景をつくることが可能です。それでは、CSSのbackgroundプロパティのlinear-gradientとanimationを利用して背景グラデーション+アニメーションを実装していきましょう！背景グラデーションをCSSで実装する方法背景をグラデーションにするにはbackgroundプロパティにliner-gradient関数を設定します。 background: linear-gradient(#FFB3E7,#FF54C

shayash 2018/07/26

リンク

画像を使わずにCSSだけで作る簡単なアイコン（丸、三角、四角）｜アド･エータイプ　スタッフブログ

ホームページを制作する際にアイコンを使用して構築することは多くあると思います。簡単なアイコンであれば画像を使わなくてもCSSだけでも作成することができます。画像をあまり使いたくない場合などに良いかもしれないです。今回は、丸、三角、四角などの簡単なアイコンを画像を使わずにCSSだけで作る方法をご紹介します。 CSSで簡単なアイコンの作成それぞれのCSSの記述例を記載します。丸のアイコン .circle { display: inline-block; width: 50px; height: 50px; background: #67A6EB; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; -ms-border-radius: 50px; border-radius: 5

shayash 2018/06/12

css

リンク

[css][html] divでtableを作る tableの行全体をリンクにする divの高さとborder-bottomを揃える display:table-cellは神です。

[css][html] divでtableを作る tableの行全体をリンクにする divの高さとborder-bottomを揃える display:table-cellは神です。スマホ用のサイトを作っててすんげーハマった。何にハマったって、こういう２列のリスト（表）を作り、さらに行全体をクリックしてリンクに飛ぶようにする。コレ、生半可なことじゃできないんだね〜。調べると display:block; にするとブロック全体がリンクされるって言うけど、これを表の中にある行にするってのが・・・。左右の列、セルの高さを揃えないといけない。全然できない。揃わないったら揃わない。 <table> → display:block;とするとリンクがセル単位になってしまう（行単位じゃない）。 <ul><dl> → ブロック全体以前に、左右の列の高さが変わるとborder-bottomがずれて表にな

shayash 2018/04/12

css

リンク

CSSで要素を横並びにする方法まとめ | HALAWATA.NET

CSSで要素を横並びにする方法をまとめてみました。それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;

shayash 2018/04/02

css

リンク

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。

shayash 2018/01/10

css

リンク

【CSS】TABLEのセルの中でURLが改行してくれない at softelメモ

問題 HTMLのtableの中のあるセル（td要素）内に、長いURLが入ると、突っ張り棒のようにそのセルの横幅が大きくなってしまう。 word-wrap:break-word;も効いてくれないみたい。テーブルのセルの幅を調整したいんだけど、Javascriptでも使わないとだめ？ TDの中で折り返してもらうには、どうするといい？解答例ここまでやれば、たぶん期待した表示になる。１、table要素に、幅（width）を指定する。２、td要素にもcol要素か何かで、pxでも%でもよいから、幅（width）を指定する。３、table要素に、CSSで table-layout:fixed する。４、td要素（もしくはその中の問題の要素）に、CSSで word-wrap:break-word する。以下、表示例をいくつか。１、２だけだと長い単語とみなされたものが突っ張り棒状態になる

shayash 2017/12/28

css

リンク

CSS で作るおしゃれなボックス（枠線・囲み枠）のデザインサンプル 13 選 - Naifix

CSS だけで作れるおしゃれなボックス（枠線・囲み枠）のデザインサンプルを紹介します。ブログ記事は文章がメインですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさにもつながります。

shayash 2017/09/22

css

リンク

【CSS】IE10・IE11でずれる・おかしい・表示しない等バグ発生時の対処法　CSSハック – 熊本のWEB制作SEO | poroaブログ

昔から言われているIEの独自仕様。他のブラウザではちゃんと見れてるのにIEだけ、みれない、若しくはずれているということが多々あります。きちんと、修正をすれば直る場合もあるのですが、どうしても直らないときは、CSSハックで解決しましょう。但し、W3Cで非推奨だそうなので、多様・過信は禁物です。 ※IEまたはCSSのバージョンアップ等で利かなくなる場合がありますのでご注意を。【E10以上】 @media all and ( -ms-high-contrast : none ) { .* { background : red ; } } 【IE11以上】 @media all and ( -ms-high-contrast : none ) { ::-ms-backdrop , .* { background : red; } } まずは、@media all and　でメディアタイプを

shayash 2017/05/15

css

リンク

Chromeにだけ効くCSSハック | クロジカ

@media screen and (-webkit-min-device-pixel-ratio:0) { .test { padding:0; margin:0; } } めったに使わないですが、どうしても必要になってしまった時用に…。

shayash 2017/05/15

css

リンク

IE11にのみ適用するスタイルシート - Qiita

いまどきIEだけ崩れてるなんてないだろ〜 ... ＿人人人人人人人人人人人人人人人人人人＿＞　 IEはGoogle Fonts 非対応　＜￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣ CSS hack を使用する弊社はほとんどの案件でブラウザ対応は最新版というありがたい環境だが、それでもIEは崩れたりすることがある。一番致命的なのがGoogle Fontsによる Webフォントが使用できないことだ。条件付きコメントはIE9までしか対応できないため、最新ブラウザなのにcss hackという古い手法に頼るというよく分からない状態になる。

shayash 2017/05/15

css

リンク

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-transf orm: translateY(4px); transf orm: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }

shayash 2017/05/05

css

リンク

フォーム入力時、変換中の文字が消える奇妙な症状 #CSS

とあるブログで検索してみようと文字を入力したところ、このような現象に。実はこのブログのお話だったのですが。このブログ「だけ」に当てはまるお話ではありませぬ。ぬ！検索ボックス、変換中の文字が消えてしまう〜お問い合わせフォームもなぜ？ググると発見！ Chromeで日本語変換中の文字色が変わる時の対処 – なりせなるてずなるほど！実はどちらも消えてしまっているのではなく、変換中のテキストに「font-color: #fff」のスタイルを適用してしまっているからなのですね。「::selection」を利用すると、こんな風にテキストを選択した時の背景色や文字色をスタイルシートでいじくれます。上のCSSはこんな感じ ::-moz-selection { background: #464646; color: white; } ::selection { background: #4

shayash 2017/03/28

css

リンク

リンク(aタグ)をブロック要素(div)全体に効かせるCSS

スマートフォンの普及で、レスポンシブデザイン、スマホファーストが推奨されつつある中、今までどおりにテキストにリンク指定するだけでは、ユーザビリティを損ねてしまう場合があります。例えばECサイトの検索結果一覧に表示される、画像とタイトル(テキスト)だけでなく、商品BOX(画像、タイトルが含まれる)全ての範囲にaタグ(リンク)を適用するCSSの書き方を記述します。 ※本文中にサンプルとして掲載しているBOXは全て、レスポンシブデザイン対応しているので、PCでご覧の方はブラウンザの幅を小さくしたり大きくしたりすることで、BOXにの伸縮を確認できます。 PR .link_box{ position:relative; width:30%; padding:5%; border:solid 1px #CCC; margin:0px auto 20px; } .link_box a{ positio

shayash 2016/12/26

css

リンク

「nth-child」と「nth-of-type」の使い方と違い

CSS3セレクタの中でも特に使い勝手がいいと個人的に思う「nth-child」と「nth-of-type」の使い方を紹介します。似ているようで若干違いますので正しく理解しましょう。基本的な使い方まず、「nth-child」と「nth-of-type」の基本的な使い方を説明します。 nth-childの説明一般的に「E:nth-child(n)」という風に表されていて、親要素のn番目の子要素であるE要素ということになります。具体的には以下のように使います。