プログラミング 【CSS】縦に並んでるやつを横に並べたい
display: flexを使います。親要素に指定するのがポイントです。html<div class="container"> <div>A</div> <div>B</div> <div>C</div></div>css.containe...
css
プログラミング プログラミング 【CSS】マウスを乗せたら色が変わるようにしたい
:hoverという疑似クラスを使います。cssbutton { background-color: blue;}button:hover { background-color: red;}マウスが乗ったときだけbackground-colo...
プログラミング 【CSS】画像をぼかしたい
CSSのfilterプロパティで画像をぼかせます。img { filter: blur(4px);}数値が大きいほど強くぼけます。ホバー時だけぼかしたい場合はこう書きます。img:hover { filter: blur(4px);}fil...
プログラミング 【HTML/CSS】文字と文字の間を空けたい
文字間を広げるにはCSSのletter-spacingを使います。p { letter-spacing: 0.1em;}単位はemを使うのがおすすめです。フォントサイズに対する相対値になるので、文字サイズが変わっても比率を保てます。pxで指...
プログラミング 【CSS】テキストを…で省略する
コードテキストをpタグで囲み、その外側をdivタグで以下のように囲んでください。<div class="text-wrapper"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ...
プログラミング 【CSS】iphoneで、cssのrotateYが動かない
解決策CSSでrotateYを指定して、iphone以外では想定通りに動くのに、iphoneでのみ想定通りに動かないという現象が起きた場合、以下の指定を親要素にするとiphoneでも動かすことが出来ます。-webkit-perspectiv...
プログラミング 【HTML/CSS】テキストエリアのサイズを変更できないようにする
テキストエリアを普通に記述するとこうなります。↓これだと、テキストエリアの右下を引っ張って、ユーザーがサイズの変更を出来てしまいます。変更をさせたくない場合、resize: none;と指定することで、サイズ変更されるのを防ぐことが出来ます...
プログラミング 【CSS】画面サイズによって、テキストが下に飛び出してしまう
デザインの通り実装して、PC表示のときには問題なかったのに、SP表示にした時に想定していた枠からテキストが飛び出してしまうことがあります。それは、heightを指定しているための可能性があります。SPまたは、タブレット表示のときは、heig...
プログラミング 【CSS】忘れがちなletter-spacingとline-heightの計算方法
PhotoshopやXDで指定されている行間とトラッキングをCSSで表現する際の計算方法です。こちらの画像は、Photoshopでの表示です。上が行間、下がトラッキングです。letter-spacing（トラッキング）トラッキングの値 ÷ ...
プログラミング 【HTML/CSS】横棒を一線引きたい
横棒を一本だけ引く方法は、HTMLを使う方法とCSSを使う方法があります。hrタグを使うHTML の <hr> 要素は、段落レベルの要素間において、テーマの意味的な区切りを表します。例えば、話の場面の切り替えや、節内での話題の転換などです。...