独学!Webサイト構築日誌

6日目:朝からRPA弄り。

8:00

昨日のRPAを引き続き触っています。
これやってると作業出来ないんだよね...
とりあえず昼まで動かすことになったので、昼以降更新します。

目標だけ先に発表。

  1. 製品画面変更。
  2. スマホ用css設定。

上記2つが出来れば、基礎が完成するので後はコンテンツを充実させていくだけです!

また後で!


14:30

RPAも無事動作するのを確認したので、やっていく。

1.製品画面 変更する。

ずっと明治様のサイトに憧れていたんですよ。
今回はどうにかそのエッセンスを取り入れられないかなと!
マクロファージとかそういうキモい画像じゃなくて形式ね、形式。


16:30

でけた。
サイドバーに製品情報を記載しておいて、追従させるようなものを作成したかったんですよ。
ほぼ予定通りに出来て満足。

            
css ※一部抜粋。
header{
    width:1000px;
    background-color:#ffffff;
    position: fixed;
    z-index:99;
}
.productPage .sideBody{/*サイドバー関連*/
    z-index:1;
    width: 25%;
    display: inline-block;
    position: sticky;
    top: 5rem;
    vertical-align: top;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border:2px solid #000000;
}
            
        
            
html ※ひな形全文
<?php $title = "◆◆◆"; $description="◆◆◆◆◆"; ?>
<?php include("../php/header.php"); ?>
<div class="productPage">
    <div class="middleBody">
        <h1>◆◆◆</h1>
    </div>
    <div class="sideBody">
        <h4>製品名</h4>
        <img class="productPic" src="../img/title.jpg" alt="製品画像">
        <div>ダウンロードリンク</div>
    </div>
</div>
<?php $creationDate = "2021/◆◆/◆◆"; include("../php/rankShare.php"); ?>
<?php include("../php/footer.php"); ?>
            
        

17:00

すんごいお腹減ったけど、今晩は飲む予定なのでもう少し我慢だっ!

2.スマホ用css設定。

「そもそもPC用サイトなのに、スマホ用の設定が必要なのか」という疑問がありますが...
さっきスマホで確認したら酷い有様だったので念のため作成しましょう。


19:00

