css 【CSS】2行目以降字下げ（インデント）をする方法
2行目以降を字下げ（インデント）したい場合のやり方です。結果以下のように2行目以降がインデントされます。-----------------------インデント：1行目はインデントされません。2行目以降は6文字分インデントされます。3行目-...
css
css 
css 【CSS】マウスオーバーしたときに画像が拡大（縮小）するやり方
ホームページとかで、マウスを画像の上にあてると画像がふわっと拡大・縮小されるページありますよね。そのやり方を紹介します。枠の中の画像にマウスのカーソルをあてると画像が拡大します。 ソースコードは以下です。<!DOCTYPE html><ht...
JavaScript 【javaScript・CSS】スクロールしたときに要素を下から上に表示させる
よく、企業のホームページなどで、スクロールをしていくと要素がひょこっと現れたりするサイトありますよね。今回はそのやり方書きます。サンプル<!DOCTYPE html><html><head> <meta charset="UTF-8"> <...
css 【css】画面の大きさによって改行の有無を変える方法
一文をページに表示したときに、PCだと一行で表示できるけど、スマホだと画面が狭いので変なところで改行されて見た目が悪くなってしまうことってありますよね。そんな時は、CSSだけで改行の有無を変えれちゃうんです！ パソコンで見ているならブラウザ...
css 【css】最後の要素以外にスタイルを適用する方法
リストなどで、最後のリストにはスタイルを適用したくない場合などがあると思います。その場合の方法を説明します。主に２パターンあります。①最後の要素のスタイルを上書きする。②最後の要素にのみスタイルがつかないようにCSSを記載する。②の方法がお...
css 【css】画像や要素を均等なサイズで並べる
画像や要素を画面に均等な横幅とかで並べたいときってありますよね。そんな時は、cssの「calc()」を使って計算式を指定すれば簡単にできるんです。imgに「width: calc(100% / 4);」を指定すると、横幅を四等分にした数字を...
css 【css】cssでスクロールを禁止にする（PC用）
デスクトップパソコンやノートパソコンでスクロールを禁止にする方法それは簡単！cssファイルでhtmlとbodyに「overflow: hidden;」を指定するだけ。ここでは実演はしません。※スクロールできなくなってしまうので。※この方法で...
css 【css】画面の特定の位置に文字などを固定表示させる
メニューなどを画面のある位置に固定表示させたい場合ってありますよね。スクロールしても画面の下部にボタンを表示し続けるようにしたいなど。そんな時はcssで「position: fixed;」を指定しましょう！・画面の下部にオレンジの横の枠があ...
css 【css】画像を任意の位置を基準に切り取る（トリミング）方法
前回の記事で、画像を正方形に切り取る（トリミング）の方法を紹介しました。上記の記事は、画像の中央を基準に切り取られていました。そこで、今回は任意の位置で切り取る方法を紹介します。「object-position: 横の位置 縦の位置;」を設...
css 【css】画像を正方形に切り取る（トリミング）方法
画像などを画面に並べるときに、それぞれの画面の縦横の長さが違うと並び方がめちゃくちゃになって見栄えが悪いですよね！みなさんがよく知っているラインなどは、アルバムで画像を見ると、すべての画像が正方形に切り取られて、きれいに整列してますよね。今...