What's New Qiita

20210908のHTMLに関する記事は8件です。

  • 投稿日：2021-09-08T23:45:32+09:00

a要素とclass要素の合体コーディング！！

◾️ 普通a要素とclass要素を同時に使う際、下記のような　書き方になる。 最初にclass要素が来て、その後にa要素が付く感じだが、コードが見難いと密かに思っていた ◾️ 下記のようなコードの書き方なら簡潔で、見易くなる。 このような書き方にすることで、a要素とclass要素を合体できる！ 今日の投稿は以上です。是非この学びを頭にマージしていきましょう！ wagaでした！
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-08T23:05:09+09:00

display:flexで横並びにした子要素の高さが変になってしまった時の対処法【HTML・CSS】

display:flexで横並びにした子要素の高さが変になってしまった時の対処法 最近携わった案件で使用した、テクニックとして定着していなかった技術について。 これからHTML・CSSを学ぶエンジニアのヒントになればと思います。 もくじ 1.　どういう問題が起きたか。 2.　問題に対する対処法。 3.　align-itemsについて。 4.　まとめ 1.　どういう問題が起きたか。 ・よくあるカードを横並びにしたやつ。上辺の基準として揃えたい。 ・子要素に当たるカードは body に当たる部分に、全方向 padding 10pxを入れて、borderで囲みたい。 ・子要素の高さはそれぞれ異なり、内容は変更される可能であるため、決め打ちではなくheight:autoを使いたい。 以上の条件を踏まえて、 親要素をdisplay:flexとし、子要素を横並びにすると、一番長い高さに揃えられてしまった。 See the Pen by ShinEndo (@shinendo) on CodePen. 2.　問題に対する対処法。 display:flexを指定した要素に「align-items:flex-start」を追加。 ※上との違いをわかりやすくするためにborderの色をred → blue に変更しています。 See the Pen by ShinEndo (@shinendo) on CodePen. 無事、bodyの全方向に padding 10pxを含んだカードができた。 3.　align-itemsについて。 align-itemsは「flexboxの交差軸に対しての子要素の配置を決める」 ※flex-direction:rowの場合はy軸方向の配置を。flex-direction:columnの場合はx軸方向の配置を。 flexboxのプロパティであるalign-itemsの初期値はalign-items:stretchである。 align-items:stretchはflexboxの子要素（flexboxアイテム）を伸縮する。 4. まとめ 問題が生じた際、align-itemsの初期値がstretchであることを知らなかった。 というのも今まで、flexboxの子要素の高さは決め打ちしているものが多かったためである。 （あるいは、align-items:centerで中央揃えにしていた） flexboxで複数個の子要素を並べる際は、align-itemsの指定をあらかじめしておくほうが、予期せぬ動きは避けられるだろう。 この機会に、align-items:flex-startを習得したい。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-08T22:10:40+09:00

【HTML&CSS】id属性とclass属性の使い分け方

はじめに プログラミング学習を始めた当初、idとclassってどういう使い分けをしてるんだろうって思っていました。 同じように思っている初学者がいると思うので、簡単に説明していきます。 id属性 同じwebページ内で一度しか同じ値を使えません。 その代わり、class属性に優先してスタイルをつけることができます。 CSSに書く際は、頭に「#」を付けて記述します。 HTML <div id="id名">hello</div> css #id名{ color: red; } ・同じ値は一度しか使えないので、これはダメ！ HTML <div id="hello">hello</div> <div id="hello">こんにちは</div> class属性 idと違い、同じwebページ内で何度も同じ値を使うことができます。 CSSに書く際は、頭に「.」を付けて記述します。 html <div class="class名">hello</div> css .class名{ color: red; } ・同じ値を何度でも使えるので、これはオッケー！ HTML <div class="hello">hello</div> <div class="hello">HELLO</div> <div class="hello">こんにちは</div> おわりに 基本的にはclass属性を使い、ピンポイントでスタイルを適用したいようなときがあればid属性を使えば良いでしょう。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-08T22:09:16+09:00

iOSのLINEの内臓ブラウザが、POSTフォームのtarget=_blankで挙動が狂う件