出来た!腹減った!
PC用も弄ったのでついでに記載。

            
css ※PC用全文
@charset "utf-8";
@media only screen and (min-width: 1000px) {
  /*文字装飾 start-------------*/
  h1 {
    font-size: 200%;
    background-color: #fff;
    padding: 0.3rem 1rem;
    border: 2px solid #000000;
    color: #333;
    border-radius:0.5rem;
    box-shadow: 0 1px 2px #000000;
  }
  h2{
    font-size: 150%;
    background-color: #333333;
    padding: 0.5rem 1rem;
    color: #ffffff;
    border-radius: 0.5rem;
  }
  h3 {
    font-size: 150%;
    border-bottom: solid 3px #000000;
    margin: 0.5rem;
    padding-left: 1rem;
  }
  h4{
    font-size: 120%;
    border-bottom: solid 3px #000000;
    margin: 1rem;
  }
  .nameTitle{
    font-size: 120%;
    color: #ffffff;
    padding: 0 1rem;
    border-radius: 0.5rem;
  }
  .categoryName0{
    font-size: 120%;
    color: #000000;
    padding: 0 1rem;
    border:2px solid #000000;
    border-radius: 0.5rem;
  }
  .categoryName1{
    border:2px solid #0099FF;
    background-color: #0099FF;
  }
  .categoryName2{
    border:2px solid #006400;
    background-color: #006400;
  }
  .categoryName3{
    border:2px solid#FF9900;
    background-color: #FF9900;
  }
  .categoryName4{
    border:2px solid  #000080;
    background-color: #000080;
  }


  /*全体--------------*/
  body{
    background-color:	 #ffffff;
    width:1000px;
    text-align: center;
    margin: 0 auto;
  }

  /*ヘッダーメニュー --------------------*/
  header{
    width:1000px;
    background-color:#ffffff;
    position: fixed;
    z-index:99;
  }
  header .titleImg{
    width: 20%;
    display: inline-block;
    vertical-align: middle;
  }
  header nav{
    width: 79%;
    display: inline-block;
  }
  header ul{
    list-style: none;
  }
  header ul li {
    width: 19%;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #000;
    margin: 0 auto;
    transition-duration:0.3s;
  }
  header .categoryName0:hover{
    background-color:#333333;
    color: #ffffff;
  }
  header .categoryName2:hover{
    background-color:#ffffff;
    color:  #006400;
  }
  header .categoryName3:hover{
    background-color:#ffffff;
    color:  #FF9900;
  }
  header .categoryName4:hover{
    background-color:#ffffff;
    color:  #000080;
  }


  /*フッターメニュー --------------------*/
  footer{
    width: 100%;
    background-color:#ffffff;
    margin-top: 5rem;
  }
  footer a{
    text-decoration: none;
  }
  footer nav{
    width: 100%;
    display: inline-block;
  }
  footer ul{
    list-style: none;
  }
  footer ul li {
    width: 20%;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #000;
    margin: 0 auto;
  }
  div.bread{/*パンくずリスト*/
    text-align: left;
    padding:1rem;
  }
  .bread a{
    text-decoration: none;
  }
  .shareUpdate{/*更新日 + シェアボタン-----*/
    text-align: center;
  }
  .shareBtn img{
    width: 2rem;
    padding: 0 5px;
  }
  /*製品表示関連*/
  .newProduct{
    display: inline-block;
    width:20%;
    margin:0 1rem;
    vertical-align: top;
  }
  .newProduct a{
    text-decoration: none;
  }
  .categoryPic{
    width:100%;
    box-shadow: 0 0 8px #000000;
  }
  .categoryPic:hover{
    transform: translateY(-5px);
  }
  .rankProduct{
    margin: 0 1rem 1rem 1rem;
    padding: 0 1rem;
    text-align: center;
    display: inline-block;
  }
  .rankProduct a{
    text-decoration: none;
  }

  /*トップページ-------------*/
  .topPage .item3{
    width:100%;
    text-align: center;
    margin-bottom: 3rem;
  }
  .topPage .nameTitle{
    margin: 1rem;
  }
  .topPage .middleBody{
    background-color: #ffffff;
    width: 70%;
    display: inline-block;
    text-align: left;
    min-height: 20rem;
  }
  /*サイドバー関連----------*/
  .topPage .sideBody{
    width: 25%;
    display: inline-block;
    vertical-align: top;
  }
  .topPage .sideBody h4{
    background: linear-gradient(#ffffff ,#ffd700);
  }

  
  /*製品ページ------------*/
  .productPage .middleBody{
    background-color: #ffffff;
    width: 70%;
    display: inline-block;
    text-align: left;
    min-height: 20rem;
  }
  .productPage .sideBody{/*サイドバー関連*/
    z-index:1;
    width: 25%;
    display: inline-block;
    position: sticky;
    top: 5rem;
    vertical-align: top;
    padding: 0.5rem;
    margin: 2rem 0 0 1.5rem;
    border-radius: 0.5rem;
    border:2px solid #000000;
  }
  .productPage .productPic{
    max-width: 95%;
    margin: 1rem;
    box-shadow:	0 2px 5px #000;
    text-align: center;
  }
  .productPage .linkMake{
    background-color: #ededed;
    padding: 3rem 1rem;
  }
  .productPage .linkName{
    float: left;
    width: 20%;
    margin: 0.5rem;
  }
  .productPage .linkInput{
    height: 3rem;
    width: 70%;
    padding: 0.5rem;
    margin: 0.5rem;
  }
  .productPage .btnBox{
    text-align: center;
   }
  .productPage .linkBtn{
    transition: all 0.3s ease;
    font-size: 120%;
    color: #000000;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    border-radius: 0.5rem;
    border:2px solid #000000;
    background-color: #FFFF33;
    box-shadow:	0 2px 2px #000;
  }
  .productPage .linkBtn:hover{
    transform: translateY(-5px);
    color: #FFFF33;
    background-color: #000000;
  }
  .productPage #linkDone{
    height: 20rem;
    width: 95%;
    padding: 0.5rem;
    margin: 1rem;
    overflow-y: scroll;
  }
  .productPage #cssDone{
    height: 10rem;
    width: 95%;
    padding: 0.5rem;
    margin: 1rem;
    overflow-y: scroll;
  }
  .underProduct{
    margin-top: 3rem;
  }
  .underProduct .rankProduct{
    width: 15%;
  }
  

  /*コード部分の表示*/
  pre{
    font-family:'メイリオ';
    white-space: pre-wrap ;
    width: 90%;
    border: solid 1px #C0C0C0;
    background-color:	 #dadada;
    padding: 0 10px;
  }

  /*リスト部分*/
  .middleBody ol {
    width: 70%;
    background:#FFFFFF;/*背景色*/
    padding: 0.5rem 0.5rem 0.5rem 2.5rem;/*ボックス内の余白*/
    border: solid 3px #00008B;/*線の種類 太さ 色*/
    border-radius: 0.5rem;
  }
  .middleBody ol li {
    padding: 0.5rem 0; /*前後の文との余白*/
  }

  /*一覧系-------------*/
  .indexProduct .ichiranBody{
    margin-bottom: 2rem;
  }
  .indexProduct a{
    text-decoration: none;
    color: #000000;
  }
  .indexProduct img{
    width: 20%;
    display: inline-block;
  }
  .indexProduct .textBody{
    width:70%;
    display: inline-block;
    padding: 0 2rem;
    vertical-align: top;
    text-align: left;
  }
  

  /*検索結果関係 --------------------*/
  .searchBox{
    height: 1.5rem;
    padding: 0 0.5rem;
    width: 7rem;
    min-width: 35%;
  }
  .searchBtn{
    padding: 0.2rem;
  }
  .searchResult .resultBody{
    width:100% ;
    display: inline-block;
    padding: 2rem 1rem;
  }
  .searchResult .resultBody img{
    width: 20%;
    display: inline-block;
  }
  .searchResult .resultText{
    width: 70%;
    display: inline-block;
    margin: 0 1rem;
    vertical-align: top;
  }
  .searchResult .resultBody a{
    text-decoration: none;
    color: #000000;
  }

  /*お問い合わせフォーム*/
  .contactForm .messageInfo{
    float: left;
    width: 20%;
    padding: 0.5rem;
    margin: 0 20px;
  }
  .contactForm .messageInput{
    width: 30%;
    padding: 0.5rem;
  }
  .contactForm .messageText{
    width: 50%;
    height: 10rem;
    padding: 0.5rem;
  }
  .contactForm .checkArea{
    padding: 0.5rem;
    margin: 0 20px;
  }
  .contactForm img.passText{
    height: 2rem;
    vertical-align: bottom;
  }
  .contactForm #mHiragana{
    width: 7rem;
    padding: 0.5rem;    
  }
  .contactForm .btnArea{
    text-align: center;
  }
  .contactForm .messageBtn{
    margin: 2rem 1rem;
    padding: 0.5rem 1rem;
    font-size: 100%;
  }

  /*サイトマップ*/
  .siteMap a{
    text-decoration: none;
  }
  .siteMap .mapCon{
    display: inline-block;
    vertical-align: top;
    width: 45%;
    padding:0 1rem;
  }
  .siteMap .nameTitle{
    display: inline-block;
    width: 90%;
    margin:1rem;
  }

  /*商品リンク --------*/
  .itemProBody{
    width: 80%;
    border: 1px solid #cccccc;
    padding: 5px;
    margin: 1rem;
  }
  div.itemProBody > div{
    display: inline-block;
    cursor: pointer;
    vertical-align:top;
  }
  .itemProBody a{
    text-decoration: none;
  }
  .itemProImg{
    width: 30%;
    margin: 5px;
  }
  .itemProInfo{
    width: 65%;
    margin: 5px;
  }
  .itemProTitle{
    margin-bottom: 0.5rem;
  }
  .itemProTitle a{
    color: #000000;
    font-weight: bold;
  }
  .itemProDes{
    font-size: 90%;
  }
  div.itemProBtnBody{
    text-align: center;
    margin-top: 1rem;
    list-style-type: none;
  }
  div.itemProBtnBody div{
    display: inline-block;
    cursor: pointer;
    width: 25%;
    padding: 0.5rem;
    margin: 0 2px;
    border-radius: 5px;
    font-family:'Hiragino Kaku Gothic Pro W3','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    font-weight: bold;
  }
  .itemProBtn1{
    border: solid 1px  #FF9900;
    border-bottom: solid 5px #000033;
    background-color: #FF9900;
    transition-duration: 0.3s;
  }
  .itemProBtnText1{
    color: #000033;
  }
  .itemProBtn1:hover{
    border: solid 1px #000033;
    border-bottom: solid 5px  #000033;
    background-color:  #FFFFFF;
  }
  .itemProBtn1:hover .itemProBtnText1{
    color: #000033;
  }
  .itemProBtn2{
    border: solid 1px #000000;
    border-bottom: solid 5px #FF9900;
    background-color:  #000000;
    transition-duration: 0.3s;
  }
  .itemProBtnText2{
    color: #FF9900;
  }
  .itemProBtn2:hover{
    border: solid 1px #000000;
    border-bottom: solid 5px #000000;
    background-color:  #FFFFFF;
  }
  .itemProBtn2:hover .itemProBtnText2{
    color: #000000;
  }
  .itemProBtn3{
    border: solid 1px #DD0000;
    border-bottom: solid 5px #880000;
    background-color:  #DD0000;
    transition-duration: 0.3s;
  }
  .itemProBtnText3{
    color: #ffffff;
  }
  .itemProBtn3:hover{
    border: solid 1px #DD0000;
    border-bottom: solid 5px #DD0000;
    background-color: #ffffff;
  }
  .itemProBtn3:hover .itemProBtnText3{
    color: #DD0000;
  }

}
            
        
            
