他カテゴリ

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
融合系女子 えみりー 🍔's icon'
  • 融合系女子 えみりー 🍔
  • @emily3
大学4年生、文理融合系IT女子のメンバー🍟卒業研究として「小売店の食品廃棄を減らすWebアプリケーションの開発」をすることにしました。このブログにはアプリの開発過程や内容をメモしていきます。
投稿者の人気記事
コメントする
コメントする
こちらもおすすめ！
Eye catch
グルメ

バターをつくってみた

Like token Tip token
127.90 ALIS
Eye catch
クリプト

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

Like token Tip token
46.60 ALIS
Eye catch
他カテゴリ

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

Like token Tip token
46.20 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
159.32 ALIS
Eye catch
トラベル

わら人形を釘で打ち呪う 丑の刻参りは今も存在するのか？　京都最恐の貴船神社奥宮を調べた

Like token Tip token
486.35 ALIS
Eye catch
他カテゴリ

京都のきーひん、神戸のこーへん

Like token Tip token
12.10 ALIS
Eye catch
クリプト

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

Like token Tip token
947.13 ALIS
Eye catch
ゲーム

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

Like token Tip token
6.32 ALIS
Eye catch
クリプト

約２年間ブロックチェ－ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
他カテゴリ

機械学習を体験してみよう！（難易度低）

Like token Tip token
124.82 ALIS
Eye catch
他カテゴリ

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

Like token Tip token
114.82 ALIS
Eye catch
トラベル

無料案内所という職業

Like token Tip token
84.20 ALIS