Q&A
「ローカルではないファイルの指定方法」とは具体的にどのような物でしょうか。
”現在”
topという空divを作り、そこにcssでパスをローカルにある画像ファイルを設定、repeatを横に行なっていました。
”やりたいこと”
空divではない方法で画像を設定する
パスをローカルではないファイルの指定方法で指定する
repeatを横にさせる
こちらの一番上の赤青
を下の図のように
連続させたいです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<meta charset="UTF-8"> 4<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6<meta name="format-detection" content="telephone=no"> 7<link rel="stylesheet" href="./css/reset.css"> 8<link rel="stylesheet" href="./css/style.css"> 9<title></title> 10<head></head> 11<body> 12 <div class="wrapper"> 13 <div class="top"> 14 </div> 15 <div class="container"> 16 <div class="header clearfix"> 17 <img src="./img/logo.jpg" > 18 <div class="header-list clearfix"> 19 <ul> 20 <li>ホーム</li> 21 <li>自己紹介</li> 22 <li>作品</li> 23 <li>お問い合わせ</li> 24 </ul> 25 </div> 26 </div> 27 <div class="main"> 28 <div class="main-top"> 29 <div class="main-picture"><img src="./img/hero.jpg" ></div> 30 <img src="./img/shadow.jpg"> 31 <h1 align=center>世界中を旅するフォトグラファーです。</h1> 32 </div> 33 <div class="main-bottom"> 34 <div class="main-left"> 35 <h4><span>|</span>最新の作品</h4> 36 <ul class="picture-list picture"> 37 <li><img src="./img/thumb1.jpg" ></li> 38 <li><img src="./img/thumb2.jpg" ></li> 39 <li><img src="./img/thumb3.jpg" ></li> 40 </ul> 41 <ul class="picture-list2 picture"> 42 <li><img src="./img/thumb4.jpg" ></li> 43 <li><img src="./img/thumb5.jpg" ></li> 44 <li><img src="./img/thumb6.jpg" ></li> 45 </ul> 46 </div> 47 <div class="main-right"> 48 <h4><span>|</span>自己紹介</h4> 49 <p> 50 こんにちは、Manaです。世界中を 51 旅しながら写真を撮っています。 52 <a href="https://twitter.com/login?lang=ja">Twitter</a>や<a href="https://twitter.com/login?lang=ja">Facebook</a> 53 やってます。 54 お気軽にフォローしてください！ 55 <a href="https://twitter.com/login?lang=ja">ブログ</a>もチェックしてみてくださ 56 い。これはデモサイトです。実際 57 は写真苦手です。はい。 58 こんにちは、Manaです。世界中を 59 旅しながら写真を撮っています。 60 <a href="https://twitter.com/login?lang=ja">Twitter</a>や<a href="https://twitter.com/login?lang=ja">Facebook</a>やってます。 61 お気軽にフォローしてください！ 62 <a href="https://twitter.com/login?lang=ja">ブログ</a>もチェックしてみてくださ 63 い。これはデモサイトです。実際 64 は写真苦手です。はい。 65 </p> 66 </div> 67 </div> 68 </div> 69 </div> 70 <div align="center"> 71 <img src="./img/スクリーンショット 2019-10-03 21.31.07.jpg "> 72 </div> 73 </div> 74 </div> 75</body> 76</html>
CSS
1.wrapper{ 2 background-color: #EEE4CA; 3} 4 5.top { 6 height: 20px; 7 background-image:url(); 8 background-repeat: repeat-x; 9 margin-bottom: 40px; 10} 11 12.container{ 13 margin:0 auto; 14 width: 960px; 15} 16 17.header{ 18 height: 100px; 19} 20 21.header-list{ 22 float: right; 23 padding-top: 35px; 24} 25 26.header-list li{ 27 float: left; 28 margin-right: 48px; 29 color: #5B616A; 30} 31 32.header-list li:last-child{ 33 margin-right: none; 34} 35 36.main{ 37 margin: 40px 0px; 38} 39 40.main-picture{ 41 border: 5px white solid;; 42} 43 44.main-top h1{ 45 color: #5B616A; 46 font-size: 25px; 47 width: 100%; 48 margin: 0 auto; 49} 50 51.main-bottom{ 52 display: flex; 53 margin-top: 30px; 54} 55 56.main-left{ 57 width: 650px; 58} 59 60.main-left h4{ 61 color: #5B616A; 62 font-size: 20px; 63 margin-bottom: 15px; 64} 65 66span{ 67 color: red; 68 font-weight: bold; 69} 70 71.picture { 72 display: flex; 73} 74 75.picture li { 76 margin: 5px; 77 border: 5px white solid;; 78} 79 80.main-right{ 81 color: #5B616A; 82 padding-left: 30px; 83 width: 240px; 84} 85 86.main-right h4{ 87 font-size: 20px; 88 padding-bottom: 15px; 89} 90 91.clearfix::after { 92 content : " "; 93 display : block; 94 clear : both; 95}
回答1件
0
ベストアンサー
空divではない方法で画像を設定する
wrapperに背景を指定すればいいかと思います。
css
1.wrapper{ 2 background-color: #EEE4CA; 3 background-image:url(); 4 background-repeat: repeat-x; 5}
パスをローカルではないファイルの指定方法で指定する
普通にURLを書けばいいかと思います。
css
1 background-image:url(https://teratail-v2.storage.googleapis.com/uploads/contributed_images/5e793a87c262589aa85b6de8c810070f.jpeg);
repeatを横にさせる
今のままで横方向に繰り返し表示になっています。
css
1 background-repeat: repeat-x;
投稿2019/10/10 01:26
編集2019/10/10 01:28
総合スコア36928
あなたの回答
tips
プレビュー
