search
他カテゴリ

Webアプリ制作 (6)経過

融合系女子 えみりー 🍔's icon'
  • 融合系女子 えみりー 🍔
  • 2019/09/17 15:06
Content image
Content image

この丸の中のやつを四角いところに固定する方法に苦戦中

習った気がするけど忘れた

 

【コード】

<html>
<main>
   <style>
       table,
       td,
       th {
           border: solid 1px lightslategray;
           //border-collapse: collapse;
       }

       body {
           background-color: silver;
           color: white;
           border-color: white;
           padding: 100 150px;
       }

   </style>
</main>


<body>
   <!-- HTML -->
   <div id="app" :style="main">

     

       <body id="top">
           </body>

       <div id="content">
           <p id="mainImg"><img src="images/tsunago.jpg" width="1200" height="600" alt=""></p>
           
           <span>

               <ul :style="sideStyle">
                   <li><a href="#top">TOP</a></li>
                   <li><a href="#sec02">NAME</a></li>
                   <li><a href="#sec01">WHAT?</a></li>
                   <li><a href="#sec03">WHY?</a></li>
                   <li><a href="#sec04">WHO?</a></li>

               </ul>

           </span>

           <section id="sec01">
               <header>
                   <h2><span>WHAT?</span></h2>
               </header>
               <div class="innerS">
                   スーパーマーケットやコンビニエンスストアの賞味期限切れや発注ミスで捨てられている食品を減らすために、小売店と顧客を結ぶWebアプリケーション
               </div>
           </section>


           <section id="sec03">
               <header>
                   <h2><span>WHY?</span></h2>
               </header>
               <div class="inner">
                   <ul class="col4">
                       <li>
                           <p class="img"><img src="images/food2.png" width="168" height="168" alt=""></p>
                           <p>まだ食べることができるのに捨てられている食品がたくさんあります
                               <br>世界で作られている食べ物のうち3/1は捨てられていて、日本でも642万トン捨てられています</p>
                       </li>
                       <li>
                           <p class="img"><img src="images/food.png" width="168" height="168" alt=""></p>
                           <p>2019年に「食品ロス削減推進法」が成立しました</p>
                       </li>
                       <li>
                           <p class="img"><img src="images/food.png" width="168" height="168" alt=""></p>
                           <p>私たちも身近なところから、もったいないをなくしていきましょう</p>
                       </li>
                       <li>
                           <p class="img"><img src="images/food.png" width="168" height="168" alt=""></p>
                           <p>小売店とお客さんをつなぎ、食品廃棄を減らすためにこのアプリを作成しました</p>
                       </li>
                   </ul>
               </div>
           </section>


           <section id="sec04">
               <header>
                   <h2><span>WHO?</span></h2>
               </header>
               <div class="inner">
                   <ul class="col2">
                       <p>名前</p>
                       <p>大学名</p>
                       <li>
                           <div id="map">
                               <iframe src="大学の地図"></iframe>
                           </div>
                       </li>
                   </ul>
               </div>
           </section>


       </div>
   </div>

 

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

   <script>
       var app = new Vue({
           el: '#app',
           data: {


               main: {

                   fontSize: '20px'
               },
               sideStyle: {
                   width: '1000',
                   float: 'right',
                  
               },
           },
           methods: {

           }
       });

   </script>
</body>
 

まだ紹介ページしか取り掛かっていないです。

デザインはあとでやります。

 

一番難しそうなところがまだです。

お店側が投稿して、お客さんがその投稿を見れる感じにしたいけど・・・一体どうやって・・・

本を買ってもらったので、それを見ながらできたらいいなと考えています。

UGOK 女子大生
Article tip 0人がサポートしています
獲得ALIS: Article like 17.95 ALIS Article tip 0.00 ALIS
Article registration Article registration
融合系女子 えみりー 🍔's icon'
  • 融合系女子 えみりー 🍔
  • @emily3
大学4年生、文理融合系IT女子のメンバー🍟卒業研究として「小売店の食品廃棄を減らすWebアプリケーションの開発」をすることにしました。このブログにはアプリの開発過程や内容をメモしていきます。
投稿者の人気記事
コメントする
コメントする
こちらもおすすめ！
Eye catch
他カテゴリ

SASUKEオーディションに出た時の話

Taka 2021/01/22
Like token Tip token
35.87 ALIS
Eye catch
他カテゴリ

オランダ人が語る大麻大国のオランダ

Jimmy 2018/12/21
Like token Tip token
46.20 ALIS
Eye catch
グルメ

バターをつくってみた

モミジ 2021/02/18
Like token Tip token
127.90 ALIS
Eye catch
ゲーム

【初心者向け】Splinterlandsの遊び方【BCG】

暗号資産ジョシ校生　蟻巣 2021/07/07
Like token Tip token
6.32 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin（ドージコイン）の誕生から現在まで。注目される非証券性🐶

昆布森ちゃん 2021/01/19
Like token Tip token
38.31 ALIS
Eye catch
他カテゴリ

警察官が一人で戦ったらどのくらいの強さなの？『柔道編』　【元警察官が本音で回答】

ふたひい＠web3 2020/05/16
Like token Tip token
114.82 ALIS
Eye catch
トラベル

梅雨の京都八瀬・瑠璃光院はしっとり濃い新緑の世界

こすもす 2021/05/25
Like token Tip token
216.64 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

大田コウキ 2021/04/06
Like token Tip token
947.13 ALIS
Eye catch
クリプト

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

nnppnpp（んぺー） 2021/09/08
Like token Tip token
46.60 ALIS
Eye catch
トラベル

無料案内所という職業

bansu 2019/06/11
Like token Tip token
84.20 ALIS
Eye catch
他カテゴリ

テレビ番組で登録商標が「言えない」のか考察してみる

連獅子 2021/10/09
Like token Tip token
31.20 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

otakucoin 2021/03/29
Like token Tip token
121.79 ALIS
アカウント登録でALISを楽しもう！
いいね、記事投稿でトークンやNFTを獲得できます