css ※スマホ用全文
@charset "utf-8";
@media only screen and (max-width: 999px) {
  /*文字装飾 start-------------*/
  h1 {
    font-size: 200%;
    background-color: #fff;
    padding: 0.3rem 1rem;
    border: 2px solid #000000;
    color: #333;
    border-radius:0.5rem;
    box-shadow: 0 1px 2px #000000;
  }
  h2{
    font-size: 150%;
    background-color: #333333;
    padding: 0.5rem 1rem;
    color: #ffffff;
    border-radius: 0.5rem;
  }
  h3 {
    font-size: 150%;
    border-bottom: solid 3px #000000;
    margin: 0.5rem;
    padding-left: 1rem;
  }
  h4{
    font-size: 150%;
    border-bottom: solid 3px #000000;
    margin: 1rem;
  }
  .nameTitle{
    font-size: 150%;
    color: #ffffff;
    padding: 0 1rem;
    border-radius: 0.5rem;
  }
  .categoryName0{
    font-size: 150%;
    color: #000000;
    padding: 0 1rem;
    border:2px solid #000000;
    border-radius: 0.5rem;
  }
  .categoryName1{
    border:2px solid #0099FF;
    background-color: #0099FF;
  }
  .categoryName2{
    border:2px solid #006400;
    background-color: #006400;
  }
  .categoryName3{
    border:2px solid#FF9900;
    background-color: #FF9900;
  }
  .categoryName4{
    border:2px solid  #000080;
    background-color: #000080;
  }


  /*全体--------------*/
  body{
    background-color:	 #ffffff;
    width:100%;
    text-align: center;
    margin: 0 auto;
    font-size:200%;
  }

  /*ヘッダーメニュー --------------------*/
  header{
    width:100%;
    background-color:#ffffff;
    position: fixed;
    z-index:99;
  }
  header .titleImg{
    width: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  header nav{
    width: 100%;
    display: inline-block;
  }
  header ul{
    list-style: none;
  }
  header ul li {
    width: 40%;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #000;
    margin: 0.5rem;
    transition-duration:0.3s;
  }
  header .categoryName0:hover{
    background-color:#333333;
    color: #ffffff;
  }
  header .categoryName2:hover{
    background-color:#ffffff;
    color:  #006400;
  }
  header .categoryName3:hover{
    background-color:#ffffff;
    color:  #FF9900;
  }
  header .categoryName4:hover{
    background-color:#ffffff;
    color:  #000080;
  }


  /*フッターメニュー --------------------*/
  footer{
    width: 100%;
    background-color:#ffffff;
    margin-top: 5rem;
  }
  footer nav{
    width: 100%;
    display: inline-block;
  }
   footer a{
    text-decoration: none;
  }
  footer ul{
    list-style: none;
  }
  footer ul li {
    width: 25%;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #000;
    margin: 0 auto;
    vertical-align:middle;
  }
  div.bread{/*パンくずリスト*/
    text-align: left;
    padding:1rem;
  }
  .bread a{
    text-decoration: none;
  }
  .shareUpdate{/*更新日 + シェアボタン-----*/
    text-align: center;
    font-size:120%;
  }
  .shareBtn img{
    width: 10rem;
    padding: 0 3rem;
  }
  /*製品表示関連*/
  .newProduct{
    display: inline-block;
    width:25%;
    margin:0 1rem;
    vertical-align: top;
  }
  .newProduct a{
    text-decoration: none;
  }
  .categoryPic{
    width:100%;
    box-shadow: 0 0 8px #000000;
  }
  .categoryPic:hover{
    transform: translateY(-5px);
  }
  .rankProduct{
    width:25%;
    margin: 0 1rem 1rem 1rem;
    padding: 0 1rem;
    text-align: center;
    display: inline-block;
  }
  .rankProduct a{
    text-decoration: none;
  }

  /*トップページ-------------*/
  .topPage .item3{
    width:100%;
    text-align: center;
    margin-bottom: 3rem;
  }
  .topPage .nameTitle{
    margin: 1rem;
  }
  .topPage .middleBody{
    margin:5rem 0;
    background-color: #ffffff;
    width: 100%;
    display: inline-block;
    text-align: left;
    min-height: 20rem;
  }
  /*サイドバー関連----------*/
  .topPage .sideBody{
    width: 100%;
    display: inline-block;
    vertical-align: top;
  }
  .topPage .sideBody h4{
    background: linear-gradient(#ffffff ,#ffd700);
  }

  
  /*製品ページ------------*/
  .productPage .middleBody{
    background-color: #ffffff;
    width: 100%;
    margin: 5rem 3rem;
    display: inline-block;
    text-align: left;
    min-height: 20rem;
  }
  .productPage .sideBody{/*サイドバー関連*/
    z-index:1;
    width: 100%;
    font-size:150%;
    display: inline-block;
    position: sticky;
    top: 5rem;
    vertical-align: top;
    padding: 0.5rem;
    margin: 1rem;
    border-radius: 0.5rem;
    border:2px solid #000000;
  }
  .productPage .productPic{
    width: 95%;
    margin: 1rem;
    box-shadow:	0 2px 5px #000;
    text-align: center;
  }
  .productPage .linkMake{
    background-color: #ededed;
    padding: 3rem 1rem;
  }
  .productPage .linkName{
    margin: 0.5rem;
  }
  .productPage .linkInput{
    height: 7rem;
    width: 90%;
    font-size:120%;
    padding: 0.5rem;
    margin: 0.5rem;
  }
  .productPage .btnBox{
    text-align: center;
   }
  .productPage .linkBtn{
    transition: all 0.3s ease;
    font-size: 120%;
    color: #000000;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    border-radius: 0.5rem;
    border:2px solid #000000;
    background-color: #FFFF33;
    box-shadow:	0 2px 2px #000;
  }
  .productPage .linkBtn:hover{
    transform: translateY(-5px);
    color: #FFFF33;
    background-color: #000000;
  }
  .productPage #linkDone{
    height: 20rem;
    width: 95%;
    padding: 0.5rem;
    margin: 1rem;
    overflow-y: scroll;
    font-size:120%;
  }
  .productPage #cssDone{
    height: 10rem;
    width: 95%;
    padding: 0.5rem;
    margin: 1rem;
    overflow-y: scroll;
  }
  .underProduct{
    margin-top: 3rem;
  }
  .underProduct .rankProduct{
    width: 25%;
  }


  /*コード部分の表示*/
  pre{
    font-family:'メイリオ';
    white-space: pre-wrap ;
    width: 90%;
    border: solid 1px #C0C0C0;
    background-color:	 #dadada;
    padding: 0 10px;
  }

  /*リスト部分*/
  .middleBody ol {
    width: 70%;
    font-size:150%;
    background:#FFFFFF;/*背景色*/
    padding: 0.5rem 0.5rem 0.5rem 5rem;/*ボックス内の余白*/
    border: solid 3px #00008B;/*線の種類 太さ 色*/
    border-radius: 0.5rem;
  }
  .middleBody ol li {
    padding: 0.5rem 0; /*前後の文との余白*/
  }

  /*一覧系-------------*/
  .indexProduct{
    margin:7rem 1rem;
  }
  .indexProduct .ichiranBody{
    margin-bottom: 5rem;
  }
  .indexProduct a{
    text-decoration: none;
    color: #000000;
  }
  .indexProduct img{
    width: 20%;
    display: inline-block;
  }
  .indexProduct .textBody{
    width:70%;
    display: inline-block;
    padding: 0 2rem;
    vertical-align: top;
    text-align: left;
  }
  

  /*検索結果関係 --------------------*/
  .searchBox{
    font-size:200%;
    height: 5rem;
    padding: 0 0.5rem;
    width: 70%;
  }
  .searchBtn{
    font-size:150%;
    padding: 0.2rem;
    vertical-align:top;
  }
  .searchResult .resultBody{
    width:100% ;
    display: inline-block;
    padding: 2rem 1rem;
  }
  .searchResult .resultBody img{
    width: 20%;
    display: inline-block;
  }
  .searchResult .resultText{
    width: 70%;
    display: inline-block;
    margin: 0 1rem;
    vertical-align: top;
  }
  .searchResult .resultBody a{
    text-decoration: none;
    color: #000000;
  }

  /*お問い合わせフォーム*/
  .contactForm .messageInfo{
    float: left;
    width: 20%;
    padding: 0.5rem;
    margin: 0 20px;
  }
  .contactForm .messageInput{
    width: 30%;
    padding: 0.5rem;
  }
  .contactForm .messageText{
    width: 50%;
    height: 10rem;
    padding: 0.5rem;
  }
  .contactForm .checkArea{
    padding: 0.5rem;
    margin: 0 20px;
  }
  .contactForm img.passText{
    height: 2rem;
    vertical-align: bottom;
  }
  .contactForm #mHiragana{
    width: 7rem;
    padding: 0.5rem;    
  }
  .contactForm .btnArea{
    text-align: center;
  }
  .contactForm .messageBtn{
    margin: 2rem 1rem;
    padding: 0.5rem 1rem;
    font-size: 100%;
  }

  /*サイトマップ*/
  .siteMap a{
    text-decoration: none;
  }
  .siteMap .mapCon{
    display: inline-block;
    vertical-align: top;
    width: 45%;
    padding:0 1rem;
  }
  .siteMap .nameTitle{
    display: inline-block;
    width: 90%;
    margin:1rem;
  }

  /*商品リンク --------*/
  .itemProBody{
  width: 80%;
  border: 1px solid #cccccc;
  padding: 5px;
  margin: 1rem;
  }
  div.itemProBody > div{
  cursor: pointer;
  }
  .itemProBody a{
  text-decoration: none;
  }
  .itemProImg img{
  width: 20rem;
  max-width: 50%;
  margin: 5px;
  }
  .itemProInfo{
  width: 90%;
  margin: 5px;
  }
  .itemProTitle{
  margin-bottom: 0.5rem;
  }
  .itemProTitle a{
  color: #000000;
  font-weight: bold;
  }
  .itemProDes{
  font-size: 90%;
  }
  div.itemProBtnBody{
  text-align: center;
  margin-top: 1rem;
  list-style-type: none;
  font-size:150%;
  }
  div.itemProBtnBody div{
  display: inline-block;
  cursor: pointer;
  min-width: 15rem;
  padding: 0.5rem 1rem;
  margin: 1rem;
  border-radius: 5px;
  font-family:'Hiragino Kaku Gothic Pro W3','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  font-weight: bold;
  }
  .itemProBtn1{
  border: solid 1px  #FF9900;
  border-bottom: solid 5px #000033;
  background-color: #FF9900;
  transition-duration: 0.5s;
  }
  .itemProBtnText1{
  color: #000033;
  }
  .itemProBtn1:hover{
  border: solid 1px #000033;
  border-bottom: solid 5px  #000033;
  background-color:  #FFFFFF;
  }
  .itemProBtn1:hover .itemProBtnText1{
  color: #000033;
  }
  .itemProBtn2{
  border: solid 1px #000000;
  border-bottom: solid 5px #FF9900;
  background-color:  #000000;
  transition-duration: 0.5s;
  }
  .itemProBtnText2{
  color: #FF9900;
  }
  .itemProBtn2:hover{
  border: solid 1px #000000;
  border-bottom: solid 5px #000000;
  background-color:  #FFFFFF;
  }
  .itemProBtn2:hover .itemProBtnText2{
  color: #000000;
  }
  .itemProBtn3{
  border: solid 1px #DD0000;
  border-bottom: solid 5px #880000;
  background-color:  #DD0000;
  transition-duration: 0.5s;
  }
  .itemProBtnText3{
  color: #ffffff;
  }
  .itemProBtn3:hover{
  border: solid 1px #DD0000;
  border-bottom: solid 5px #DD0000;
  background-color: #ffffff;
  }
  .itemProBtn3:hover .itemProBtnText3{
  color: #DD0000;
  }
}
            
        

今日はお終い!酒飲むぞ!



Before: 5日目

Before: 5日目

After: 6日目

After: 6日目



作成日:2021/02/06 - 更新日:2021/02/21

≪ 5日目≪ 一覧に戻る ≫7日目 ≫

HOME > 新日誌一覧 > 6日目:朝からRPA弄り。