Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

「CSS」記事一覧

主にCSSに関する情報をまとめたカテゴリです。

CSSでスクロールさせたいけど、スクロールバーを非表示(隠す)にする方法

CSSでスクロールさせつつ、スクロールバーを非表示にさせる方法について説明します。-webkit-scrollbarではwebkit系のブラウザのみしか対応していないので、デザイン的に気になる方は最終的にスクロールバーを非表示にさせる方法が解決策になるかと思います。

CSSでスクロールバーのデザインをカスタマイズする方法 -webkit-scrollbarの解説

CSSの「-webkit-scrollbar」を使ってスクロールバーを装飾する方法について紹介します。-webkit-scrollbarを使うと、ブラウザデフォルトのスクロールバーを好みのデザインに装飾することができます。

CSSで画像を画面の横幅いっぱいに表示させる方法 background-size:cover

CSSで画像をモニター画面の横幅いっぱいに表示させる方法について説明します。PCやタブレットやスマートフォンなどの画面サイズが異なるデバイスでも、縦横比が崩れないように実装することが可能です。

CSSでパララックスのようなスクロールを表現する方法background-attachment:fixedの使い方

CSSのみだけでパララックスのようなスクールを表現する方法について紹介します。パララックスをWebページに取り入れるとスクロール時に動きのある魅了的な表現をデザインに加えることができます。基本的にJavaScriptで実装することが多いですが、今回はCSSの…

CSSのtext-overflow:ellipsisを使って文字数制限(...)を表示させる方法

CSSを使って文章に文字数制限を実装する方法について書きました。通常はPHPなどのプログラム言語を使って文字数制限することが一般的ですが、CSSだけでも簡単な文字数制限を実装することができます。

スマホ表示でtableの表を滑らかに横スクロールさせるCSSの記述方法

tableタグでコーディングした表は、表の項目の数が多いとスマホの画面内におさまりきれず、表が潰れてしまいます。今回はスマホ表示のtable表を滑らかに横にスクールさせる方法について紹介します。

input type="number"で表示される矢印ボタン(スピンボタン)をCSSで消す方法

HTML5のinput type="number"を使うとフォームの右側に矢印ボタン(スピンボタン)が表示されてしまいます。今回はCSSを使って、この矢印ボタンを非表示にする方法について紹介します。やり方は簡単な数行のCSSを記述するだけです。

CSSでaタグのリンクやJSのクリックイベントを無効にする方法【pointer-events:none】

CSSを使ってaタグのリンクやjavaScriptのクリックイベントを無効にする方法について書きました。CSSのpointer-events:noneを要素に指定すれば、手軽にリンクやクリックイベントを無効化することができます。

最速でWeb制作ができるようになる効率の良いHTMLとCSSの勉強方法。

HTMLとCSSを最速で効率的に勉強する方法について書きました。全くの初心者の方は本やオンライン学習サービスを使って基礎を学習したほうが良いです。基礎が固まっている方はどんどんゼロからサイト制作した方が、やればやるほど知識と経験が蓄積されてきます…

Android端末だと©(コピーライト)にCSS指定が適用されない原因と解決方法

Android端末では©(コピーライト)の部分にCSSが適用されません。これはAndroidにインストールされている日本語フォントが©に対応していないことが原因だそうです。今回はこのAndroid特有のバグを解決する方法を紹介します。

letter-spacingとtext-align:centerで中央揃えにしたら文字がずれた時の修正方法

画像出典:W3C CSSでtext-aline:centerをしたら最後の文字がずれてなんか変。 テキストや見出しを中央揃えにしたい時に「text-aline:center」を指定して、なおかつ「letter-spancing:1px」とかで文字間を微調整した時に、なぜかテキストが左よりにずれてしま…

ul liタグで横並びにした時にできる隙間をなくす方法

リストタグ(ulタグliタグ)にdisplay:inline-blockを適用した時にできる隙間を消す方法について書きました。HTMLとCSSを使ってコーディングする人向けに書きました。

スマホサイトで文字が左寄せになるCSSのバグを解消する方法

スマホサイトやPCサイトを作った時にスマホのブラウザでレイアウトを確認すると文字が左寄せになってしまうCSSのバグを解決する方法を紹介します。