20210607のHTMLに関する記事は10件です。

投稿日：2021-06-07T23:19:15+09:00

HTML,CSSのよく使うものまとめ

HTMLとCSSでよく使うものまとめ(雑) 　　　　　　　　　　リンク　　　　　　　　　　　画像を表示　　　　　　リスト（先頭に黒点）　, リスト　　　　　　　　　　　, 文字色　　　　　　　　　　　color:色; 文字の大きさ　　　　　　font-size:大きさpx; 書体　　　　　　　　　　　font-family:種類; 背景色　　　　　　　　　　　background-color:色; 高さ　　　　　　　　　　　height:数字px; 幅　　　　　　　　　　　width:数字px; 特定の要素にCSSを適用 ○○ クラス名を与える　　　　　　　　　　　.selected { } DOCTYPE宣言　　　　　　<!DOCTYPE html> 設定に関する情報　　　　　 headの中の要素　　　　　　（文字コードの設定）※文字化け防止　　　　　　　　　　（ブラウザのタブに表示される）　　　　　　　　　　　（CSSの読み込み）リストの黒点削除　　　　　　li{ list-style:none; } 文字を横並びにする　　　　　　float: left; 余白　　　　　　　　　　　padding: 数字px;この場合全ての方向に余白上方向に余白　　　　　　padding-top: 数字px; 下　　　　　　　　　　　padding-bottom 左　　　　　　　　　　　padding-left 右　　　　　　　　　　　padding-right 余白まとめて書く　　　　　　padding: ○px ○px ○px ○px 上→右→下→左　　　　　　　　　　　padding:○px ○px 上下　左右特定のliにCSSを適用　.header-list li{ } 右から順に横並びにする　float: right 文中の一部だけCSS適用させる　文字　　　　　　　　　　　span{ } ボーダー（下線）　　　　　　border-bottom:太さpx 線の種類色ボーダー（囲い）　　　　　　border:太さpx 線の種類色ボーダーの内側全体の余白　padding:○px ; "paddingみたいにまとめられるボーダーの外側全体の余白　margin:○px 一行のテキストボックス　終了タグ不要複数行のテキストボックス　, 送信ボタン　　　　　　 ↑の送信ボタンを別の文字に変更　　　　　　背景画像を設定　　　　　　background-image:url(); コンテナを中央寄せ　　　　　　width:　○パーセントコンテナを中央寄せ　　　　　　margin :0 auto; 透明度　　　　　　　　　　　opacity:○○; （０．０〜１.０）文字間隔　　　　　　　　　　　letter-spacing:○px; ボタン作成　　　　　　タグで作成→display: inline-block;で要素を変える。（block（ブロック要素）, inline-block（インラインブロック要素）, inline（インライン要素）があるカーソル乗ったとき色変更　セレクタ:hover { background-color:red等 } 角を丸くする　　　　　　border-radius: ○px 要素の配置変更　　　　　　text-align:left; テキスト、ボタンとかのインライン、インラインブロック要素はmarginじゃなくてこっち使うフォント（head要素に入れる）　　　　　　　 ※ タグにfaクラスとfa-アイコン名クラスを指定する色を透明　　　　　　　　　　　rgba(○, ○, ○, ○) opacityプロパティは要素全体を透過　rgbaを使うとその色だけを透明にすることが出来る（最後の数値が透明度）文字にアニメーション付ける　　transition: all 0.5s; 行の高さ　　　　　　　　　　　　line-height:○px; 文字の太さ　　　　　　　font-weight:normal; normalまたはbold 配置（％）　　　　　　　　width:25%; （pxじゃなくて％表示にすると親要素に対しての％になる）要素同士を重ねて表示（全体左上基準）　　　　position: absolute; top: px; left:px; 活用するすると要素の移動にも使える要素同士を重ねて表示（指定場所左上基準）　　position: relative; ボックスに影を付ける　　 box-shadow:0px 7px #1a7940; 水平　垂直　色クリック時に変化　　　　　　　セレクタ:active { } クリック時ボタンを凹ませる　　・box-shadowをnoneにする　　　　　　　　　　　・position: relative;とtopによって影の分だけ位置を下げるヘッダーを画面上部に固定　　position:fixed; top:0px; 重なり順序　　　　　　　z-index:10; 背景画像ぴったり　　　　　　　background-size: cover; ボタン作成　　　　　　　　　　　　　　　　　　　

　 Tweet
Qiitaで続きを読む

投稿日：2021-06-07T21:15:01+09:00

【初心者でもわかる】borderは直線を引くだけじゃない！borderを使って出来ること6選+おまけ2つ

