What's New Qiita

20200917のHTMLに関する記事は7件です。

  • 投稿日：2020-09-17T22:33:01+09:00

【初心者でもわかる】字下げ、字上げのインデント。リストを表示した時に、・の下に文字をもぐりこませないようにする方法

どうも7noteです。CSSで字上げ・字下げする方法。

字送りされた時、こんなふうになってしまうのを解消。

・文字おくりがされるとくずれてしま
います。

これをこうしたい↓。

・文字おくりがされてもくずれないよ
　うになりました！

方法

text-indentを使った方法。

p {
  text-indent: -1em;
  padding-left: 1em;
}

reslut.png

tetx-indentは行の冒頭に余白を入れることができます。
text-indent: 1em;を入れることで１文字分隙間を開けることができます。

今回は逆にtext-indent: -1em;とすることで「・」の分を左に寄せ、全体の左にpaddingを入れることで対応しています。

まとめ

list-styleを使う場合は必要ないですが、疑似要素でアイコンを入れたりした場合にも使うので覚えておいて損はないかなと思います！

reslut2.jpg

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-17T20:45:53+09:00

Tyハロトレ23日目

HTML

id

　「anc_a.html」で、"anc_b.html#hajime"と記述すると、「anc_b.html」の指定したidに飛びます。
※idは同じ値を用意しないこと

anc_a.html
<ol>
   <li><a href="anc_b.html#hajime">はじめに</a></li>
   <li><a href="anc_b.html#jyuyo">重要なこと</a></li>
   <li><a href="anc_b.html#tsuika">追加すること</a></li>
</ol>
anc_b.html
<p id="hajime">はじめに</p>
<p id="jyuyo">重要なこと</p>
<p id="tsuika">追加すること</p>

table

captionは、表題を表します。
caption2.png

Amazonと書店

Aメリット Aデメリット 書メリット 書デメリット
ポイント 段ボール カバー 重いの嫌
誰も触っていない すぐ読めない ネット使えない人 探すの辛い
品揃え 送料 サイン会 店員に買った物がバレる
サービス、機能

ウイッシュリスト
kindleのサブスク
レコメンド
買取
ランキング
読み上げ機能
著者のフォロー
古本買える

日本に製紙、パルプ、本を運ぶ人、本を置いていく大きな倉庫など大きな会社が関わっているので、AmazonのKindleは普及しないです。
著作権も絡みます。

Webマーケティングに繋がる考え

①仮説を立てる
②調査する
③実証する
この流れが新たなことを学んでいく上で大事です。

colspan

colspan3.png

rowspan

rowspan2.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-17T17:50:18+09:00

簡単なアプリ　複数計算機　＋

簡単な計算機をつくて見ました。

使用言語はHTMLと、Javascriptです、

HTMLのコードです。

計算プログラム

  <h2>足し算</h2>

  <div>
     1つ目の値<input type="text" id="atai1">       <br>

     2つ目の値<input type="text" id="atai2">       <br>

     3つ目の値<input type="text" id="atai3">       <br>

     4つ目の値<input type="text" id="atai4">       <br>

     5つ目の値<input type="text" id="atai5">       <br>

     　　　　　　　
     <button onclick="tashizan()">
        足し算
     </button>        <br>                           


     結果<br>

     <div id="kekka">


     </div>　

  </div>

次にJSのコードです。

　

  　//足し算の式


        function tashizan(){



     text01 = document.getElementById('atai1');
     text02 = document.getElementById('atai2');
     text03 = document.getElementById('atai3');
     text04 = document.getElementById('atai4');
     text05 = document.getElementById('atai5');




     x = parseInt(0 + text01.value);
     y = parseInt(0 + text02.value);
     u = parseInt(0 + text03.value);
     k = parseInt(0 + text04.value);
     t = parseInt(0 + text05.value);





     z = x + y + u + k + t;

     kekka = document.getElementById('kekka');

     kekka.innerHTML = z; 

        }

完成形はこんな感じです。

足し算.jpg

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-17T11:13:11+09:00

