border-bottom では実装できない！ 一番最初に思いつく実装方針は border-bottomを使って要素の下に線を追加することです。 一見するといい感じに見えます。 しかし、この実装方法では、複数行になったときにレイアウトが崩れてしまいます。 ノートのように各行に線が引かれるようなレイアウトになって欲しいですよね。 そんな時はどうしたらいいのでしょうか。 linear-gradient と background-size！ 今回使うのは、linear-gradient と background-size を用いる方法です。 linear-gradient linear-gradientはグラデーションを作るときに使う関数ですね！ linear-gradient(色1, 色2) の形式で指定します。 例では #ccc 色から透明 (transparent)に変化させています。 さ

tdにposition: relative;をかけていると、firefoxやIEで罫線が切れてしまう テーブルをcssスタイリングしていてFFやIEで罫線がどうしても切れてしまう場合がある。その場合は、background-clip: padding-box;を指定することで解消できる。 参考：MDN：background-clip https://developer.mozilla.org/ja/docs/Web/CSS/background-clip サンプル（上：chrome表示、下：FF表示）

まずは1pxの縁取り CSSのtext-shadowのみを使って、白文字+黒の1px縁取りをしてみます。 考え方としては ぼかしを0pxにして塗りつぶしの影を作る 1pxずつずらして複数指定することで縁取りっぽく見せる LIGさんの記事で素晴らしい解説がありました。 2.テキストシャドウ使う方法 text-shadow: black 1px 1px 0px, black -1px 1px 0px, black 1px -1px 0px, black -1px -1px 0px; 引用元：IEでもキレイ！ブラウザ上でアウトライン（縁取り）を表現する方法 ▼1px四方向の出力サンプル▼ 1pxの縁取りであれば、上下左右の指定だけで結構いい感じになります。 2017/7/28追記 1pxでキレイな縁取り 上記の方法だと、右下、左上、左下、右上の4方向なので、上下左右に縁取りがないことになってまし

昨日Twitterのタイムラインで下記を見かけました slickのがたつきの件、NxWorldさんのサイトのサンプルでもなってるからやっぱり自分だけじゃないな。／https://t.co/EJ5swAVGAu — ヤマシタレイコ｜OOOPEN (@OOOPEN_jp) January 30, 2019 以前このプラグインを使った時に同じような不具合に直面し、自力で何とかした経験があるので、同じように困っている方の参考になれば。。 現象 ここのスライドのNextとかPrevを押すと分かりますが、2周目の最初のスライドに来た時と、最初のスライドから最後のスライドに戻る時にがたつきます。 これは.slick-currentというクラスが来た時に透過にしたり大きくしたりしているのですが、がたつくパターンの場合クラスが付与されるまでにDOMの操作が発生しその処理時間の差でがたつくのだと思います。 対

我々は何年待ったのか？このお手軽外接リサイズobject-fitの登場を！なのにIE11非対応って哀しすぎる。またしてもこの余生ブラウザにもどかしい思いを味わっているのだ。 Edge非対応OS、Windows7のサポート終了まで約1年半（2020年1月終了！）。だが、大丈夫。手はあるんです！ 目次： object-fitとは何ぞや 配置した画像 object-fitのコード いろいろなobject-fit object-fit前のおもひでぽろぽろ 大問題！IEで見たらfillってるぢゃないか！！ IE11の寿命おさらい 1年半も待てない！IE対策してくれるJSファイル 忘れちゃならねぇCSS追記でIE対策完了！ object-fitとは何ぞや たとえばこんな記事一覧があったとする。 この左側の画像に、object-fitを使っています。 いったい何をしているのか。ここでやっているのは「外接