どうも7noteです。borderを使って直線を引く以外のできることをまとめました div { border: solid 1px #000; } これ以外使ったことない・・・なんてことありませんか？知ってるようで知らないかもしれない、borderでできることをいろいろまとめました。「直線以外も引ける」わりと基本的な事ですが一応。 borderのスタイルをsolid以外に指定すると、点線や波線も引くことができます。 style.css div { border: dotted 1px #000; /* 点線を引く */ border: dashed 1px #000; /* 破線を引く */ border: double 1px #000; /* 二重線を引く */ } 「曲線も引ける」※波線はちょっと難しい当たり前の人には当たり前かもしれませんが、border-radiusと組み合わせることで曲線を作れます style.css div { border-top: solid 1px #000; /* 線を引く（※borderを4方向に指定すれば円になる） */ border-radius: 50%; /* 曲線にする */ } 「立体感のある線を引く」擬似要素を使ったり、影と組み合わせて立体感のある線を引くことができます。 ※見本画像は背景に(background: #666;)を入れています。「影を使った例」 style.css div { border-bottom: solid 1px #333; box-shadow: 0 1px 0 #ccc; } 「疑似要素を使った例」 style.css div { position: relative; } div::after { content: ''; width: 100%; border-bottom: solid 1px #333; box-shadow: 0 1px 0 #ccc; position: absolute; left: 0; bottom: 0; } 「三角形を作る」三角形も簡単に作れます。この三角形を使って吹き出しを作ったりなんかもよくある手法ですね。三角形ジェネレーターがあるので、そのようなWEBツールを使うのがオススメ！ style.css div { width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #007bff transparent; } 「三角形以外にも台形とかも作れます」 style.css div { width: 20px; /* ここの値で調整可能 */ height: 20px; /* ここの値で調整可能 */ border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #007bff transparent; } 「矢印を作る」 borderの上と右を作成して、45度回転させればよくボタンについてる矢印も作れます。 style.css div { width: 20px; height: 20px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); } 「おまけ」できそうでできない、グラデーションのborderを作るこれはborderを使っては再現ができません。 backgroundを使うことで表現できます。 style.css .div{ width: 100%; height: auto; padding: 0; text-align: center; border-left: 2px solid #43C6AC; border-right: 2px solid #d9e653; } div::before, div::after{ content: ""; display: block; height: 2px; background: linear-gradient(to right, #43C6AC 0%, #d9e653 100%); } 要素の占有範囲を確認するどの要素がどこに表示されているのかわからなくなったり、表示場所なんかが思ってた通りにならない時に、とりあえずborderやbackgroundなどを指定して、状況を確認するのに使います。私自身も始めたての頃は、よくわからなくなったらとりあえずborderを付けて要素の現在置を確認するようにしていました。 ※borderの分だけ要素の横幅が長くなるのでピタピタのデザインだとborderが原因で崩れることなどもあるので注意！参考： http://sdora.sub.jp/blog/?p=511 http://apps.eky.hk/css-triangle-generator/ja https://www.infocrest.co.jp/blog/category/tips/442/ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2021-06-07T21:12:05+09:00

【GAS】（シンプル）スプレッドシートから値取得⇒gasでHTMLメール送信（table形式）

◆やることスプレッドシートから値取得 gasでテーブル形式のhtmlにする htmlメール送信以下コード ◆コードコード.js function myFunction() { //値取得、二次元配列格納 let vals = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getDataRange().getValues(); 　//ここでforを使ってval⇒htmlのtable形式に //オプションでHTMLメール本文を設定する let mailText = "htmlを入れた変数"; let options = {"htmlBody":mailText,}; //GmailApp.sendEmail(メールアドレス,メール表題,本文（htmlメール送信できないとき表示）,htmlメールを設定（{htmlBody：html本文}) GmailApp.sendEmail("メールアドレス","メール表題", mailText , options); } 上記のforの中身を書くとしたら、下記の感じです。コード.js let tbl = "<table border='1' style='border-collapse: collapse;'><tr><th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th><th>ヘッダー4</th><th>ヘッダー25</th><th>ヘッダー6</th></tr>"; //ここでは最後</table>でしめません。forでtrを追加して、一番最後に<table>を追加します。 let newtd =""; vals.forEach(x=>{ //二次元配列valsから一つずつ配列取り出し for(let elnum in x){ //取り出した一次元配列から一つずつ要素取り出し newtd += "<td>"+x[elnum]+"</td>"; } let tr = "<tr>"+newtd+"</tr>" tbl += tr; tr newtd=""; }) let mailText = tbl+"</table>"//ここでtableを閉じます。自分は、あとは送信先アドレス一覧を別シートで用意して、アドレス一覧取得、GmailApp.sendEmail("メールアドレス","件名", "本文" ,); のアドレスに入れました。あと、引っ張ってくる一覧をクエリ関数で作成、GASで日付書き換えて関数で内容変更⇒トリガーで定時に集計メールが届くようにしました。 ◆完成品（ほぼモザイクですいません） ◆その他スプシにメアド書いて、それに送る下記が参考になります。【GAS】スプレッドシートからメールを送信する方法ほかのhtmlファイルからテンプレート持ってくる下記が参考になります。 Google Apps ScriptでGmailからHTMLメールを送信する方法感想これぞ自動化という感じです。

　 Tweet
Qiitaで続きを読む

投稿日：2021-06-07T20:31:33+09:00

【jQuery】タブの作成方法

完成形 SCSSを使用 jQueryを使用 See the Pen RwpJKyX by c-koch0514 (@c-koch0514) on CodePen. HTML html  <div id="tab" class="group"> <ul class="tab-group"> <li class="tab is-active">Tab-A</li> <li class="tab">Tab-B</li> <li class="tab">Tab-C</li> </ul>  <div class="panel-group"> <div class="panel is-show"> Content-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-A </div> <div class="panel"> Content-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-B </div> <div class="panel"> Content-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-C </div> </div> </div>  SCSS scss /***********************************************************************/ /********** タブの設定 *************/ /***********************************************************************/ .group { .tab-group, .panel-group { display: flex; width: 350px; margin: 0 auto; .tab { width: calc(350px / 3); background-color: pink; text-align: center; border: 1px solid #000; cursor: pointer; } .is-active { background-color: red; } .panel { width: 100%; background-color: yellow; border: 1px solid #000; padding: 10px 20px; display: none; } .is-show { display: block; } } } /********************* ena of タブ **********************************/ /***********************************************************************/ jQuery jQuery $(function(){ /***************** タブ **********************/ $('.tab').click(function(){ // クリックした要素の先祖要素の中で、classの値がgroupの要素を取得 const group = $(this).parents('.group'); group.find('.is-active').removeClass('is-active'); $(this).addClass('is-active'); group.find('.is-show').removeClass('is-show'); // クリックしたタブからインデックス番号を取得 var index = $(this).index(); // クリックしたタブと同じインデックス番号をもつコンテンツを表示 group.find(".panel").eq(index).addClass('is-show'); }); /*********************************************************/ }); 同じHTMLに複数タブが存在するとき HTMLで#tab以外のidを持ち、.groupをもったタブを作ればいい html  <div id="tab" class="group"> <ul class="tab-group"> <li class="tab is-active">Tab-A</li> <li class="tab">Tab-B</li> <li class="tab">Tab-C</li> </ul>  <div class="panel-group"> <div class="panel is-show"> Content-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-A </div> <div class="panel"> Content-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-B </div> <div class="panel"> Content-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-C </div> </div> </div>  <div class="group"> <ul class="tab-group"> <li class="tab is-active">Tab-A</li> <li class="tab">Tab-B</li> <li class="tab">Tab-C</li> </ul>  <div class="panel-group"> <div class="panel is-show"> Content-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-AContent-A </div> <div class="panel"> Content-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-BContent-B </div> <div class="panel"> Content-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-CContent-C </div> </div> </div>

　 Tweet
Qiitaで続きを読む

投稿日：2021-06-07T20:16:43+09:00

【jQuery】モーダルの作成方法

完成形 SCSSを使用 jQueryを使用 See the Pen MWpXJmm by c-koch0514 (@c-koch0514) on CodePen. HTML html  <button id="modal-btn">modelを開く</button> <div class="modal"> <div class="modal-bg modal-close"></div> <div class="modal-content"> <h1>モーダルタイトル</h1> <p>モーダルテキストモーダルテキストモーダルテキストモーダルテキストモーダルテキストモーダルテキストモーダルテキストモーダルテキストモーダルテキストモーダルテキストモーダルテキスト</p> <button class="modal-close">閉じる</button> </div> </div>  SCSS scss /***********************************************************************/ /********** modalの設定 *************/ /***********************************************************************/ #modal-btn { background-color: #000000; border-radius: 10px; font-size:15px; color: #fff; width: 130px; height: 50px; } .modal { display: none; height: 100%; position: fixed; top: 0; width: 100%; top: 0; left: 0; z-index: 1; .modal-bg { background: rgba(0, 0, 0, 0.6); height: 100vh; width: 100%; } .modal-content{ width: 300px; height: 200px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 5px; padding: 10px 30px; .modal-close{ position: absolute; top: 0; right: 0; } } } /********************* ena of modal **********************************/ /***********************************************************************/ jQuery jQuery $(function(){ /***************** modal モーダル **********************/ // ウィンドウを開く $('#modal-btn').on('click', function() { $('.modal').fadeIn( 300 ); return false; }); // ウィンドウを閉じる $( '.modal-close' ).on( 'click', function() { $( '.modal' ).fadeOut( 300 ); return false; }); /*********************************************************/ });

　 Tweet
Qiitaで続きを読む

投稿日：2021-06-07T20:02:47+09:00

【jQuery】FAQアコーディオンの作成方法

完成形 SCSSを使用 jQueryを使用 See the Pen abJKBrL by c-koch0514 (@c-koch0514) on CodePen. HTML html <section id="faq"> <dl id="faq-item"> <dt class="question"> <p class="question-text">質問１</p> <p class="plus">+</p> </dt> <dd class="answer">回答１</dd> <dt class="question"> <p class="question-text">質問２</p> <p class="plus">+</p> </dt> <dd class="answer">回答２</dd> <dt class="question"> <p class="question-text">質問３</p> <p class="plus">+</p> </dt> <dd class="answer">回答３</dd> </dl> </section> SCSS scss /***********************************************************************/ /********** FAQの全体 *************/ /***********************************************************************/ #faq { #faq-item { width: 250px; margin: 0 auto; background-color: #eee; font-size: 15px; cursor: pointer; .question { display: flex; justify-content: space-between; } .answer { display: none; } } } /*********************** ena of faq ********************************/ jQuery jQuery $(function(){ /***************** FQAアコーディオン **********************/ $('.question').on('click', function () { $(this).next().slideToggle(); if( $(this).hasClass('close')){ $(this).find('.plus').text("+"); } else{ $(this).find('.plus').text("－"); } $(this).toggleClass('close'); }); /*********************************************************/ });

　 Tweet
Qiitaで続きを読む

投稿日：2021-06-07T16:31:08+09:00

基礎中の基礎：HTMLとCSSでwebデザインする際にはここだけを押さえて！！

完全に個人的にマークアップを学習するにあたって、ここさえ押さえておけば、という部分を書き出しました！！本内容はHTMLとCSSの概念は理解したけど、実際に書いているときのポイントが掴めない方にオススメです。また先にお伝えしておくと完全に自己満ですので、予めご了承ください? それじゃぁ、早速いきましょう！！！ ITリテラシーローカルとクラウドファイルは上から下に順に読み込まれる(下にあるものほど優先順位が上) パスを理解すること順に説明していきます?? ローカルとクラウドみなさんが知っているようで知らない。ここを理解してないと「なんで、サイトが公開できないんだーー?????」ってなったり、「公開は出来たけど、画像が表示されてない。ローカルでは出来たのに、、」と嘆きます。それはローカルとクラウドを理解してないからに他なりません。簡単に一言で言うと、ローカルはPC本体、クラウドはインターネットだと思ってください。そして、この二つは常に繋がっているとは限りません。二回言います。ローカルとクラウドは常に繋がっているわけではない。想像してみてください。「Wi-Fiが飛んでいないからページが見れない。」とよく口にすることがありますよね? でも、PCやスマホ本体は開けますよね？？今、当たり前のことじゃんと思ってませんか？でも、実際にwebサイトを作り、公開するとなると忘れています。だから、特にサイトを公開する際には、クラウド上で完結するように情報をまとめ、クラウドに情報を保管しておくことが大切なんです。また、ローカルで情報を編集したら、クラウドで情報は勝手に更新してくれない。再度更新するためにクラウドに送る必要があることを理解しておきましょう? <まとめ> ①ローカルはPCやスマホ本体を指す。 ②クラウドはインターネットを指す。 ③ローカルとクラウドは常に繋がってる訳ではない。サイトを公開する場合： ①クラウド上で完結するように情報をまとめ、クラウドに情報を保管しておくこと。 ②ローカルで情報を編集したら、クラウドで情報は勝手に更新してくれない。ファイルは上から下に順に読み込まれる(下にあるものほど優先順位が上) これも当たり前と思う方もいるかもしれません。しかし、プログラミングやマークアップを学び始めの時は意外と忘れがちです。基本的、HTMLもCSSといったマークアップ言語も他の言語も基本的に書かれたコードの一番上から読み取られます。何か指定がされない限りは上から下に読み込まれることを理解しておきましょう！上から順に読み込まれていることを忘れている方のケースをお伝えします。主にHTML・CSSを例にしています。 * CSSの書いている箇所がバラバラでしっかりと自分で把握できるように整理していない。 * html・CSSをコーディングする際に、無理やりCSSで調整しようとしがち。以上となります。これを機にぜひ、今一度ファイルは上から下に読み込まれてること。下にあるコードほど優先順位が上であること。を理解しておきましょう！！パスを理解することそもそも、パスってなんですか？？って話なんですが、若干語弊がありますが、簡単に言い換えるとURLです。 URLを覗いてみると、「/」で区切られている時があるのが分かると思います。例えば、次のURLがあるとします。 htps://xxxxx.com/teams/sssss/overview URLを言語化すると、htps://xxxxx.com の中のteams の中の sssss の中の overviewというページを開いているということになります。つまり、どのページや画像を示しているのかを表示するために「/」でフォルダやファイルを区切っています。そして、これには絶対パスと相対パスがあります。絶対パス: 直接、指定したい場所を示します。相対パス: 相対パスは絶対パスとは異なり、ある基準を決めて指定を行ないます。書き方も含めて例をご覧ください。例） topフォルダ -secondフォルダA -ファイルA−１ -ファイルA-2 　　　　-secondフォルダB -ファイルB 例えば上記のような構造があったとします。ファイルAー1から、ファイルAー2を呼び出す際は、「./ファイルA-2」と呼び出します。ファイルAー1から、ファイルBを呼び出す際は「../secondフォルダB/ファイルB」と呼び出します。つまり、ファイルを呼び出す際はどこを基準にしているかがポイントです。ファイルAー2を呼び出す際は、共通のフォルダであるsecondフォルダAを基準とし、ファイルBを呼び出す際には共通のフォルダのtopフォルダを基準にしています。またフォルダを一つ挟んで、違うフォルダを指定する際には「../」と書き始めます。 ※フォルダを二つ挟む場合は「../../」で書き始めます。 HTML 要素の始まりは左上からブロック要素とインライン要素、インラインブロック要素がある親子関係を把握すること要素の始まりは左上から「ブラウザに表示させる際、要素の始まりは左上からが基準である」は、初学者が意外と理解していない部分ですね? 理解していないとどのようなことを起こるのかお伝えすると、CSSで無理やり調整します。更には、 CSSで無理やり調整するーーーー?ーーーーコードの量が増えるーーーー?ーーーー自分の書いている部分が分からなくなるーーーー?ーーーーちょっとブラウザのサイズを変えただけで、サイトが崩れるーーーー?ーーーー手がつけられなくなるというような悪循環が発生しかねません? CSSで無理に調整しようとせずに、要素が左上から始まると理解していれば、無理に左上に調整するプロパティなど要りません。ブロックレベル要素とインライン要素、インラインブロック要素があるこれまた、学んでいくうちに忘れがちな知識かなと思っています。軽視しがちとも言いますか、、、。ともかく、CSSで装飾していくにあたって、ブロックレベル(ブロック要素とも呼ぶ)要素とインライン要素、インラインブロック要素を把握しておけばコードがもっと短くなります。それぞれ把握しておきましょう！ | 要素名 | 幅と高さの指定　| 幅の初期値 |高さの初期値|要素同士の並び方|主なHTMLタグ| |:-----------|------------:|:------------:|:------------:|:------------:|:------------:| | ブロック要素 |可能　　| 親要素に依存する |内容に依存|縦に並ぶ|div、p、h1~h6、ul、など| | インライン要素 |不可能　| 内容で決まる |内容に依存|横に並ぶ|a、li、input、textarea、spanなど| | インラインブロック要素 |可能　　| 内容で決まる |内容に依存|横に並ぶ|---　displayプロパティでinline-blockと指定することがほとんど| 全てのHTMLタグを把握しておく必要はありません。私の場合は、参考サイトで確認することがほとんどです。しかし、ブロックレベル要素とインライン要素、インラインブロック要素が存在することは意識しておく必要があります?‍♂️ 最低限の親子関係を把握することこちらの内容は結論、余裕がない場合は把握する必要がありません。徐々に覚えてけば大丈夫です。矛盾しているようですが、意識できているかどうかの話であり、初学者は調べその場で理解できれば良いと思います? ルールとして、よく知られているのは、インライン要素の中にブロック要素は含まないことです。もちろん、例外はありますが、前提として抑えておくことでまず、親子関係が崩れることはないと思います。親子関係が怪しい際には参考サイトを一度確認した上で使うようにしましょう? また、以下では基本的によくあるページを作る際のタグの使い方・構成をお伝えしていきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> 　　　　　　　　<link rel="" href=""> </head> <body> <header>ヘッダー</header> <div>キービジュアル(またはファーストビュー)</div> <main> <section>段落（実際に内容を書き込む）</section> <section>段落</section> </main> <footer>フッター</footer> </body> </html> 上記のように基本的はwebサイトのページの構成されていることが多いです。 * 大きくheadタグとbodyタグで分けられている。 * body内では、ヘッダー・キービジュアル・メイン・フッターの四段構成。 * メインでは段落（sectionタグ）で区切られている。上記の書き方が出来て、実際に内容を書いていきます。たまにサイトでは、 body内では、ヘッダー・キービジュアル・メイン・フッターの四段構成。メインでは段落（sectionタグ）で区切られている。がないまたは、全てdivタグで囲っているサイトを見かけます。これでは、他のコーダーが見たときに読みにくく、あまり好ましくありません。人に文章を見せる時と同じで、コードも読み手を意識して書く必要があります?‍♂️ CSS クラス名やタグを一言一句間違えないことレスポンシブウェブデザインで絶対に間違えない書き方クラス名やタグを一言一句間違えないこと正直これが一番CSSを実装する上でよくあるミスかと思います⚠️ タイピングしている際に間違えるのはよくあることです。しかし、常にCSSが効かない原因として意識しておくべきことと言えるでしょう。個人的に間違えないようにする方法としてオススメなのは常にhtmlファイルとcssファイルを見れる状態にしておくことです? 実際に以下の画像を参考にコードする際に意識してみてください。必ず、『CSSが反映されてない＝スペルミスや全角半角のスペースが無いか確認する』を癖つけておきましょう！！！レスポンシブウェブデザインで絶対に間違えない書き方初学者がなんとなくCSSが分かってきた❗️となってきてから混乱するのがレスポンシブウェブデザインの実装ですね、、? よく、『レスポンス実装していてPC版のページが崩れた』なんてことがある経験あると思います。事実私も昔はありました? しかし、捉え方を考え方が変わればそこまで難しいことはありません?✨ 一言で言うなら、あるブラウザのサイズ以下（または以上）になったら、プロパティが効くようにするだけです。基本的なレスポンシブウェブデザインをCSSで実装するにあたって、必要になってくるのがメディアクエリですね。書き方は cssファイル @media screen and(max-width:〇〇px){ } となります。ここで注意点はむやみやたらにメディアクエリを乱用しない事です。ファイルの中を記載する際には、完全に以下のように分けるのがオススメです。上記のように完全にファイルの中で区分しておけば、自分自身が書いた場所を見失うことも少なくなります。上記のような分け方はあくまで一例です。ここで一番伝えたいことは、自分で記載したコードをしっかりと把握できるようにしておくことが大事と言うことです? 検証ツールを制するものはコーディングを制す前提今回はchromに搭載されている検証ツールの仕組みをお伝えします！！ windowsやfireFoxでは無いのであらかじめご了承ください。検証ツールができることを覚える検証ツールができることを覚える検証ツールのできることは以下の通りです✌️ 今回はあくまでマークアップを確認する際の主な機能をお伝えします。プログラミングで触る部分は含まれてないものもあります?‍♂️ 1. 実際に反映されているHTML・CSSを確認できる。 * 実験的にCSSを書き込むことができる。 * ブラウザのサイズを変えて確認できる。 * 実際の要素のサイズを確認できる。 * 検証ツールを読み取れると推測ができる。先に伝えたいことは、あくまで実験的や実際のと言う言葉が多いように検証を行なうツールだと言うことです。逆を言えば、検証ツールで実装した内容はローカルには自動的に反映されるなどと言うことはありません。だからこそ、現状を把握することができ、原因の推測ができます? それでは順番に解説していきます。 1.実際に反映されているHTML・CSSを確認できる以下の画像のようにHTMLとCSSの状態を確認することができます。 2.実験的にCSSを書き込むことができる。同様に以下の画像のようにCSSを試験的に反映させることができます。もちろん、プロパティによっては効かないプロパティもありますので、『〇〇プロパティは効くのかどうか』を確認すると言う手段としても使えます? 試験的に試しておけば、わざわざファイルに書き込んでからページをリロードして確認する必要もなくなります。 3.ブラウザのサイズを変えて確認できる。以下の画像のようにブラウザのサイズを変更することが可能です。 4.実際の要素のサイズを確認できる。こちらも同様に以下の画像のように情報を確認することができます。 5.検証ツールを読み取れると推測ができる。例えば、「ブラウザで状態を確認した時にCSSが反映されていない。」と言う状態になったとします?‍♂️ その時、次のことを推測できていますか？？ここは一瞬自分自身で考えていただきたいと思います。クリック CSSで記載したクラス名または、タグ名が間違えている。（スペルミス）プロパティの書き方のミス（記法ミス）親要素で指定したプロパティに影響を受けている。（継承のミス）重複してプロパティの指定をしていたため、ファイルの下部に書いたものが優先されてしまっていた。（重複のミス）いかがだったでしょうか？？推測できました？ぜひ、ブラウザで反映されていないと言う場合は、参考にしてみてください❗️? 最後に、、。以上となります！！！今回、HTMLやCSSを学習を始めて少し知識として身についてきた方向けに書いてみてました！！！今後もタイミングがあれば、書いていく予定です? よろしくお願いいたします！！！！！！！！！

　 Tweet
Qiitaで続きを読む

投稿日：2021-06-07T16:31:08+09:00

基礎：HTMLとCSSでwebデザインする際にはここだけを押さえて?！！

完全に個人的にマークアップを学習するにあたって、ここさえ押さえておけば、という部分を書き出しました！！本内容はHTMLとCSSの概念は理解したけど、実際に書いているときのポイントが掴めない方にオススメです。また先にお伝えしておくと完全に自己満ですので、予めご了承ください? それじゃぁ、早速いきましょう！！！ ITリテラシーローカルとクラウドファイルは上から下に順に読み込まれる(下にあるものほど優先順位が上) パスを理解すること順に説明していきます?? ローカルとクラウドみなさんが知っているようで知らないローカルとクラウドの関係。ここを理解してないと「なんで、サイトが公開できないんだーー?????」ってなったり、「公開は出来たけど、画像が表示されてない。ローカルでは出来たのに、、」となります。それはローカルとクラウドを理解してないからに他なりません。簡単に一言で言うと、ローカルはPC本体、クラウドはインターネットだと思ってください。そして、この二つは常に繋がっているとは限りません。二回言います。ローカルとクラウドは常に繋がっているわけではありません。想像してみてください。「Wi-Fiが飛んでいないからページが見れない。」とよく口にすることがありますよね? でも、PCやスマホ本体は開けますよね？？今、当たり前のことじゃんと思ってませんか？でも、実際にwebサイトを作り、公開するとなると忘れています。だから、特にサイトを公開する際には、クラウド上で完結するように情報をまとめ、クラウドに情報を保管しておくが大切なんです。また、ローカルで情報を編集したら、クラウドで情報は勝手に更新してくれない。再度更新するためにクラウドに送る情報を必要があることを理解しておきましょう? <まとめ> ①ローカルはPCやスマホ本体を指す。 ②クラウドはインターネットを指す。 ③ローカルとクラウドは常に繋がってる訳ではない。サイトを公開する場合： ①クラウド上で完結するように情報をまとめ、クラウドに情報を保管しておくこと。 ②ローカルで情報を編集したら、クラウドで情報は勝手に更新してくれない。ファイルは上から下に順に読み込まれる(下にあるものほど優先順位が上) これも当たり前と思う方もいるかもしれません。しかし、プログラミングやマークアップを学び始めの時は意外と忘れがちです。基本的、HTMLもCSSといったマークアップ言語も他の言語も基本的に書かれたコードの一番上から読み取られます。何か指定がされない限りは上から下に読み込まれることを理解しておきましょう！上から順に読み込まれていることを忘れている方のケースをお伝えします。主にHTML・CSSを例にしています。 * CSSの書いている箇所がバラバラでしっかりと自分で把握できるように整理していない。 * html・CSSをコーディングする際に、無理やりCSSで調整しようとしがち。以上となります。これを機にぜひ、今一度ファイルは上から下に読み込まれてること。下にあるコードほど優先順位が上であること。を理解しておきましょう！！パスを理解することそもそも、パスってなんですか？？って話なんですが、若干語弊がありますが、簡単に言い換えるとURLです。 URLを覗いてみると、「/」で区切られている時があるのが分かると思います。例えば、次のURLがあるとします。 htps://xxxxx.com/teams/sssss/overview URLを言語化すると、htps://xxxxx.com の中のteams の中の sssss の中の overviewというページを開いているということになります。つまり、どのページや画像を示しているのかを表示するために「/」でフォルダやファイルを区切っています。そして、これには絶対パスと相対パスがあります。絶対パス: 直接、指定したい場所を示します。相対パス: 相対パスは絶対パスとは異なり、ある基準を決めて指定を行ないます。書き方も含めて例をご覧ください。例） topフォルダ -secondフォルダA -ファイルA−１ -ファイルA-2 　　　　-secondフォルダB -ファイルB 例えば上記のような構造があったとします。ファイルAー1から、ファイルAー2を呼び出す際は、「./ファイルA-2」と呼び出します。ファイルAー1から、ファイルBを呼び出す際は「../secondフォルダB/ファイルB」と呼び出します。つまり、ファイルを呼び出す際はどこを基準にしているかがポイントです。ファイルAー2を呼び出す際は、共通のフォルダであるsecondフォルダAを基準とし、ファイルBを呼び出す際には共通のフォルダのtopフォルダを基準にしています。またフォルダを一つ挟んで、違うフォルダを指定する際には「../」と書き始めます。 ※フォルダを二つ挟む場合は「../../」で書き始めます。 HTML 要素の始まりは左上からブロック要素とインライン要素、インラインブロック要素がある親子関係を把握すること要素の始まりは左上から「ブラウザに表示させる際、要素の始まりは左上からが基準である」は、初学者が意外と理解していない部分ですね? 理解していないとどのようなことを起こるのかお伝えすると、CSSで無理やり調整します。更には、 CSSで無理やり調整するーーーー?ーーーーコードの量が増えるーーーー?ーーーー自分の書いている部分が分からなくなるーーーー?ーーーーちょっとブラウザのサイズを変えただけで、サイトが崩れるーーーー?ーーーー手がつけられなくなるというような悪循環が発生しかねません? CSSで無理に調整しようとせずに、要素が左上から始まると理解していれば、無理に左上に調整するプロパティなど要りません。ブロックレベル要素とインライン要素、インラインブロック要素があるこれまた、学んでいくうちに忘れがちな知識かなと思っています。軽視しがちとも言いますか、、、。ともかく、CSSで装飾していくにあたって、ブロックレベル(ブロック要素とも呼ぶ)要素とインライン要素、インラインブロック要素を把握しておけばコードがもっと短くなります。それぞれ把握しておきましょう！ | 要素名 | 幅と高さの指定　| 幅の初期値 |高さの初期値|要素同士の並び方|主なHTMLタグ| |:-----------|------------:|:------------:|:------------:|:------------:|:------------:| | ブロック要素 |可能　　| 親要素に依存する |内容に依存|縦に並ぶ|div、p、h1~h6、ul、など| | インライン要素 |不可能　| 内容で決まる |内容に依存|横に並ぶ|a、li、input、textarea、spanなど| | インラインブロック要素 |可能　　| 内容で決まる |内容に依存|横に並ぶ|---　displayプロパティでinline-blockと指定することがほとんど| 全てのHTMLタグを把握しておく必要はありません。私の場合は、参考サイトで確認することがほとんどです。しかし、ブロックレベル要素とインライン要素、インラインブロック要素が存在することは意識しておく必要があります?‍♂️ 最低限の親子関係を把握することこちらの内容は結論、余裕がない場合は把握する必要がありません。徐々に覚えてけば大丈夫です。矛盾しているようですが、意識できているかどうかの話であり、初学者は調べその場で理解できれば良いと思います? ルールとして、よく知られているのは、インライン要素の中にブロック要素は含まないことです。もちろん、例外はありますが、前提として抑えておくことでまず、親子関係が崩れることはないと思います。親子関係が怪しい際には参考サイトを一度確認した上で使うようにしましょう? また、以下では基本的によくあるページを作る際のタグの使い方・構成をお伝えしていきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> 　　　　　　　　<link rel="" href=""> </head> <body> <header>ヘッダー</header> <div>キービジュアル(またはファーストビュー)</div> <main> <section>段落（実際に内容を書き込む）</section> <section>段落</section> </main> <footer>フッター</footer> </body> </html> 上記のように基本的はwebサイトのページの構成されていることが多いです。 * 大きくheadタグとbodyタグで分けられている。 * body内では、ヘッダー・キービジュアル・メイン・フッターの四段構成。 * メインでは段落（sectionタグ）で区切られている。上記の書き方が出来て、実際に内容を書いていきます。たまにサイトでは、 body内では、ヘッダー・キービジュアル・メイン・フッターの四段構成。メインでは段落（sectionタグ）で区切られている。がないまたは、全てdivタグで囲っているサイトを見かけます。これでは、他のコーダーが見たときに読みにくく、あまり好ましくありません。人に文章を見せる時と同じで、コードも読み手を意識して書く必要があります?‍♂️ CSS クラス名やタグを一言一句間違えないことレスポンシブウェブデザインで絶対に間違えない書き方クラス名やタグを一言一句間違えないこと正直これが一番CSSを実装する上でよくあるミスかと思います⚠️ タイピングしている際に間違えるのはよくあることです。しかし、常にCSSが効かない原因として意識しておくべきことと言えるでしょう。個人的に間違えないようにする方法としてオススメなのは常にhtmlファイルとcssファイルを見れる状態にしておくことです? 実際に以下の画像を参考にコードする際に意識してみてください。必ず、『CSSが反映されてない＝スペルミスや全角半角のスペースが無いか確認する』を癖つけておきましょう！！！レスポンシブウェブデザインで絶対に間違えない書き方初学者がなんとなくCSSが分かってきた❗️となってきてから混乱するのがレスポンシブウェブデザインの実装ですね、、? よく、『レスポンス実装していてPC版のページが崩れた』なんてことがある経験あると思います。事実私も昔はありました? しかし、捉え方を考え方が変わればそこまで難しいことはありません?✨ 一言で言うなら、あるブラウザのサイズ以下（または以上）になったら、プロパティが効くようにするだけです。基本的なレスポンシブウェブデザインをCSSで実装するにあたって、必要になってくるのがメディアクエリですね。書き方は cssファイル @media screen and(max-width:〇〇px){ } となります。ここで注意点はむやみやたらにメディアクエリを乱用しない事です。ファイルの中を記載する際には、完全に以下のように分けるのがオススメです。上記のように完全にファイルの中で区分しておけば、自分自身が書いた場所を見失うことも少なくなります。上記のような分け方はあくまで一例です。ここで一番伝えたいことは、自分で記載したコードをしっかりと把握できるようにしておくことが大事と言うことです? 検証ツールを制するものはコーディングを制す前提今回はchromに搭載されている検証ツールの仕組みをお伝えします！！ windowsやfireFoxでは無いのであらかじめご了承ください。検証ツールができることを覚える検証ツールができることを覚える検証ツールのできることは以下の通りです✌️ 今回はあくまでマークアップを確認する際の主な機能をお伝えします。プログラミングで触る部分は含まれてないものもあります?‍♂️ 1. 実際に反映されているHTML・CSSを確認できる。 * 実験的にCSSを書き込むことができる。 * ブラウザのサイズを変えて確認できる。 * 実際の要素のサイズを確認できる。 * 検証ツールを読み取れると推測ができる。先に伝えたいことは、あくまで実験的や実際のと言う言葉が多いように検証を行なうツールだと言うことです。逆を言えば、検証ツールで実装した内容はローカルには自動的に反映されるなどと言うことはありません。だからこそ、現状を把握することができ、原因の推測ができます? それでは順番に解説していきます。 1.実際に反映されているHTML・CSSを確認できる以下の画像のようにHTMLとCSSの状態を確認することができます。 2.実験的にCSSを書き込むことができる。同様に以下の画像のようにCSSを試験的に反映させることができます。もちろん、プロパティによっては効かないプロパティもありますので、『〇〇プロパティは効くのかどうか』を確認すると言う手段としても使えます? 試験的に試しておけば、わざわざファイルに書き込んでからページをリロードして確認する必要もなくなります。 3.ブラウザのサイズを変えて確認できる。以下の画像のようにブラウザのサイズを変更することが可能です。 4.実際の要素のサイズを確認できる。こちらも同様に以下の画像のように情報を確認することができます。 5.検証ツールを読み取れると推測ができる。例えば、「ブラウザで状態を確認した時にCSSが反映されていない。」と言う状態になったとします?‍♂️ その時、次のことを推測できていますか？？ここは一瞬自分自身で考えていただきたいと思います。クリック CSSで記載したクラス名または、タグ名が間違えている。（スペルミス）プロパティの書き方のミス（記法ミス）親要素で指定したプロパティに影響を受けている。（継承のミス）重複してプロパティの指定をしていたため、ファイルの下部に書いたものが優先されてしまっていた。（重複のミス）いかがだったでしょうか？？推測できました？ぜひ、ブラウザで反映されていないと言う場合は、参考にしてみてください❗️? 最後に、、。以上となります！！！今回、HTMLやCSSを学習を始めて少し知識として身についてきた方向けに書いてみてました！！！今後もタイミングがあれば、書いていく予定です? よろしくお願いいたします！！！！！！！！！

　 Tweet
Qiitaで続きを読む

投稿日：2021-06-07T16:31:08+09:00

基礎：HTMLとCSSで書くときのコツ

完全に個人的にマークアップを学習するにあたって、ここさえ押さえておけば、という部分を書き出しました！！本内容はHTMLとCSSの概念は理解したけど、実際に書いているときのポイントが掴めない方にオススメです。また先にお伝えしておくと完全に自己満ですので、若干偏見もあります。予めご了承ください? それじゃぁ、早速いきましょう！！！ ITリテラシーローカルとクラウドファイルは上から下に順に読み込まれる(下にあるものほど優先順位が上) パスを理解すること順に説明していきます?? ローカルとクラウドみなさんが知っているようで知らないローカルとクラウドの関係。ここを理解してないと「なんで、サイトが公開できないんだーー?????」ってなったり、「公開は出来たけど、画像が表示されてない。ローカルでは出来たのに、、」となります。それはローカルとクラウドを理解してないからに他なりません。簡単に一言で言うと、ローカルはPC本体、クラウドはインターネットだと思ってください。そして、この二つは常に繋がっているとは限りません。二回言います。ローカルとクラウドは常に繋がっているわけではありません。想像してみてください。「Wi-Fiが飛んでいないからページが見れない。」とよく口にすることがありますよね? でも、PCやスマホ本体は開けますよね？？今、当たり前のことじゃんと思ってませんか？しかし、実際にwebサイトを作り、公開するとなると忘れガチだったりします。そのため、特にサイトを公開する際には、クラウド上で完結するように情報をまとめ、クラウドに情報を保管しておくが大切なんです。また、ローカルで情報を編集したら、クラウドで情報は勝手に更新してくれない。再度更新するためにクラウドに送る情報を必要があることを理解しておきましょう? <まとめ> ①ローカルはPCやスマホ本体を指す。 ②クラウドはインターネットを指す。 ③ローカルとクラウドは常に繋がってる訳ではない。サイトを公開する場合： ①クラウド上で完結するように情報をまとめ、クラウドに情報を保管しておくこと。 ②ローカルで情報を編集したら、クラウドで情報は勝手に更新してくれない。ファイルは上から下に順に読み込まれる(下にあるものほど優先順位が上) これも当たり前と思う方もいるかもしれません。しかし、プログラミングやマークアップを学び始めの時は意外と忘れがちです。基本的、HTMLもCSSといったマークアップ言語も他の言語も基本的に書かれたコードの一番上から読み取られます。何か指定がされない限りは上から下に読み込まれることを理解しておきましょう！上から順に読み込まれていることを忘れている方のケースをお伝えします。主にHTML・CSSを例にしています。 * CSSの書いている箇所がバラバラでしっかりと自分で把握できるように整理していない。 * html・CSSをコーディングする際に、無理やりCSSで調整しようとしがち。以上となります。これを機にぜひ、今一度ファイルは上から下に読み込まれてること。下にあるコードほど優先順位が上であること。を理解しておきましょう！！パスを理解することそもそも、パスってなんですか？？って話なんですが、若干語弊がありますが、簡単に言い換えるとURLです。 URLを覗いてみると、「/」で区切られている時があるのが分かると思います。例えば、次のURLがあるとします。 htps://xxxxx.com/teams/sssss/overview URLを言語化すると、htps://xxxxx.com の中のteams の中の sssss の中の overviewというページを開いているということになります。つまり、どのページや画像を示しているのかを表示するために「/」でフォルダやファイルを区切っています。そして、これには絶対パスと相対パスがあります。絶対パス: 直接、指定したい場所を示します。相対パス: 相対パスは絶対パスとは異なり、ある基準を決めて指定を行ないます。書き方も含めて例をご覧ください。例） topフォルダ -secondフォルダA -ファイルA−１ -ファイルA-2 　　　　-secondフォルダB -ファイルB 例えば上記のような構造があったとします。ファイルAー1から、ファイルAー2を呼び出す際は、「./ファイルA-2」と呼び出します。ファイルAー1から、ファイルBを呼び出す際は「../secondフォルダB/ファイルB」と呼び出します。つまり、ファイルを呼び出す際はどこを基準にしているかがポイントです。ファイルAー2を呼び出す際は、共通のフォルダであるsecondフォルダAを基準とし、ファイルBを呼び出す際には共通のフォルダのtopフォルダを基準にしています。またフォルダを一つ挟んで、違うフォルダを指定する際には「../」と書き始めます。 ※フォルダを二つ挟む場合は「../../」で書き始めます。 HTML 私個人的に学び始めてから数日経ってる方に抑えておいた方がいいポイントは以下です?? * 要素の始まりは左上から * ブロック要素とインライン要素、インラインブロック要素がある * 親子関係を把握すること要素の始まりは左上から「ブラウザに表示させる際、要素の始まりは左上からが基準である」は、初学者が意外と理解していない部分ですね? 理解していないとどのようなことを起こるのかお伝えすると、CSSで無理やり調整します。更には、 CSSで無理やり調整するーーーー?ーーーーコードの量が増えるーーーー?ーーーー自分の書いている部分が分からなくなるーーーー?ーーーーちょっとブラウザのサイズを変えただけで、サイトが崩れるーーーー?ーーーー手がつけられなくなるというような悪循環が発生しかねません? CSSで無理に調整しようとせずに、要素が左上から始まると理解していれば、無理に左上に調整するプロパティなど要りません。ブロックレベル要素とインライン要素、インラインブロック要素があるこれまた、学んでいくうちに忘れがちな知識かなと思っています。軽視しがちとも言いますか、、、。ともかく、CSSで装飾していくにあたって、ブロックレベル(ブロック要素とも呼ぶ)要素とインライン要素、インラインブロック要素を把握しておけばコードがもっと短くなります。それぞれ把握しておきましょう！ | 要素名 | 幅と高さの指定　| 幅の初期値 |高さの初期値|要素同士の並び方|主なHTMLタグ| |:-----------|------------:|:------------:|:------------:|:------------:|:------------:| | ブロック要素 |可能　　| 親要素に依存する |内容に依存|縦に並ぶ|div、p、h1~h6、ul、など| | インライン要素 |不可能　| 内容で決まる |内容に依存|横に並ぶ|a、li、input、textarea、spanなど| | インラインブロック要素 |可能　　| 内容で決まる |内容に依存|横に並ぶ|---　displayプロパティでinline-blockと指定することがほとんど| 全てのHTMLタグを把握しておく必要はありません。私の場合は、参考サイトで確認することがほとんどです。しかし、ブロックレベル要素とインライン要素、インラインブロック要素が存在することは意識しておく必要があります?‍♂️ 最低限の親子関係を把握することこちらの内容は結論、余裕がない場合は把握する必要がありません。徐々に覚えてけば大丈夫です。矛盾しているようですが、意識できているかどうかの話であり、初学者は調べその場で理解できれば良いと思います? ルールとして、よく知られているのは、インライン要素の中にブロック要素は含まないことです。もちろん、例外はありますが、前提として抑えておくことでまず、親子関係が崩れることはないと思います。親子関係が怪しい際には参考サイトを一度確認した上で使うようにしましょう? また、以下では基本的によくあるページを作る際のタグの使い方・構成をお伝えしていきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> 　　　　　　　　<link rel="" href=""> </head> <body> <header>ヘッダー</header> <div>キービジュアル(またはファーストビュー)</div> <main> <section>段落（実際に内容を書き込む）</section> <section>段落</section> </main> <footer>フッター</footer> </body> </html> 上記のように基本的はwebサイトのページの構成されていることが多いです。 * 大きくheadタグとbodyタグで分けられている。 * body内では、ヘッダー・キービジュアル・メイン・フッターの四段構成。 * メインでは段落（sectionタグ）で区切られている。上記の書き方が出来て、実際に内容を書いていきます。たまにサイトでは、 body内では、ヘッダー・キービジュアル・メイン・フッターの四段構成。メインでは段落（sectionタグ）で区切られている。がないまたは、全てdivタグで囲っているサイトを見かけます。これでは、他のコーダーが見たときに読みにくく、あまり好ましくありません。人に文章を見せる時と同じで、コードも読み手を意識して書く必要があります?‍♂️ CSS クラス名やタグを一言一句間違えないことレスポンシブウェブデザインで絶対に間違えない書き方クラス名やタグを一言一句間違えないこと正直これが一番CSSを実装する上でよくあるミスかと思います⚠️ タイピングしている際に間違えるのはよくあることです。しかし、常にCSSが効かない原因として意識しておくべきことと言えるでしょう。個人的に間違えないようにする方法としてオススメなのは常にhtmlファイルとcssファイルを見れる状態にしておくことです? 実際に以下の画像を参考にコードする際に意識してみてください。必ず、『CSSが反映されてない＝スペルミスや全角半角のスペースが無いか確認する』を癖つけておきましょう！！！レスポンシブウェブデザインで絶対に間違えない書き方初学者がなんとなくCSSが分かってきた❗️となってきてから混乱するのがレスポンシブウェブデザインの実装ですね、、? よく、『レスポンス実装していてPC版のページが崩れた』なんてことがある経験あると思います。事実私も昔はありました? しかし、捉え方を考え方が変わればそこまで難しいことはありません?✨ 一言で言うなら、あるブラウザのサイズ以下（または以上）になったら、プロパティが効くようにするだけです。基本的なレスポンシブウェブデザインをCSSで実装するにあたって、必要になってくるのがメディアクエリですね。書き方は cssファイル @media screen and(max-width:〇〇px){ } となります。ここで注意点はむやみやたらにメディアクエリを乱用しない事です。ファイルの中を記載する際には、完全に以下のように分けるのがオススメです。上記のように完全にファイルの中で区分しておけば、自分自身が書いた場所を見失うことも少なくなります。上記のような分け方はあくまで一例です。ここで一番伝えたいことは、自分で記載したコードをしっかりと把握できるようにしておくことが大事と言うことです? 検証ツールを制するものはコーディングを制す前提今回はchromに搭載されている検証ツールの仕組みをお伝えします！！ windowsやfireFoxでは無いのであらかじめご了承ください? 検証ツールができることを覚える検証ツールのできることは以下の通りです✌️ 今回はあくまでマークアップを確認する際の主な機能をお伝えします。プログラミングで触る部分は含まれてないものもあります?‍♂️ 1. 実際に反映されているHTML・CSSを確認できる。 * 実験的にCSSを書き込むことができる。 * ブラウザのサイズを変えて確認できる。 * 実際の要素のサイズを確認できる。 * 検証ツールを読み取れると推測ができる。先に伝えたいことは、あくまで実験的や実際のと言う言葉が多いように検証を行なうツールだと言うことです。逆を言えば、検証ツールで実装した内容はローカルには自動的に反映されるなどと言うことはありません。だからこそ、現状を把握することができ、原因の推測ができます? それでは順番に解説していきます。 1.実際に反映されているHTML・CSSを確認できる以下の画像のようにHTMLとCSSの状態を確認することができます。 2.実験的にCSSを書き込むことができる。同様に以下の画像のようにCSSを試験的に反映させることができます。もちろん、プロパティによっては効かないプロパティもありますので、『〇〇プロパティは効くのかどうか』を確認すると言う手段としても使えます? 試験的に試しておけば、わざわざファイルに書き込んでからページをリロードして確認する必要もなくなります。 3.ブラウザのサイズを変えて確認できる。以下の画像のようにブラウザのサイズを変更することが可能です。 4.実際の要素のサイズを確認できる。こちらも同様に以下の画像のように情報を確認することができます。 5.検証ツールを読み取れると推測ができる。例えば、「ブラウザで状態を確認した時にCSSが反映されていない。」と言う状態になったとします?‍♂️ その時、次のことを推測できていますか？？ここは一瞬自分自身で考えていただきたいと思います。クリック CSSで記載したクラス名または、タグ名が間違えている。（スペルミス）プロパティの書き方のミス（記法ミス）親要素で指定したプロパティに影響を受けている。（継承のミス）重複してプロパティの指定をしていたため、ファイルの下部に書いたものが優先されてしまっていた。（重複のミス）いかがだったでしょうか？？推測できました？ぜひ、ブラウザで反映されていないと言う場合は、参考にしてみてください❗️? 最後に、、。以上となります！！！今回、HTMLやCSSを学習を始めて少し知識として身についてきた方向けに書いてみてました！！！今後もタイミングがあれば、書いていく予定です? よろしくお願いいたします！！！！！！！！！

　 Tweet
Qiitaで続きを読む

投稿日：2021-06-07T12:13:43+09:00

target = "_blank"の脆弱性について

はじめにオリジナルポートフォリオ作成でビューに苦戦しており、スクールで一番最初に学習したHTML・CSSが抜けている事に気付きました。スクール同期から「スクールの学習に補う形でドットインストールをいいですよ！」と勧めて頂いたので学習し始めました。そこでスクールでは学習しなかった知識があったのでアウトプットしていきます。 target = "_blank" ページを別タブで開く文字をクリックしたら別のページに遷移させたいとします。その場合、以下のようにaタグとhref属性を以下のように記述します。 <p>私のマイページは「<a href="https://qiita.com/N396184501">こちら</a>」です！</p> 「こちら」をクリックしたらqiitaのマイページに遷移する事ができます。参考 aタグは、リンク＝次のページ・コンテンツへつながるドアのようなもので、ドアの先の行き先がhref属性となります。ページの遷移を仕方で別のタブを開いてページを遷移させたい場合は target="_blank"を使用します。 <p>私のマイページは「<a href="https://qiita.com/N396184501" target="_blank">こちら</a>」です！</p> aタグの中に組み込む事で別のページに遷移する事ができます。 target="_blank について深掘りしていくと脆弱性があり、使うのはよろしくないとの記事がありました。「web.dev」というGoogleが開発しているwebサイトのパフォーマンスを分析できるサイトに記載されておりました。和訳すると、 target="_blank "属性を使って他のサイトのページにリンクすると、サイトのパフォーマンスやセキュリティ上の問題が発生する可能性があります。 target="_blank "リンクにrel="noopener "またはrel="noreferrer "を追加することで、これらの問題を回避することができます。 <p>私のマイページは「<a href="https://qiita.com/N396184501" target="_blank" rel="noopnener">こちら</a>」です！</p> rel="noopnenerをつける事で改善されるようです。最後にスクールで学習した以外にもまだまだ学ぶ事があるという事が分かりました。また今回でカリキュラムに書いてある事を使うのではなく、調べる大切さを知りました。

　 Tweet
Qiitaで続きを読む

20210607のHTMLに関する記事は10件です。

HTML,CSSのよく使うものまとめ

【初心者でもわかる】borderは直線を引くだけじゃない！borderを使って出来ること6選+おまけ2つ

【GAS】（シンプル）スプレッドシートから値取得⇒gasでHTMLメール送信（table形式）

【jQuery】タブの作成方法

【jQuery】モーダルの作成方法

【jQuery】FAQアコーディオンの作成方法

基礎中の基礎：HTMLとCSSでwebデザインする際にはここだけを押さえて！！

基礎：HTMLとCSSでwebデザインする際にはここだけを押さえて?！！

基礎：HTMLとCSSで書くときのコツ

target = "_blank"の脆弱性について

日付別

タグ一覧