Airbnb サイト模写　コード載せてます。是非、参考にしてみてください。

参考サイトURL
https://www.airbnb.jp/host/homes

難易度
結構、複雑でした。PCからスマホページに移動する時のトップ画像の調整方法が
全然分かりませんでした笑 JQueryで簡潔に記述できるらしいです。

製作時間
8h(2days)

以下ソースコード

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/index.css">
<title>Top</title>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="js/jquery.min.js"></script>


<script type="text/javascript">
$(function(){
$("#nav-toggle").on("click",function(){
$("header nav ul").slideToggle();
});
});
</script>

<script type="text/javascript">
$(window).on( "resize", function() {
  if ($(this).width() < 780){
  $(".start-sp").fadeIn();
}else{
$(".start-sp").hide();
};
});
</script>

<script type="text/javascript">
$(window).on( 'scroll', function() {
if ($(this).scrollTop() >= 500){
$("header nav ul").addClass('open');
}else{
$("header nav ul").removeClass('open');
}
});
</script>

</head>
<body>

<header>
<div id="nav-toggle">
<span><img src="https://icon-icons.com/icons2/836/PNG/64/Airbnb_icon-icons.com_66791.png" width ="32" alt="SVG">
</span>
</div>
<nav>
<ul>
  <li class="green"><img src="https://icon-icons.com/icons2/836/PNG/64/Airbnb_icon-icons.com_66791.png" width ="32" alt="SVG"></li>
  <li class="green">概要</li>
  <li>準備</li>
  <li>安全</li>
  <li>マネープラン</li>
</ul>
</nav>

<div class="start">
<h3><a href="#">はじめる</a></h3>
</div>
</header>

<section id="Top">

<div id="top-sp">
<h1 style="font-size:40px" class = top-h1-sp >Airbnbホストになって、暮らしをレベルアップ</h1>
</div>

<div id="btn-box">

<section id ="top-h1" style="padding-bottom:0px; padding-top:0 ">
<h1 style="font-size:40px">Airbnbホストになって、暮らしをレベルアップ</h1>
</section>

<h4>宿泊施設の内容を記入</h4>

<form action="area">
<input type="text" style="margin: 0 auto; width: 95%;
    padding: 2%;" name="area" value="" placeholder="東京">
</form>

<form action="kasikiri" >
<select name="pull-down" style="width:48%; float:left; padding:10px;">
    <option value="elephant">まるまる貸切</option>
    <option value="lion">ルームシェア</option>
  </select>
</form>

<form action="guest" class="">
  <select name="pull-down" style="width:48%; float:right;padding:10px;">
      <option value="elephant">ゲスト４人</option>
      <option value="lion">ゲスト５人</option>
      <option value="penguin">それ以上</option>
    </select>
</form>

<div class="btn" style= "clear:both" >
はじめる
</div>

</div>
</section>

<main>
<section id = "middle" class="clearfix">
  <div class = "btn-box-sp">


  <h4>宿泊施設の内容を記入</h4>

  <form action="area">
  <input type="text" style="margin: 0 auto; width: 95%;
      padding: 2%;" name="area" value="" placeholder="東京">
  </form>

  <form action="kasikiri" >
  <select name="pull-down" style="width:48%; float:left; padding:10px;">
      <option value="elephant">まるまる貸切</option>
      <option value="lion">ルームシェア</option>
    </select>
  </form>

  <form action="guest" class="">
    <select name="pull-down" style="width:48%; float:right;padding:10px;">
        <option value="elephant">ゲスト４人</option>
        <option value="lion">ゲスト５人</option>
        <option value="penguin">それ以上</option>
      </select>
  </form>

  <div class="btn" style="clear:both">
  はじめる
  </div>

  </div>

  </section>

  <div class="txt">
  <div class="left-txt"><h2>Airbnbでホストするこれだけの理由</h2>
  どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</div>

<div class="right-txt"><h2>困ったときも安心</h2>
万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</div>
  </div>

</section>

