CSSのソースコードが無かったので作りました。
該当チャンネル「アキユキ / Web制作チャンネル」
対象動画「WordPressの基礎解説とデモサイト制作(連結講座#1)」
自作CSSソースコード(コピペでOK)
※注意事項
- 主が動画のウェブサイトを真似て自作したものです。完全に同じではありません。
- CSS以外は動画内に写っているので、自力で頑張ってください。
- 問い合わせフォームなど、主の技術力と体力で作れなかったものは作ってません。
style.cssにそのまま貼り付けてもらえれば、動作するように作っています。
@charset "UTF-8";
/*
Theme Name
Version:1.0.1
Author:
*/
/* ここから共通設定 */
html,
body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,
sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,figcaption,figure,footer,header,hgroup,menu,nav,section,
summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
:root {
--color-b:#0395dc;
}
body{
font-family: "Hiragino Kaku Gothic ProN",Meiryo, sans-serif;
color: #333;
font-size: 15px;
line-height: 1.6;
}
body *{
box-sizing: border-box;
}
h1{
margin-bottom: 30px;
}
ul {padding: 0;}
li {list-style: none;}
a {
text-decoration: none;
color: var(--color-b);
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
a:hover{
text-decoration: underline;
}
#wrap{
width: 100%;
height: auto;
}
img{
max-width: 100%;
height: auto;
}
.w_inner{
width: 1200px;
margin-right: auto;
margin-left: auto;
}
.btn_stn{
text-align: center;
}
.btn_stn a{
display: inline-block;
padding: 6px 10px 3px;
border: 1px solid var(--color-b);
}
/* ここまで共通設定 */
/* 本文 */
body{
line-height: 1;
-webkit-text-size-adjust: 100%;
}
body header {
margin-bottom: 50px;
padding-top: 20px;
padding-bottom: 20px;
}
header div.w_inner div#top{
height: 50px;
width: 100%;
padding-left: 100px;
display: flex;
align-items: center;
}
header div.w_inner nav#main_menu ul{
display: flex;
justify-content: end;
gap: 40px;
padding-right: 10%;
}
header div.w_inner nav#main_menu ul li{
padding: 10px 0;
}
header div.w_inner nav#main_menu ul li a{
color: var(--color-b);
}
header div.header_img img{
max-height: 400px;
width: 100%;
object-fit: cover;
}
/* ここからコンテンツ */
div#wrap div#content section{
margin-bottom: 50px;
}
div.sec_head{
text-align: center;
font-size: 28px;
font-weight: bold;
margin-bottom: 30px;
}
div.lead {
text-align: center;
margin-bottom: 20px;
}
/* フロントサービス */
div#wrap div#content section.front_service ul{
display: flex;
justify-content: center;
gap: 20px;
}
div#wrap div#content section.front_service ul li{
width: calc(33.3%-20px);
text-align: center;
border-radius: 3px;
border: 1px solid var(--color-b);
padding: 20px;
}
div#wrap div#content section.front_service ul li div.ttl{
text-align: center;
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
}
div.descri {
line-height: 1.6;
font-size: 13px;
}
/* フロントニュース */
section.front_news div.news_list{
margin: 0 auto;
width: 50%;
border: 1px solid var(--color-b);
padding: 30px 40px;
}
section.front_news div.news_list ul{
margin-bottom: 10px;
}
section.front_news div.news_list ul li{
margin-bottom: 15px;
}
section.front_news div.news_list ul li a{
display: flex;
color: var(--color-b);
font-size: 16;
}
section.front_news div.news_list ul li a div.date{
margin-right: 10px;
}
section.front_news div.news_list div.btn_stn a{
line-height: 40px;
padding: 0 20px;
}
/* 固定ページ基本 */
.page_wrap{
display: flex;
}
.page_wrap #main{
width: 880px;
min-width: 880px;
}
.page_wrap #side{
width: 280px;
min-width: 280px;
margin-left: 40px;
height: 300px;
background: #f8f8f8;
text-align: center;
padding-top: 20px;
}
/* フッター */
footer .w_inner{
border-top: 1px solid #bdbdbd;
padding-top: 50px;
}
footer .w_inner nav ul{
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 30px;
}
footer .w_inner nav ul li a{
color: var(--color-b);
font-size: 14px;
}
footer .w_inner div#copyright{
text-align: center;
font-size: 12px;
}
補足
今回、特にアキユキさん本人に許可はとっていません。
何らかの事情があり本人がソースコードを未公開(ブログ閉鎖により)にしたため、
この度主が質の低い代替品を作りました。
あくまで他の方の勉強をスムーズにするために、主が作ったものを共有しているだけですが、
本人から削除要請があった場合には3秒で消しますのであしからず。
コメント