Q&A
こんばんは。
コードの提示では,MarkDown記法に基づき、コードブロックで囲ってください。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>
cssの方でdisplayいじったりtext-align:center;やmargin:0 auto;やったりしてみたんですが、出来ませんでした
>cssの方でdisplayいじったりtext-align:center;やmargin:0 auto;やったりしてみたんですが、出来ませんでした
cssのコードが提示されていないのですが、提示してもらえないでしょうか?自身で行ってみたコードも明示してください。
cssここの部分に関しては、何もないです。一応全文送りますね。自身で行ってみたコードは質問部分に書いてある通りです。
!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="UTF-8">
<title>iSara[イサラ」｜バンコクのノマドエンジニア育成講座</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<img src="画像/isaralogo.png" alt="iSaralogo" height="45"width="128" >
<p>バンコクのノマドエンジニア育成講座</p>
<div class="btn1">
<a href="#">お問い合わせ / 資料請求はこちら</a>
</div>
</div>
</header>
<div class="main">
<section class="section1">
<div class="container">
<p>プログラミングで</p>
<p>人生の安定を手にいれよう</p>
<img class="mainlogo" src="画像/isaralogo.png" alt="isaralogolarge">
<h1>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</h1>
</div>
</section>
<section class="section2">
<div class="container">
<div class="section2-message">
<p>まずは２０日間で、</p>
<p>月１０万円稼げるスキルを手にいれよう。</p>
<p><span class="warning">※受講料金は実質０円です。詳しくは資料請求をどうぞ。</span></p>
</div>
<div class="btn2">
<a href="#">お問い合わせ&資料請求はこちら</a>
</div>
<p style="font-size:150%;">第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</p>
<p style="font-size:150%;">第７期生：2020年2月17日 ~ 2019年3月7日＊締め切りました</p>
<p style="font-size:150%;">第７期生：2020年2月17日 ~ 2019年3月7日＊締め切りました</p>
<p style="font-size:150%;">第8期生：2020年4月〜5月ごろを予定＊資料請求受付中です</p>
</div>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>
</section>
<div class="freedom">
<div class="txtbox">
<h1 class="txtl">エンジニアとして本当の自由を手に入れるには?</h1>
</div>
<div class="freedom-text">
<p class="txtm">エンジニア需要の高まりに伴い、プログラミングスクールが増えています。</p>
<p class="txtm">しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p><br/>
<p class="txtm">これで本当にいいのですか？</p>
<p class="txtm">日本人エンジニアはアメリカと較べて給料が格段に低い。</p>
<p class="txtm">その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです。</p><br/>
<p class="txtm">スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。</p>
<p class="txtm">そこで必要なのが<span class="underline"> 「稼ぐ力」</span>です。</p>
</div>
</div>
</div>
</body>
</html>
{
box-sizing:border-box;
}
body{
color:rgba(0,0,0,0,8);
margin:0;
}
header{
position:fixed;
width:100%;
background-color:white;
z-index:999;
}
header img{
width:130px;
}
header > .container > p{
display:inline-block;
font-size:12px;
font-weight:600;
position:relative;
bottom:10px;
color:#333333;
}
.btn1{
float:right;
width:260px;
height:44px;
border:1px solid white;
background:#da6b64;
border-radius:25px;
}
.btn1 a{
color:white;
font-size:12px;
text-decoration:none;
display:block;
height:100%;
padding-top:11px ;
top:0;
left:0;
font-weight:normal;
text-align:center;
}
.btn1:hover{
background:#d84940;
}
.section1 > .container{
padding:15px 10px;
height:75px;
}
.main{
height:1000px;
padding-top:75px;
letter-spacing:1px;
}
.section1{
background-image:url(/main.jpg);
background-position:center;
background-size:cover;
}
.section1 > .container{
height:500px;
text-align:center;
padding:80px 0;
}
.section1 p{
font-size:24px;
font-weight:600;
margin-bottom:15px;
}
.mainlogo{
width:330px;
margin-bottom:10px;
}
h1{
font-size:16px;
}
.section2{
background:#ebb94d;
color:white;
text-align:center;
margin-bottom:50px;
}
.section2 .container{
padding-top:20px;
}
.section2-message p {
font-size:16px;
font-weight:normal;
}
.btn2{
border:1px solid;
border-radius:25px;
background:#da6b64;
width: 800px;
height: 75px;
margin: 0 auto;
}
.btn2 a{
color:white;
font-size:18px;
text-decoration:none;
display:block;
height:100%;
padding:25px 50px;
top:0;
left:0;
font-weight:normal;
text-align:center;
cursor:pointer;
}
.warning{
background:white;
color:#da6b64;
font-size:14px;
font-weight:600;
border-radius:25px;
line-height:8px;
}
.section2 li{
list-style:none;
display:inline;
}
/* ///freedom//// */
.freedom{
background-image:url("/introbottom.jpg");
background-size:cover;
height:587px;
text-align:center;
width:1024px;
}
.txtbox{
width:860px;
max-width: calc(100% - 40px);
margin:0 auto;
position:relative;
}
.freedom .txtbox .txtl{
padding:30px 0 30px 0;
}
.freedom-text p {
font-size:20px;
margin:0;
}
.freedom > .txtbox > h1{
font-size:28px;
}
反応がなかったようなので、繰り返します。
コードの提示では,MarkDown記法に基づき、コードブロックで囲ってください。
当方で、検証してみることができませんよ。
>cssここの部分に関しては、何もないです。一応全文送りますね。自身で行ってみたコードは質問部分に書いてある通りです。
了解しました。
<div class="snsbtn">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>
</div>
回答1件
0
写経元のソースから抜き出してみました。
html
1 <ul class="sns list-inline" style="text-align: center; margin-top: -13px;"> 2 <li> 3 <div class="tw-btn"><a href="https://twitter.com/share" class="twitter-share-button" rel="nofollow">Tweet</a></div> 4 </li> 5 <li> 6 <div class="fb-like" data-href="https://isara.life/" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> 7 </li> 8 </ul>
css
1.list-inline { 2 padding-left: 0; 3 margin-left: -5px; 4 list-style: none; 5} 6.list-inline > li { 7 display: inline-block; 8 padding-right: 5px; 9 padding-left: 5px; 10} 11.tw-btn { 12 position: relative; 13 width: 75px; 14 height: 22px; 15}
投稿2020/03/06 03:21
総合スコア36115
あなたの回答
tips
プレビュー