<section id="three-steps" class="clearfix">
<h1 style="font-size:50px; clear:both; text-align:center">3ステップでホスティング</h1>
<ul>
  <li><img src="https://illust8.com/wp-content/uploads/2018/08/mark_check_illust_1104-768x667.png" alt="" width="64px" style="display:block;"><h3>無料でお部屋を掲載</h3>
共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</li>

  <li><img src="https://illust8.com/wp-content/uploads/2018/08/mark_check_illust_1104-768x667.png" alt="" width="64px" style="display:block;"><h3>ホスティング方法を設定</h3>
スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。</li>

  <li><img src="https://illust8.com/wp-content/uploads/2018/08/mark_check_illust_1104-768x667.png" alt="" width="64px" style="display:block;">
<h3>はじめてのゲストが来ます！</h3>
リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。<br>
<p class="green">ホストをはじめる方法をチェック</p>
</li>
</ul>
</section>


<section id="certify">

<div class="txt2">
<div class="left-txt2">
<img src="https://illust8.com/wp-content/uploads/2018/08/mark_check_illust_1104-768x667.png" alt="" width="64px" style="display:block;">
<h2 style="font-size:30px;">ホスト保証があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h2>
Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています
</div>

<div class="right-txt2"><img src="https://a0.muscache.com/pictures/8e6c68cc-e714-4849-bad9-464abf58e84a.jpg" alt="ossan"></div>
</div>

</section>

<section id ="safety">
<h1 style="font-size:50px">万一のときも安心です</h1>

<div class="txt3" style="margin-bottom:80px;">
<div class="left-txt3">
<p>大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
<p class="green">ホストを守るAirbnbの仕組みをチェック</p>
</div>

<div class="right-txt3 clearfix">
<ul>
  <li>予約前に政府発行の身分証明書を求める権限</li>
  <li>ハウスルールに同意しないと泊まれない</li>
  <li>過去の宿泊のレビューもばっちり読める</li>
  <li>財物損害は¥100,000,000まで無料で補償</li>
  <li>$1,000,000の賠償責任保険が無料で付帯</li>
  <li>24時間365日対応グローバルカスタマーサポート</li>
</ul>
</div>
</div>

<img src="https://a0.muscache.com/pictures/bb358a46-fa25-4895-b5fd-048a386bdcac.jpg" alt="practice" style="width:98%; display:block; margin: 0 auto;">
</section>

<section id="pay">
<h1 style="font-size:50px;">シンプルな決済</h1>
<ul>
  <li><h3>無料でお部屋を掲載</h3>
共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</li>

  <li><h3>ホスティング方法を設定</h3>
スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。</li>

  <li>
<h3>はじめてのゲストが来ます！</h3>
リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。<br>
<p class="green">ホストをはじめる方法をチェック</p>
</li>
</ul>

<div class="txt2 clearfix" style="margin-top:80px">
  <div class="right-txt2">
    <img src="https://a0.muscache.com/pictures/4e8524b4-205e-4fdf-9f0a-f1f36905c8f6.jpg" alt="obasan">
  </div>

  <div class="left-txt2" style="margin-top: 10%;">
  <img src="https://illust8.com/wp-content/uploads/2018/08/mark_check_illust_1104-768x667.png" alt="" width="64px" style="display:block;">
  <h2 style="font-size:30px;">ホスト収入でキッチンリフォーム。お家をいろいろアップグレードしました。
</h2>Tessaさんはロンドン在住。ホストになって経済的なゆとりができました
  </div>
  </div>

  <div class="populate" style="clear:both; padding-top:80px;">
  <h1>夢を共有する仲間が世界中に</h1>

  <ul>
    <li><h1>290万</h1><p>Airbnbのホスト</p></li>

    <li><h1>80万</h1><p>Airbnbにおける毎晩の平均宿泊数</p></li>

  <li><h1>14,000</h1><p>月あたりの新規登録ホスト数</p></li>
  </ul>
  </div>

</section>