概要 iOSのLINEブラウザの挙動がおかしくてはまりました。 現象 環境：iOSのLINEとYahooの内臓ブラウザ（ほかにもあるかもしれない。） 条件：POSTメソッドのformタグで、target="_blank"が指定されている 結果：formのaction先には遷移するが、formのパラメータはすべて抜け落ちる 再現 1. コード html01.html <html> <head> <meta charset="UTF-8" /> <style type="text/css"> div { border: 1px solid black; margin-top:10px; } </style> </head> <body> <div> targetなしPOSTフォーム <form action="./php01.php" method="POST"> <input name="name" type="text" value="kumanobori" /> <input name="type" type="text" value="kuma" /> <input type="submit" /> </form> </div> <div> targetありPOSTフォーム <form action="./php01.php" method="POST" target="_blank"> <input name="name" type="text" value="kumanobori" /> <input name="type" type="text" value="kuma" /> <input type="submit" /> </form> </div> </body> </html> php01.php <?php echo 'REQUEST_URI: ' . $_SERVER['REQUEST_URI'] . '<br />'; echo 'POST:' . mb_ereg_replace("\r|\n", '', print_r($_POST, true)) . '<br />'; 2. html表示 3. 正常な結果（iOSのLine内臓ブラウザのtargetありの場合以外） 4. 異常な結果（iOSのLine内臓ブラウザのtargetありの場合） 回避策 User-Agentで判定して、 target="_blank" の出力有無を制御しました。 その他 試した環境（以下は全部セーフ） iOS slack内臓 iOS chrome iOS Safari android Yahoo内臓 android LINE内臓 android chrome 上記コード以外で試した条件（以下は全部セーフ） GETメソッドのformの target="_blank" aタグの target="_blank" ポエム LINEブラウザの挙動がおかしいってことで調査したのですが、こんな使い古したオプションで挙動が狂うとは思わず、思い切りはまりました。。。 2021.09.10 追記 スマホのLINE内臓ブラウザだと「新しいウィンドウ」という概念がないわけで、そこに事情があるんだろうなという気はしなくもないです。 でもandroid版はちゃんとしてるしー。（新しいウィンドウは開かないけど、ちゃんと遷移する） で、Yahooアプリに至っては内臓ブラウザがマルチタブ対応してるからそこに事情を斟酌する余地すらないしー。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-08T19:16:33+09:00

【CSS】ボックスモデルとは　〜マージンとパディングの違い〜

　はじめに CSSを勉強してて、ボックスモデルを説明できるように簡単にまとめてみました。 コンテントボックスとは 実際の横幅と高さ 基本はwidthとheight html <div class="box">ボックススタイルブロック</div> css .box { /* background-color: green; */ /* Content Box*/ width: 200px; height: 200px; } パディングボックスとは コンテントボックスから外側までどのくらい空けるか padding:上　右　左　下の順で書く(ショートハンドという) html <div class="box">ボックススタイルブロック</div> css .box { background-color: green; /* Padding Box */ padding: 8px 10px 15px 30px; } マージンボックスとは 他の要素からどのくらい空けるか html <div class="box">ボックススタイルブロック</div> css .box { background-color: green; /* Margin Box */ margin: 8px 10px 15px 30px;; } マージンの相殺とは マージが重なると値が大きいほうが優先される 下記のコードの場合margin-topの値が大きいため、margin-top: 40px;が適用される html <div class="box">ボックススタイルブロック</div> <div class="margin">マージン相殺用の説明のブロック</div> css .box { background-color: green; margin-bottom: 20px; } .margin { background-color: blue; margin-top: 40px; } ボーダーボックスとは border: 先の太さ 線の種類 線の色と書く html <div class="box">ボックススタイルブロック</div> css .box { background-color: green; /* Content Box*/ width: 200px; height: 200px; /* Border Box */ border: 5px solid black; } Box-Sizing プロパティについて ボーダーとパディングの値が加わって、実際の指定した値よりも大きくなることがある。これは、直感的ではないのでBox-Sizing プロパティを使うと良い Box-Sizingプロパティをつかうとwidthとheightで指定した大きさになる MDNのドキュメント　CSS ボックスモデルの代替 html <div class="box">ボックススタイルブロック</div> css .box { background-color: green; /* Content Box*/ width: 200px; height: 200px; /* Padding Box*/ padding: 8px 10px 15px 30px; /* Margin Box */ margin: 8px 10px 15px 30px; box-sizing: border-box; }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-08T16:37:41+09:00

ExcelVBAで、IEを捕まえて、(html)documentの中身をさらう

ExcelVBAで、IEを捕まえて、(html)documentの中身をさらう 従来方式 sample.vb '/---------- Sub a1() Set objShell = CreateObject("Shell.Application") For Each ie_target In objShell.Windows Debug.Print ie_target.LocationName Next End Sub '/---------- Sub a2() Dim ie_target Set objShell = CreateObject("Shell.Application") For Each ie_target In objShell.Windows 'Debug.Print ie_target.LocationName pp = "Google" '"捕まえたいIEのウィンドウのタイトル名" If Left(ie_target.LocationName, Len(pp)) = pp Then Set ie_object = ie_target For Each i In ie_object.document.all If i.tagName = "DIV" Then Debug.Print i.innerHTML End If Next i End If Next End Sub 「IE11」終了後、EdgeのIEモードの場合 下記で、Internet Explorer_Serverから、 HtmlDocumentを取得するソースをgithubに上げてらっしゃいました。 素晴らしい。。。 Benshi/HtmlDocumentHelper.bas https://gist.github.com/Benshi/8442005d21e8e74bd4d3735a3e77c417 https://twitter.com/Benshi_Orator/status/1395608086807650304 https://twitter.com/Benshi_Orator/status/1396767727314903040 https://twitter.com/Benshi_Orator/status/1396770128012791818 呼び出し例（エクセル） HtmlDocumentHelper.bas　の　呼び出し例（エクセル） sample.vb Sub test1() Dim hd As MSHTML.IHTMLDocument Set hd = GetHtmlDocument(&H95065C) '← 95065C が hwnd Debug.Print hd.body.outerHTML Sheets("Sheet1").Cells(1, 1).Value = hd.body.outerHTML End Sub IEのhwndを得る方法 Internet Explorer_Serverのhwndを得る方法は、以下が一例 ExcelVBAで、Windowsの全画面のhwndとClassNameを列挙（一部クラス名で絞込） https://qiita.com/santarou6/items/6a2c2e186cd0d555d2bd 以上
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-08T16:37:41+09:00

