【ソースコード】WordPressの基礎解説とデモサイト制作(連結講座#1)【アキユキ】【CSS】

WordPress

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秒で消しますのであしからず。

コメント

タイトルとURLをコピーしました