<section id ="about">
    <h1>Airbnbについて</h1>
    <div class="txt">
    <div class="left-txt"><h2>  Airbnbとは？</h2>
    Airbnbは世界中の宿泊先や体験と人々をつなぎます。 ホストたちが原動力となるコミュニティが、地元のように旅するユニークな機会をゲストに提供しています。</div>

  <div class="right-txt"><h2>  ホスティングとは？</h2>
    空いているお部屋やお家、得意分野があるなら、世界中の仲間とシェアして暮らしをステップアップできます。 掲載できるのはお部屋や体験です。掛け持ちもOK。 無理のないペースでできます.
    <p class="green" style="margin-top:10px; ">体験ホスティングの詳細はこちら</p></div>
    </div>

  </section>

<section id = "FAQ">
  <h1>よくある質問</h1>
  <ul id="FAQ1">
    <li><p class="green">Airbnbホストになれるのはどんな人？</p></li>
    <li><p class="green">予約前にゲストに求められる要件は？</p></li>
    <li><p class="green">お部屋の掲載料はいくら？</p></li>
  </ul>

<ul  id="FAQ2">
  <li><p class="green">家財破損があった場合、どのような補償がありますか？</p></li>
  <li><p class="green">リスティングの料金を選ぶには？</p></li>
  <li><p class="green">料金設定の支援ツールはありますか？</p></li>
</ul>

<div class="photo">
<h2>ホスティングの詳細はこちら</h2>
 <ul>
  <li><img src="https://a0.muscache.com/pictures/489faa5d-9519-48fa-aa0e-fe9673165e43.jpg" alt="" style="width:23vw">
<div class="text">
<h3>初期設定</h3>
ホスティング入門ガイド<p class="green">もっと詳しく</p>
</div>
</li>

  <li><img src="https://a0.muscache.com/pictures/b77eb430-aa14-4ceb-a832-109341f798cd.jpg" alt="" style="width:23vw">
<div class="text">
<h3>安全</h3>
ホストを守るAirbnbのしくみ<p class="green">もっと詳しく</p>
</div>
</li>

  <li><img src="https://a0.muscache.com/pictures/1ad4d764-38a6-464b-8fdd-b0f3339adf2f.jpg" alt="" style="width:23vw">
<div class="text">
<h3>マネープラン</h3>
Airbnbで収益を得るには
<p class="green">もっと詳しく</p>
</div>
</li>

 </ul>
</div>
</section>

<div class="start-sp">
<a>はじまる</a>
</div>


<div class="go-start">
<h2>収益化してみますか？
<a>はじめる</a></h2>
</div>
</main>

<footer>
<div class="footer-inner">

<ul id="company">
<li>企業情報</li>
<li>Airbnbのご利用方法
<li>ダイバーシティ＆ビロンギング</li>
<li>アクセシビリティ対応</li>
<li>信頼＆安全</li>
<li>Airbnb Citizen</li>
<li>オリンピック</li>
<li>ニュースルーム</li>
</ul>

<ul id="community">
<li> コミュニティ</li>
<li>  Airbnb Magazine
</li>
<li>  Airbnbアソシエイト
</li>
<li>  Airbnbビジネスプログラム
</li>
<li>  お友達を招待
</li>
<li>  採用情報
</li>
  </ul>

<ul id="host">
  <li>  ホスト</li>
  <li>  お部屋を掲載</li>
  <li>  オンライン体験をホスティングしよう</li>
  <li>  コミュニティセンター</li>
  <li>  サポート</li>
  <li>  新型コロナウイルスに関する最新情報</li>
</ul>

<ul id=support>
  <li>サポート</li>
  <li>CEOからのメッセージ</li>
  <li>責任あるホスティング</li>
  <li>オープンホーム</li>
  <li>リソースセンター</li>
</ul>

<p>Airbnb Global Services <br>
観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)<br>
© 2020 Airbnb, Inc. All rights reserved·プライバシー·利用規約·サイトマップ·企業情報</p>
</div>

</footer>
</body>
</html>
css
*{
  margin:0;
  padding:0;
}

a{
text-decoration:none;
color:#fff;
}

p,li{
color:gray;
}

