【超簡単！】短いコードでおしゃれに！CSSまとめ
Web制作をしていく中で、「もっとスタイリッシュにしたい」「もっと凝ったコンテンツにしたい」といった不満がでてくると思います。
WordPressなどの専用プラグインなどを使えば色々とサイト全体をカスタマイズできますが、より細かいスタイリングのニーズを満たすためにはCSSの編集方法を理解しておくことが重要です。
今回はWeb制作を学習中の方に向けて、役立つ＆超簡単なCSSコードをご紹介していきます。
目次
役立つ超簡単なCSS -画像編集編-
画像を丸くする方法
<img class="example" src="image.jpg" alt="box">.example {
border-radius: 50%;
width: 100px; /* 画像の幅 */
height: 100px; /* 画像の高さ */
}上記のコードを使えば、画像を丸くすることができます。
実行結果
ポイントは「正方形」の画像を用意することです。
そして、「border-radius」を50％に指定することで四角が削除され、丸くなるという原理となります。
縦横比が１：１でない場合、真円にならないので注意してください。
縞模様の枠線を作る方法
<div class="example">
<div class="stripe-inner">
<p>これは縞模様のフレームです。</p>
</div>
</div>.example{
padding: 10px;
background-size: 10px 10px;
background-color: #blue;
background-image: linear-gradient(45deg,#f8b55d 25%,transparent 25%,transparent 50%,#f8b55d 50%,#f8b55d 75%,transparent 75%,transparent);
}
.stripe-inner {
background: #fff;
padding: 20px;
}ポイントは、「background-image: linear-gradient;」というCSSで、グラデーションを利用して縞模様にしています。
実行結果
単色の枠よりも見栄えを良くすることができます。
画像を自動でトリミングする方法
<img src="image1" alt="box1">
<img src="image2" alt="box2">
<img src="image3" alt="box3">
<img src="image4" alt="box4">img {
width: 250px;
height: 250px;
object-fit: cover;
margin-right: 3%;
}ポイントは、「object-fit: cover;」を指定して「縦横比」を維持しながら拡大縮小を図っている箇所です。
こうすることで、自然な形で画像がトリミングされるという原理です。
実行結果
上４つの画像はそれぞれサイズが異なりますが、均一かつ規則的に整理されています。
複数の背景画像にプロパティを適用する方法
<div class="example"></div>.example {
background-image: url("../img/redy.jpeg"), url("../img/ao-1.png");
background-size: 40% auto, cover;
background-position: center;
background-repeat: no-repeat;
width: 300px; /* 要素の幅 */
height: 200px; /* 要素の高さ */
}}複数の背景画像を要素に適用するために、「background-image」プロパティを使用します。
background-size プロパティで各背景画像のサイズを調整し、background-position プロパティで各背景画像の配置位置を指定しています。
また、background-repeat: no-repeat; は背景画像の繰り返しを制限し、要素に複数の背景画像が適用され、各背景画像が指定されたサイズと位置で表示されます。
実行結果
上記の画像は青色の上に赤色を重ねた画像で、指示通りに重なって表示されています。
最初に指定した画像が次に指定された画像に被さるように設定されます。
背景画像のサイズを調整する方法
<div class="example"></div>.example {
background-image: url("../img/background.jpg");
background-size: cover;
width: 100%; /* 要素の幅 */
height: 300px; /* 要素の高さ */
}背景画像のサイズを調整するために、「background-size: cover;」を使用します。
背景画像が要素全体に広がり、要素に合わせて適切にサイズが調整されています。
この際、「cover」の記述により縦横比は維持されたまま要素に適用されます。
実行結果
上記の画像は「オリジナル画像」と「サイズ変更後の画像」を縦並びにしたものになります。
同じ画像ですが、しっかりとサイズが変更されています。
CSSで縦横の値を指定すればオリジナル画像のサイズに関わらず、適切に画像が表示されるので、レイアウト崩壊の懸念は無くなります。
画像をモノクロームまたはセピア調に変換する方法
<img class="example" src="img/image.jpg" alt="モノクローム画像">.example {
filter: grayscale(100%);
}.example {
filter: sepia(75%);
}画像をモノクロームに変換するために、filter プロパティを使用します。「grayscale(100%)」の値は、画像を完全にモノクロームにします。これにより、画像が白黒で表示されます。
また、filterプロパティに「sepia」を指定すると、セピア調になり値を大きくするほどセピアが強くなります。
実行結果
上記の図形は順に赤色を「モノクロ」「セピア調」に変更した図形です。
こちらもホバーエフェクトと掛け合わせることによって、画像を「色有→色無」「色無→色有」という風に変化させることができるので、視覚効果をもたらすことができます。
画像をぼかす方法
<img class="example" src="image.jpg" alt="ぼかされた画像">.example {
filter: blur(5px);
}画像をぼかすためには、「filter」プロパティを使用します。
blur(5px) の値は、ぼかしの強さを指定します。数字が大きいほど、ぼかしの度合いが強くなります。
これによって、画像がぼけているように指定することができます。
実行結果
画像やテキストなどを強調させたい場合に、ホバーエフェクトと組み合わせて使用する場合が多いです。
ユーザーエクスペリエンスの観点からこのような視覚効果も有効になので、積極的に活用していきましょう。
役立つ超簡単なCSS -テキスト修飾編-
Webフォントを利用してテキストを表示する方法
<div class="example">Webフォントを使うテキスト</div>@font-face {
font-family: 'CustomFont';
src: url('customfont.woff') format('woff');
}
.example {
font-family: 'CustomFont', sans-serif;
}@font-face ルールを使用して、カスタムのWebフォントを導入します。
font-family プロパティでフォント名を指定し、src プロパティでフォントファイルのパスを指定します。
テキスト要素に対して、font-family プロパティでカスタムのWebフォントを適用します。これにより、指定したテキストが指定したWebフォントで表示されます。
実行結果
Webフォントは、GoogleやAdobeなどで配信されています。
さらに、自分のサーバーにwoff形式のファイルをダウンロードできるので、場面に合わせて使用するようにしましょう。
- Google Fonts：https://fonts.google.com/
- Adobe Fonts：https://fonts.adobe.com/
テキストに波線を付ける方法
<p class="exapmle">任意の文章の始まり~~<span>任意のワード</span>~~文章の終わり</p>span {
text-decoration: underline wavy #3498db;
}文章の中で、波線で強調したいワードを「spanタグ」で囲んで修飾するという流れとなります。
実行結果
テキストの上に記号を表示させる方法
<p class="example"><p>これは任意の文章です。~<span>任意のワード</span>~これは任意の文章です。</p>span {
-webkit-text-emphasis: triangle red;
text-emphasis: sesame triangle;
}text-emphasis プロパティを指定することで任意のテキストの上に記号を追加することができます。
実行結果
- dot：「•」
- circle：「●」
- sesame：「﹅」
- triangle：「▲」
- double-circle：「◉」
順に「•」「●」「﹅」「▲」「◉」と５つの記号を指定することができます。
文字を縦書きにする方法
<div class="example">縦書きの文字です。<br>上から下に、左から右に文章が続きます。</div>.example {
writing-mode: vertical-lr;
}writing-mode というプロパティを使用して、文字を縦書きにします。
「vertical-lr」 は、文字を「上から下に、左から右」に文章を表示させることができます。
一方で、「vertical-rl」を指定することで、「上から下に、右から左」に文章が表示されます。
実行結果
アクセントを加えたいときなどに活用できるCSSとなります。
超簡単なCSS -視覚効果編-
アコーディオン形式に展開する方法
<details>
<summary>項目１</summary>
項目１の内容です。
</details>
<details>
<summary>項目２</summary>
項目２の内容です。
</details>details {
transition: .5s;
}
details[open] {
background: #c3f6ff;
}ポイントは「transition」指定で、アニメーション仕様に設定しているところです。
実行結果
CSSだけで、アニメーションを加えることもできます。
フラットながらも立体的なボタンを作成する方法
<p><a class="example" href="#">立体的なボタン</a></p>.example{
color: #163962;
font-size: 30px;
border-radius: 5px;
text-decoration: none;
background: #77A8FE;
box-shadow: 0 3px #FFBF00;
position: relative;
display: inline-block;
top: -1px;
padding: 10px 20px;
}
.example:hover {
box-shadow: 0 1px #FFBF00;
top: 1px;
}ポイントは「position:relative;」を指定することで、相対的な移動を可能にして立体感を生み出している箇所です。
まず、CSSが読み込まれるとボタン部分が -1px分上に移動し、マウスが乗った後に元の位置（読み込まれた時点の位置）に戻り、そこから下に 1px分移動するという原理です。
実行結果
質素なボタンに立体感・動きが出ていい感じになりました。
ユーザーエクスペリエンスの観点からこのような視覚効果も有効です。
レスポンシブな動画を実装する方法
<div class="example">
<iframe src="video/video.mp4" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>.example {
max-width: 100%;
height: auto;
}レスポンシブデザインが適用された動画を表示するために、max-width: 100%; を使用して動画の幅が親要素に合わせて広がるようにします。
height: auto; を指定することで、幅に応じて適切な高さが自動的に設定されます。
上記のコードで、動画が様々な画面サイズに対応し、レスポンシブなレイアウトを実現することができます。
実行結果
動画のフレーム設定も、ユーザーエクスペリエンスの観点で重要な要素になってきます。
フレームの設定もCSSコードによって指定できるので、ぜひ積極的に使用していきましょう。
フォーカス時に伸びるテキストボックスを作成する方法
<input class="example" type="text">input[type="text"] {
width: 100px;
padding: 5px;
font-size: 15px;
border: 2px solid #ccc;
}
.example {
transition: width .3s;
}
.example:focus {
width: 200px;
}フォーカス時に伸びるテキストボックスを作成するために、transition プロパティを使用してアニメーションを設定します。
width を0.3秒で変化させることで、スムーズな伸縮効果を実現します。focus 擬似クラスを使用して、テキストボックスがフォーカスされたときに適用されるスタイルを指定します。
実行結果
ポイントは「focus」クラスでマウスをボックスの上に移動させた時点でのスタイルを設定している箇所です。
ボタンのデフォルトスタイルをリセットする方法
<button class="example">リセットされたボタン</button>.example {
appearance: none;
border: none;
background-color: transparent ;
padding: 0;
margin: 0;
font-family: inherit;
cursor: pointer;
}デフォルトに付与されているスタイルをリセットするために、appearance: none; を使用してボタンの外観をリセットします。
border: none; はボーダーを削除し、background-color: transparent; は背景色を透明にします。また、padding と margin は余白をゼロに設定し、font-family: inherit; はフォントを親要素から継承しています。
上記のCSSによって、ボタンに付与されているデフォルトのスタイルを消去することができます。
実行結果
ポイントは「apperarance:none」で、ユーザーサイドのCSSを取り消している箇所です。
この結果、ユーザーの実行環境に依存せずに、制作者が意図したCSSカスタムを適用できます。
線のオフセットを設定する方法
<div class="example">これはオフセットのテストです。</div>.example {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 35px;
}「outline-offset」を指定すると、囲み枠から「px」で指定した間隔を空けることができます。
実行結果
offsetの値を大きくするほど、内側と外側の枠の距離を離すことができます。
ボックスの「padding(パディング)」の概念と似ていると捉えていただいて問題ありません。
モーダルウィンドウを表示させる方法
<button id="myBtn">モーダルウィンドウ</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>This is a modal!</p>
</div>
</div>.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}ポイントとしては、「div」の中に「div」をネストする箇所です。
実行結果
モーダルウィンドウは、ポップアップ表示中はユーザーは他の操作ができなくなるので、警告など注意を促したい場合に使用することが多いです。
ドロップダウンメニューを表示させる方法
<div class="dropdown">
<button class="dropbtn">ドロップダウンメニュー</button>
<div class="dropdown-content">
<a href="#">リンク１</a>
<a href="#">リンク２</a>
<a href="#">リンク３</a>
</div>
</div>.dropbtn {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}ホバーエフェクトを利用して、「display：block」により「リンク１~リンク３」の内容を表示させています。
実行結果
メニューの上にマウスを乗せるだけで項目を表示されることができます。
複数のメニューを表示させたい場合などに使用してみましょう。
まとめ
今回は、初心者さんに向けて簡単で実用的なCSSをご紹介してきました。
CSSのプロパティを多く知っていれば、コーディングの幅を広げることができます。
特に、今回ご紹介してCSSは数行で完結するものがほとんどですので、何度も見返してマスターするようにしましょう。
この記事で登場したCSSを活かして、表現力を向上させていきましょう。
WithCodeを体験できる体験コース公開中！
体験コースの内容
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。体験コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
↓