ExcelVBAで、IE(あるいはIEモードのEdge)を捕まえて、(html)documentの中身をさらう

ExcelVBAで、IE(あるいはIEモードのEdge)を捕まえて、(html)documentの中身をさらう エクセルファイル santarou6/excelvba_ie_edge https://github.com/santarou6/excelvba_ie_edge/blob/main/sample.xlsm 従来方式 sample.vb '/---------- Sub a1() Set objShell = CreateObject("Shell.Application") For Each ie_target In objShell.Windows Debug.Print ie_target.LocationName Next End Sub '/---------- Sub a2() Dim ie_target Set objShell = CreateObject("Shell.Application") For Each ie_target In objShell.Windows 'Debug.Print ie_target.LocationName pp = "Google" '"捕まえたいIEのウィンドウのタイトル名" If Left(ie_target.LocationName, Len(pp)) = pp Then Set ie_object = ie_target For Each i In ie_object.document.all If i.tagName = "DIV" Then Debug.Print i.innerHTML End If Next i End If Next End Sub 「IE11」終了後、EdgeのIEモードの場合 下記で、Internet Explorer_Serverから、 HtmlDocumentを取得するソースをgithubに上げてらっしゃいました。 素晴らしい。。。 Benshi/HtmlDocumentHelper.bas https://gist.github.com/Benshi/8442005d21e8e74bd4d3735a3e77c417 https://twitter.com/Benshi_Orator/status/1395608086807650304 https://twitter.com/Benshi_Orator/status/1396767727314903040 https://twitter.com/Benshi_Orator/status/1396770128012791818 呼び出し例（エクセル） HtmlDocumentHelper.bas　の　呼び出し例（エクセル） sample.vb Sub test1() Dim hd As MSHTML.IHTMLDocument Set hd = GetHtmlDocument(&H95065C) '← 95065C が hwnd Debug.Print hd.body.outerHTML Sheets("Sheet1").Cells(1, 1).Value = hd.body.outerHTML End Sub IEのhwndを得る方法 Internet Explorer_Serverのhwndを得る方法は、以下が一例 ExcelVBAで、Windowsの全画面のhwndとClassNameを列挙（一部クラス名で絞込） https://qiita.com/santarou6/items/6a2c2e186cd0d555d2bd エクセルファイル santarou6/excelvba_ie_edge https://github.com/santarou6/excelvba_ie_edge/blob/main/sample.xlsm 以上
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-09-08T13:06:33+09:00

CSS コンテンツ量が少ない時にフッターをしたに表示させつつ、フッターを固定させない

はじめに なんでフッターがコンテンツに被ってるねん！！！ フッターをposition:fixedで固定したからか？ でも下で固定しとかな、コンテンツが少ない時フッターが上にあがってきてしまう。。。 ・コンテンツ量が多い時、スクロールしたら下にフッターがある ・コンテンツ量が少ない時、常に下にフッターがある ?を同時に実現するにはどうしたらいいか・・・ Webのcssを触るのが久々で、結構な時間こんな問題と格闘してしまった。。 cssだけで解決してみせます <body> <div class="wrapper"> <header> <!--グローバルナビなど--> </header> <main> <!--ここにコンテンツの内容--> </main> <footer> <p>Copyright © 2021</p> </footer> </div> </body> .wrapper{ min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */ position: relative;/* ←相対位置 */ padding-bottom: 60px; /* ←フッターの高さを指定 */ /* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */ } footer{ position: absolute;/* ←絶対位置 */ bottom: 0; text-align: center; } か、解決した。。。！！ コメントより 別のやり方も教えてもらいました！① headerとfooterのheightが分かっているならmainのmin-heightをcalc(100vh - var(--header-height) - var(--footer-height))と言う感じに設定してあげればfooterのpositionをabsoluteにする必要はなくなりますよ。 mainの中に下方向マージンが大きく取られたものが入るとfooterが押しやられるので、mainに適当な幅で下方向paddingを入れてやると崩れにくくなります。 @felis さん、ありがとうございます！ 別のやり方も教えてもらいました！② wrapperをフレックスブロックのmin-height: 100vh; flex-direction: columnで縦積みにし、mainをflex: 1 1 auto;にするとmainがフレックスアイテムになって良い具合に伸びます。 というやり方もできます @right714 さん、ありがとうございます！
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