#pay >li{
text-align: left !important;
}
p{
text-align: left;
}

.populate p{
text-align: center;
}

h1,h2,h3,h4{
color:#000;
}

h1,h2{
text-align:center;
}

h1{
font-size: 50px;
}

main{
width:1100px;
margin: 0 auto;
}

section{
padding-bottom:80px;
padding-top:60px;
}

div::after , .clearfix::after{
display:block;
content:"";
clear:both;
}

ul{
list-style-type: none;
}

header ul{
list-style-type:none;
padding: 0 0 0 35px;
}

header{
position:fixed !important;
width:100%;
height:98px;
background-color:#fff;
z-index:100;
margin-top: -98px;
border-bottom:1px solid gray;
}

header ul{
float:left;
display:flex;
}

header ul li{
font:bold;
font-size:0.9em;
justify-content:space-between;
margin-right:30px;
color:#000;
line-height: 96px;
}

header li:nth-child(2){
border-bottom: 2px solid #008489;
}

.start{
float:right;
margin:30px 50px;
padding:8px 10px;
border-radius:5px;
color:#fff;
background-color:red;
font-size:0.8em;
}

.wrap{
border-bottom:10px;
}

form{
margin-bottom:20px;
}

select{
margin-bottom:30px;
}

.btn{
background-color:red;
border-radius:10px;
padding:10px;
text-align:center;
color:#fff;
}


#Top{
margin-top:98px;
padding-top:-98px;
position:relative;
width: 100%;
background-image:url(https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=r:w1440-h960-sfit,e:fwebp-c75);
background-repeat: no-repeat;
}

#btn-box{
float: right;
margin: 50px;
background-color:#fff;
width:400px;
padding:20px;
z-index:2;
}

section{
overflow:hidden;
}

.left-txt{
width:45%;
margin:2.5% ;
float:left;
}

.right-txt{
float:right;
width:45%;
margin:2.5% ;
}

.txt h2{
text-align:left;
}

.photo ul, .populate ul, #pay ul ,#three-steps ul{
display:flex;
}

.photo > ul > li, .populate > ul > li, #pay >ul>li ,#three-steps>ul>li{
justify-content:space-around;
width:33%;
margin:30px 25px 0px 25px;
}

.photo, .populate, #pay, #three-steps>ul>li:nth-child(3){
margin-right:0px;
}

.txt2 h2{
text-align: left;
}

.left-txt2{
width:45%;
margin:2.5% ;
float:left;
}

.right-txt2{
width: 45%;
margin:2.5% ;
float:left;
}

.right-txt2 img{
width: 35vw;
}

.left-txt3,.right-txt3{
width:42%;
margin:2.5%;
}

.left-txt3{
float:left;
}

.right-txt3{
float:right;
margin-top:0;
}

.green{
color:#008489;
}

.right-txt3 li{
padding:5px;
}

.left-txt3 >p{
margin:7px;
}

.right-txt3 li::before{
content:"✔️";
color:#008489;
size:large;
display:inline;
}

.photo{
clear:both;
padding-top:80px;
}

.photo h2{
text-align:left;
font-size:1.7em;
margin-left: 25px;
}

footer{
width:100%;
background-color:  #484848;
overflow:hidden;
}

.footer-inner{
width:1050px;
margin: 0 auto;
padding:30px;
}

.footer-inner p{
text-align:left;
clear:both;
padding:25px 25px 0 25px;
}

footer ul{
width:20%;
padding:25px;
margin-left:auto;
margin-right:auto;
float:left;
}

ul#FAQ1{
float: left;
width: 48%;
}

ul#FAQ2 {
float: right;
width: 48%;
}

ul#FAQ1> li, ul#FAQ2 >li {
padding: 26px;
margin-left: 25px;
border-bottom: 1px solid gray;
}