先週インフルエンザに感染して、ダウンしてました ishida です。 今年のインフルエンザは感染力がかなり強いようで、 次女→自分→長女→嫁（いまココ）と感染してしまいインフル一家となってしまいました。。。 助けてぇ〜。 急な高熱・のどの痛み・関節痛などの症状がでたら、すぐ病院に行きましょうね。 さて今回は、先日コーディング中に遭遇したChromeブラウザのみにおきた現象を回避するための Tips を紹介します。 最近のHTMLコーディングでは、ボタンなどのマウスオーバーエフェクトを CSS で対応することが多いです。よく使うのは、以下のようなものです。 ソースコード HTML <p class="button"><a href="#"><img src="hogehoge.png" alt="ボタン" width="300" height="80"></a></p> .button {

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法 CSSで作ったボタンをマウスオーバーしたときに色を変えたい場合、「transition」を使うとふわっと色が徐々に変化するアニメーション効果を簡単に加える事ができます。 「transition:1s」なら1秒、「transition:0.5s」なら0.5秒のアニメーションになります。

bxSlider はとても便利なのですがちょっと作り込もうと思うとやはりCSSなどで手を入れなくてはいけません。 特によく使われるであろう、画像を3つ表示させて両端の画像を切れさせるというようなことは標準ではできないです。 なので、CSSを使って実装する必要があります。 Codepenにデモを置いておきますのでコードと動作を確認して下さい。 See the Pen Centering bxSlider (support Responsive) by Shingo Matsui (@shingorow) on CodePen. こちらにもコードを掲載しておきます。 <div class="slider-wrapper"> <div class="slider"> <div class="slider-1 slide"> <p>Slider 1</p> </div> <div class="s

jQuery などの JavaScript を活用して ul / ol / li 要素をアコーディオンさせるときなどに、 「・」のマーク(記号)を非表示にできない・消せない問題があります。この問題は特に IE (10, Edge など) で起こります。 一般に要素の記号を消すためには list-style-type: none を設定します。 デバッグしてみるとこの CSS は適用されているのですが、対象の要素が再描画されるまでこの問題は発生します。 問題の発生条件 概ね次のような条件で発生するようです。 ul / ol / li 要素が何かしらの CSS の設定によって不可視の状態のまま描画される。 該当する要素が JavaScript や hover などのイベントによって可視化されるとき、記号が描画されたままになる。 該当する要素が一度可視化された後に、イベントやアクションによって再

この記事には、サンプルへのリンクを掲載しておりますが、OS側の設定などで『スクロールバーを非表示』などにしていると、何言ってんだこいつってなると思います。 Macの方は [システム環境設定]-[一般]からスクロールバーを表示するようにしてから読むとわかりやすいと思います。 Windowsは標準で出てると思います。自信ないですけど。 本記事のサンプルです。適宜ご参照ください。 http://codepen.io/naru0504/pen/dYpLJg ※ styleタグとか使っているのはQiita上で動くと勘違いしていたからです。いやだってKobito上で適応されていたんですもん……。公開してから知ったんですもの……。書きなおすのがめんどうでそのままにしてあります。 スクロールバーを消してほしいという要望があった。 今回の記事では以下のような例を扱います。あるエリアに固定されていて、スクロー

このようにtableを横スクロールさせるには、HTMLとCSSを編集すればOKです。 1、HTMLの編集 まずは、tableを「divタグ」で囲みます。ここでは、そのdivタグに”scroll”というclass名を付けました。 <div class="scroll"> <table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <th>商品名</th> <td colspan="5">インターネット回線</td> </tr> <tr> <th>初期費用</th> <td colspan="5">事務手数料3000円 ＋ 標準工事費0円</td> </tr> <tr> <th>プラン</th> <td>30Mコース</td> <td>50Mコース</td> <td>100Mコース</td> <td>200Mコース</td>

CSS3から使えるようになった擬似セレクタ、 そのなかで「～以外」を指定できる:not()を複数指定する方法をご紹介します。 たとえば .typeA または .typeB ではない親要素を持つものへスタイルを適用 というケースです。 :not()は、自分でHTMLとCSSをセットで設計する場合に使う機会はなかなかないのですが 既存のHTMLに手を加えることができず、CSSだけで見た目を変更しなければならない案件で使うことがあります。 なお、擬似クラスはIE8では使えませんのでご注意ください！ Internet Explorer 8では使えないCSS :not()の基本的な使い方 たとえば、こんなHTMLがあり 文章の左右にはマージンを設けて、 見出し<h1>と、画面幅いっぱいの画像を入れる.wideView はマージンなしにしたい場合。 <div id="container"> <h1>見

以前「object-fitをつかって画像をボックスいっぱいに表示させる方法」でobject-fitを紹介いたしました。私も非常に便利でよく使っているプロパティーの一つです。 そして使えば使うほど、PC向けにもこのプロパティーは使用したくなります。 そこで問題になるのがInternet Explorer（以下IE）とEdgeです。 object-fit-imagesを使用して対応する 先述のブラウザはobject-fitに対応していません。そこで「object-fit-images」というライブラリを使用します。 まずは上記のページにアクセスして緑色の「Clone or download」ボタンを押してライブラリをダウンロードしてください。 HTML まずはjQueryの呼び出しの後に、ライブラリを呼び出します。 このライブラリは「dist」フォルダの中に格納されています。 <script

2017.09.062021.03.24 ホームや商品紹介ページなどで多く使われるスライドショー。単純に画像をスライドさせるだけでは面白くないという方におすすめな小技を紹介します。 今回紹介するスライダーのプラグインはSwiperを使用しています。レスポンシブ対応で人気のslickでも同じことができますが、同じくレスポンシブ対応でjQueryが不要なSwiperを採用しました。 動作サンプルページ実際のアニメーションサンプルはこちら。 サンプル01スライド上にテキストがフェードインで現れます。 HTML・CSS<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="s-fade-wrap"> <img src="img/img-640x480.gif

斜めにした要素を横並びで配置する機会があったので、CSS3のtransform:rotateで斜めにしたり、平行四辺形に画像をトリミングした備忘録です。 まずは、要素を斜めにしてみます。 斜めにするには transform:skew(X軸,Y軸); を使います。 単位は”deg”です。 ■html <div id="slanting01"><a href="#"></a></div> ■CSS #slanting01{ width:30%; height:100px; background:#FF7373; margin:0 auto; text-align:center; transform:skew(15deg,15deg); } DEMO この場合、上下左右が15°の斜めになります。 X軸もY軸も斜めにすると思ってた以上に要素に高さが出ました。 ここからは平行四辺形です。 今回は上下

transitionやtransformでCSSアニメーションを要素にかけた時に、要素の幅が一瞬だけ伸縮してしまったり、ちらついてしまう場合があります。私もよく以下のようなCSSを指定することがあるのですが、アニメーション時に画像が一瞬だけ伸縮してしまうことがあります。 a img{ transition:all .3s ease-in-out; } a:hover img{ opacity:0.8; } このような現象を対処するための方法をご紹介したいと思います。 CSSアニメーションで要素が一瞬伸縮したりちらついたりする場合の対処法 要素が伸縮したりちらついてしまう現象が発生する場合は、アニメーションを指定している要素に対して、以下のCSSを追加します。 a img{ -webkit-backface-visibility:hidden; backface-visibility:hid