css

プログラミング

【CSS】テキストを…で省略する

コード テキストをpタグで囲み、その外側をdivタグで以下のように囲んでください。 <div class="text-wrapper"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト...
プログラミング

【CSS】iphoneで、cssのrotateYが動かない

解決策 CSSでrotateYを指定して、iphone以外では想定通りに動くのに、iphoneでのみ想定通りに動かないという現象が起きた場合、以下の指定を親要素にするとiphoneでも動かすことが出来ます。 -webkit-perspect...
プログラミング

【HTML/CSS】テキストエリアのサイズを変更できないようにする

テキストエリアを普通に記述するとこうなります。↓ これだと、テキストエリアの右下を引っ張って、ユーザーがサイズの変更を出来てしまいます。変更をさせたくない場合、 resize: none; と指定することで、サイズ変更されるのを防ぐことが出...
プログラミング

【CSS】画面サイズによって、テキストが下に飛び出してしまう

デザインの通り実装して、PC表示のときには問題なかったのに、SP表示にした時に想定していた枠からテキストが飛び出してしまうことがあります。 それは、heightを指定しているための可能性があります。 SPまたは、タブレット表示のときは、he...
プログラミング

【CSS】忘れがちなletter-spacingとline-heightの計算方法

PhotoshopやXDで指定されている行間とトラッキングをCSSで表現する際の計算方法です。 こちらの画像は、Photoshopでの表示です。上が行間、下がトラッキングです。 letter-spacing(トラッキング) トラッキングの値...
プログラミング

【HTML/CSS】横棒を一線引きたい

横棒を一本だけ引く方法は、HTMLを使う方法とCSSを使う方法があります。 hrタグを使う HTML の <hr> 要素は、段落レベルの要素間において、テーマの意味的な区切りを表します。例えば、話の場面の切り替えや、節内での話題の転換などで...
プログラミング

visibility : hidden; とdisplay: none;の違い

visibility: hidden; 要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は visibility が visible に設定されていれば可視になります。(タブ順で操作された...
プログラミング

サーバーにアップしたcssが反映されない時の対処法

原因 cssに変更を加えて、サーバーにアップしたのに変更が反映されない場合、キャッシュの可能性があります。 キャッシュとは、一度開いたサイトのデータを一時的に保存しておけるものです。変更を反映前のCSSで取得したキャッシュが残っていると、た...