.go-start{
background-image:
url(https://a0.muscache.com/4ea/air/v2/pictures/dbe25d99-6821-4e02-802f-fcd7aaef85bc.jpg?t=n:ope,e:fwebp-c75);
background-repeat: no-repeat;
background-size: cover;
width:90%;
margin: 0 auto;
margin-bottom: 80px;
}

.go-start h2{
text-align:left;
padding:140px 80px;
font-size: 50px;
color:#fff;
}

.go-start h2 > a{
background-color: #fff;
color:#000;
border-radius: 5px;
font-size: 0.3em;
padding: 10px;
margin: 30px 0 0 0;
display: block;
width: 6%;
text-align: center;
}

.btn-box-sp{
display: none;
}

#top-sp{
display: none;
}

#nav-toggle{
display: none;
}

@media screen and (max-width:780px){
  /*780px以上で適用する内容*/
h2,h1,h3,p,li {
text-align: left !important;
}

h1{
font-size: 35px !important;
margin-left:3% !important;
}

img{
vertical-align: bottom;
}

.right-txt2 {
width: 100% !important;
float: none !important;
}

.right-txt2 img{
display: block;
width:95%;
margin-right: 0;
}

.left-txt2 {
float: none !important;
width: 100% !important;
}

.right-txt3, .left-txt3{
float:none;
width:100%;
}

.right-txt3 ul{
margin-left:-15px;
}

main{
width:93%;
margin: 0 auto;
}

#nav-toggle{
width:30px;
height:26px;
left:15px;
top:113px;
position: absolute;
display:block !important;
}

#nav-toggle span{
width:100%;
height:auto;
display: block;
position: absolute;
left:0px;
}

#nav-toggle span:nth-child(1){
top:0;
}

header nav ul{
display: none;
background-color: #fff;
width:100vw ;
height:120vh ;
}

.height-ch{
height:100px;
background-color: #fff;
}

header nav ul li{
line-height: 50px !important;
}

header li:nth-child(2) {
border-bottom: none;
}

.start{
display: none;
}

.open{
border-bottom:1px solid gray;
background-image: url(https://www.nta.co.jp/media/tripa/static_contents/nta-tripa/item_images/images/000/058/218/medium/64ef6263-af07-4c18-b5cb-4b6b41c75492.jpg?1550671293) ;
background-repeat: repeat-x;
}

.close{
display: none;
}

.start-sp{
display: none;
float:right;
padding:8px 10px;
border-radius:5px;
color:#fff;
background-color:red;
font-size:0.8em;
position: fixed;
right:10px;
bottom:10px;
}

ul > li {
width:98% !important;
margin: 0px !important;
padding:20px !important;
}

#three-steps > ul > li{
padding: 20px 10px !important;
}

#FAQ > ul {
float:none !important;
width:98% !important;
}

.photo, .populate, #pay, #three-steps>ul>li:nth-child(3) {
margin-right: -5px !important;
}

.photo ul, .populate ul, #pay ul ,#three-steps ul{
display: block !important;
}

#FAQ > .photo > ul > li > .text{
display: block !important;
float: right;
width: 70%;
padding-top: 4px;
}

#FAQ > .photo > ul > li > .text >.green{
display: none;
}

#FAQ > .photo > ul > li {
border-top: 1px solid gray;
border-bottom: 1px solid gray;
border-right: 1px solid gray;
padding: 0 !important;
margin-bottom:10px !important;
}

#pay  li{
padding-top:20px !important;
padding-bottom:20px !important;
padding-right:0 !important;
padding-left: 8px !important;
}

#pay li p{
margin-left: 2px;
}

.photo h2{
margin-left: 0px;
}

#btn-box{
width:100%;
float: none;
margin:0;
}

#Top{
background-size: cover;
margin-top: 0px;
position: relative;
height: 22vh !important;
}

.left-txt,.right-txt{
float: none;
width:100%;
}

footer ul{
width:100%;
float: none;
}

.go-start{
width: 100%;
margin-bottom:0;
}

.go-start h2 {
text-align: left;
padding: 30px;
}

.go-start h2 > a{
width:20%;
}

#btn-box{
display: none;
}

.btn-box-sp{
display: block !important;
}

.btn-box-sp h4{
margin-top:20px;
margin-bottom:20px;
}

