#06 画像の角を丸めよう | はじめてのWeb制作 - プログラミングならドットインストール

動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合はヘルプ「動画が見られない場合について」もご覧ください。

本のレッスンが完了！

文字起こしを表示する « 前へ無料ユーザー登録して進捗を管理次へ »

さて、では前回見たようにこちらの画像にスタイルを設定して、丸い画像にしてみましょう。

CSS を記述できる箇所はいくつかありますが、今回は今まで見てきた body の中ではなくて、その上の head タグ内に style タグを設置して、その中に書いていきます。

無料登録するとお試し利用ができます

無料登録する

styleタグの中にCSSを書くことで、画像の角を丸めていきます。

style
border-radius

このレッスンの問題を報告する

Q1

画像を丸くする時の正しい記法は？（スペルミスに注意しましょう）
- img { border-radius: 50%; }
- img { borderledius: 50%; }
- border-img { radius: 50%; }
- image { border-radius: 50%; }
ユーザー登録（無料）をすると
ミニクイズで理解度をチェックできます
無料で新規登録

{ } の入力方法がわかりません

2022年1月27日

何故 body に書き込まないのですか？

2022年1月27日

すべての質問と回答（9）

プレミアムプランに登録すると、わからないところを現役エンジニアに質問できます。

質問機能とは？

素材ファイルをダウンロードするには無料ユーザー登録が必要です

無料ユーザー登録

ソースコードを閲覧するには無料ユーザー登録が必要です

無料ユーザー登録

このレッスンの問題を報告する

index.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>My Site</title> </head> <body> <img src="icon.png" alt="太郎のアイコン画像です"> <h1>山田太郎</h1> <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p> </body> </html>

サーバーとの接続が切断されました。ブラウザを再読込してみてください。

保存しました

ファイル構成

index.html

実行結果

ブラウザ実行環境を使ってみよう！

このレッスンでは、こちらにコードを打ち込みながら学習を進めていくことができます。

手元で実際に動作を確認しながら理解を深めていくと良いでしょう。

この機能を利用するには無料のユーザー登録が必要です。

ユーザー登録して使ってみる

はじめてのWeb制作

シンプルなプロフィールサイトを作りながらWeb制作の流れを体験していきます。 (詳細へ...)

ログインして連続再生する動画一覧 (11)

お手本のコードと比較

をお手本のコードと比較しています。異なる箇所は赤色で表示されています。両者のコードに異なる箇所はありません。

お手本のコード

あなたのコード