section#middle{
padding-bottom: 40px;
padding-top: 0px;
}

#top-sp {
display: block !important;
}

#top-sp h1{
color:#fff !important;
position: absolute;
bottom:0;
}
}

@media screen and (min-width:781px){
header nav ul{
display: flex !important;
}
}

参考程度にどうぞ！これが必ず正解ということではないので、丸暗記はしないでください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-17T06:44:44+09:00

　DOMとは　〜ググわか〜

DOM::「Document Object Model」::(ドキュメント　オブジェクト　モデル)

DOMとはこう言うもの

:point_down_tone1:一つググってもの分からないのでいろんなサイトの一言まとめを集めてみた！

"DOMとはマークアップがなされたリソース（Document）をリソース要素（Object）の木構造（Model）で表現し操作可能にする仕組み、またそのモデル"

"DOMとはJavaScriptでhtmlの要素を操作するための仕組みのこと"

"DOMはブラウザがWebページを解釈したもの"

"DOMは、文書のためのプログラミングAPI"

う〜ん、意味がよくわからない・・・

と言うわけで！　いろいろなまとめから分かりやすくまとめてみた。

つまり・・・

１、Webページの基本的なHTML構造を表現したものでページごとに発行されている

２、ツリー構造（のモデル）で表現されていること

３、jqueryやVue.jsとかは、これを参照して操作する対象を探すことができる！

と言うこと！
※初心者向けにイメージしやすく書いているので、多少の語弊があるかもしれません。

実際に見てみよう！

見るのは簡単！DOMを調べるくらいのあなたなら、すぐに理解できる・・・はず！

このページを右クリック　→　検証　→　Elements(検証クリックしたら最初に出てくる左側の部分)
スクリーンショット 2020-09-17 5.54.07.png

これこれ！

単純なモデルですが、＜html＞のなかに＜head＞と＜body＞が入っていて、
＜head＞...＜/head＞の中にはたくさんの設定が入っていたり、
＜body＞...＜/body＞の中にもdivとかaとかpとかいろいろな要素が階層的（ツリー構造）になって書かれていますね！
スクリーンショット 2020-09-17 6.17.37.png

もはやツリー構造の説明になってる・・・
htmlでidやclassをつけると、それがDOMに反映され、目印になっていて、JSなどの言語によってブラウザ上で操作ができるわけです！

言い換えると、ブラウザ上での何かを変更する際は、JSでDOMにアクセスし、その内容やプロパティを変更しているわけです。

ソースコードを書き換えるわけではありません。

もう一度まとめると

DOMとは、

ページごとに発行されるページの詳細な内容を操作可能にするもの

であることがわかった！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-17T02:57:25+09:00

Material-UIのチェックボックスを使う際はdata属性に注意

はじめに

Reactの人気UIライブラリであるMaterial-UIにおいて、
チェックボックスのonChange時の処理を書いていたらハマった点がありました。

作ろうとしていたもの

テーブルの行ごとにチェックボックスが付いていてクリックすると削除等の処理を行えるものです。
要は各IDを持つリスト型のデータがあり、それに紐づくチェックボックスがあるUIになります。
ですが、このIDの取得ができませんでした。

テーブルのコードを書くのは煩雑なので、要点を絞って簡略化した例で説明します。
注：TypeScriptです。

失敗例

チェックボックスUIにdata属性で各アイテムのidを紐付け、
それをコンソールに表示させようとしています。

function Checkboxs1() {
  const items = [{ id: '1' }, { id: '2' }, { id: '3' }];

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const id = event.currentTarget.dataset.id;
    console.log('id', id);
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <Checkbox data-id={item.id} onChange={handleChange} />
        </li>
      ))}
    </ul>
  );
}

さて結果は...

スクリーンショット 2020-09-17 2.47.34.png

期待外れでした。

ちなみに、チェックボックスUIを<input type="checkbox"...のように素のJSXで表現すれば正しくIDは表示されます。

ここでマークアップ構造を確認すると...

スクリーンショット 2020-09-17 2.50.03.png

data属性はinput要素から沢山離れてしまっています。
落ち着いて考えればあれだけリッチなUIを作るためにはこれくらいマークアップが覆われているのはすぐ想像できるかもしれません。

ということで、data属性にidを紐付ける方法をやめました。

成功例

function Checkboxs2() {
  const items = [{ id: '1' }, { id: '2' }, { id: '3' }];

  const handleChange = (id: string) => {
    console.log('id', id);
  };

  return (
    <ul>
      {items.map((item) => {
        const id = item.id;
        return (
          <li key={id}>
            <Checkbox onChange={() => handleChange(id)} />
          </li>
        );
      })}
    </ul>
  );
}

これを同様にコンソールで確認してみると...

スクリーンショット 2020-09-17 2.54.58.png

正常に取得できています。
これで一件落着ですね。

一癖ありますが、これからもMaterial-UIと良好に付き合っていきたいと思います。

確認用のソースコード全体

App.tsx
import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import './App.css';

function Checkboxs1() {
  const items = [{ id: '1' }, { id: '2' }, { id: '3' }];

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const id = event.currentTarget.dataset.id;
    console.log('id', id);
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <Checkbox data-id={item.id} onChange={handleChange} />
        </li>
      ))}
    </ul>
  );
}

function Checkboxs2() {
  const items = [{ id: '1' }, { id: '2' }, { id: '3' }];

  const handleChange = (id: string) => {
    console.log('id', id);
  };

  return (
    <ul>
      {items.map((item) => {
        const id = item.id;
        return (
          <li key={id}>
            <Checkbox onChange={() => handleChange(id)} />
          </li>
        );
      })}
    </ul>
  );
}

function App() {
  return (
    <div>
      <Checkboxs1 />
      <Checkboxs2 />
    </div>
  );
}

export default App;
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-17T02:57:25+09:00

UIライブラリを使う際の落とし穴

はじめに

Reactの人気UIライブラリであるMaterial-UIにおいて、
チェックボックスのonChange時の処理を書いていたらハマった点がありました。

作ろうとしていたもの

テーブルの行ごとにチェックボックスが付いていてクリックすると削除等の処理を行えるものです。
要は各IDを持つリスト型のデータがあり、それに紐づくチェックボックスがあるUIになります。
ですが、このIDの取得ができませんでした。

テーブルのコードを書くのは煩雑なので、要点を絞って簡略化した例で説明します。
注：TypeScriptです。

失敗例

チェックボックスUIにdata属性で各アイテムのidを紐付け、
それをコンソールに表示させようとしています。

function Checkboxs1() {
  const items = [{ id: '1' }, { id: '2' }, { id: '3' }];

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const id = event.currentTarget.dataset.id;
    console.log('id', id);
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <Checkbox data-id={item.id} onChange={handleChange} />
        </li>
      ))}
    </ul>
  );
}

さて結果は...

スクリーンショット 2020-09-17 2.47.34.png

期待外れでした。

ちなみに、チェックボックスUIを<input type="checkbox"...のように素のJSXで表現すれば正しくIDは表示されます。

ここでマークアップ構造を確認すると...

スクリーンショット 2020-09-17 2.50.03.png

data属性はinput要素から沢山離れてしまっています。
落ち着いて考えればあれだけリッチなUIを作るためにはこれくらいマークアップが覆われているのはすぐ想像できるかもしれません。

ということで、data属性にidを紐付ける方法をやめました。

成功例

function Checkboxs2() {
  const items = [{ id: '1' }, { id: '2' }, { id: '3' }];

  const handleChange = (id: string) => {
    console.log('id', id);
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <Checkbox onChange={() => handleChange(item.id)} />
        </li>
      ))}
    </ul>
  );
}

これを同様にコンソールで確認してみると...

スクリーンショット 2020-09-17 2.54.58.png

正常に取得できています。
これで一件落着ですね。

一癖ありますが、これからもMaterial-UIと良好に付き合っていきたいと思います。

教訓

HTMLの確認を怠らないようにしましょう。

更新履歴

2020/09/17 ソースコードを微調整しました

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