Bootstarpを使っていて test.html <ul class="nav nav-pills style-dblock"> <li class="nav-item"> <a class="nav-link" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link active" href="#">Link</a> <a class="active" href="#">Link</a> </li> </ul> のactive単体ではCSS上何も記載がないのになぜ該当の箇所の背景色が染まるのかわからなくてしれべた結果 bootstrap.css .nav-pills .nav-link.active, .nav-pills .show>.nav-link {color:#fff;background-color:#007bff} の「.nav-pills .nav-link.active」によって染まっていると知って、私の知らないCSSの使い方があると感じ調べてみました。 こちらの様式で試してみました。 test.html <div class="divcss"> <p>テスト①</p> </div> <div class="divcss"> <p class="pcss">テスト②</p> </div> <div> <p class="pcss ppcss">テスト③</p> </div> ○複数のセレクタのどれかに該当する（OR条件） test.css .divcss,.pcss{ background-color: red; } ○子のセレクタで絞り込む test.css .divcss .pcss{ background-color: red; } ○複数のセレクタで対象を絞り込む（AND条件）※子の空白がない形 test.css .pcss.ppcss{ background-color: red; } 調べてみるとその他にも色々あるようです。 test.css /*直下の子*/ .pcss > .ppcss{ background-color: red; } /*隣あう子*/ .pcss + .ppcss{ background-color: red; } /*以降の子*/ .pcss ~ .ppcss{ background-color: red; } 覚えるのは大変だけど、しっかり使っていきたいです。

どうも7noteです。コーディング初心者向け、書き直しの少ないコーディング術をステップごとに紹介 「初心者のときに知りたかった！！！」と思うような、コーディングするときの10のステップについてのお話です。 きれいなwebサイトを作るのも大事ですが、しっかりと開発スキルのベースが整っていることも重要なポイントです。 特に初心者の方や独学で始めたての方は「コーディングってどうやってすすめればいいのだろう」と思う方も多いハズ。 なぜならプロゲート等の学習用サイトは全部順番が決まっているからいざ一人でやると何からしていいのかわからない。 でも自分で1からコーディングするならその道順はすべて自分次第。 そんな迷える子羊に「手直しが少なくなるコーディング術」を伝授したいと思います。 ステップ① 仕様確認は入念に！ 動きのあるとこやホバー時のデザイン、リンク先や画像についてわからないところがあれば事前に確認しておきましょう。 「自分のコーディングが完了したとき = webサイトが公開できる状態」になるようすべての情報を確定させておくべきです。 特にあとで仕様変更の可能性や画像の差し替えが必要になりそうな場所については入念に担当者へ確認を入れるべきです。 しつこいって言われてもいいくらいちゃんと確認しておきましょう。 「自分でたぶんこうだろう」と思うことは1割くらいしか信用になりませんので。特に初心者のうちは。 ステップ② PCから手を離せ、最初はコーディングするな これは私が個人的にオススメしている方法ですが、デザインを印刷して設計図を書き込みます。 書き込むのは大きく2つ。「画像で再現するところ」と、「クラス名、画像名」を書き込んでいきます。 PCで設計図を作成してしまうと、どうしても見切れてしまうので、全体像を把握するのに紙で印刷するのはとてもオススメです。 ステップ③ 使う技術（言語やライブラリ等）を決めろ javascriptの組み込みが必要な箇所があればしっかり確認しておきましょう。 またsass等を導入するのであれば、取り掛かる前に決めましょう。 ステップ④ まずはHTMLを全部組め よくHTMLとCSSの書く順番どうすればいいのか悩む方も多いと思いますが、HTMLを先に全部組むことをおすすめします。 これに関しては好みにもよるので断言できないですが、マイルールを決めましょう。 個人的にHTMLを先に全部書くのをオススメしているポイントとしては、③で作成した設計図に間違いがないか確かめながら組めるところですかね。 もしHTML側で修正が必要になった場合、手直しがHTMLだけで済むので。 ステップ⑤ 上から順番にコーディングせよ 上から1ブロックごとに順番にHTMLを組んでいくことで、抜け漏れを防止できます。HTMLが全部終わったらCSSも1ブロックごとに順番に組んでいきます。 やりやすいところから書いてしまうとHTMLができたときによく見たら抜けている箇所があったり余計な手間が増えてしまいます。 防止するためには上から順番に組み立てていきましょう。あとでも書きますが、画像名やクラス名も同時に書いていきます。 ステップ⑥ 大枠から子要素へ、子要素へと順番に詰めていく 上から順番に組んでいきます。そして大枠を決め、少しずつ書いていくのですがイメージとしてはこんな感じ。 例）ヘッダー ・headerタグを書く ↓ ・左側のコンテンツを書く ↓ ・左側のコンテンツの中身（ロゴやテキスト）を書く ↓ ・右側のコンテンツを書く ↓ ・右側のコンテンツの中身を書く sample.html <!-- 書き順例 --> <header> <div class="leftbox"> <img src="images/logo.jpg" alt="ロゴ"> </div> <div class="rightbox"> <a href="/contact/">お問い合わせ</a> </div> </header> ステップ⑦ クラス名や画像名はその場で決めよ ステップ⑤で少し触れましたが、クラス名や画像名もすべて先に書いておきましょう。 書けるタイミングがきたらすぐに書きます。あとで書くことはしないように。 先に書いても後にかいても結局迷うので、忘れないうちに先に書いておくべきでしょう。 抜け漏れ防止対策が重要です。もちろんaltも先に書けるとベスト。どうしてもきめられない箇所に関しては後で見直しができるように###などオリジナルの記号列をいれておくと見直しが楽になりますよ。 ステップ⑧ ソースが長くなることを気にするな 長くなる=複雑なソースではない。必要だと思うものは躊躇せずdivでも増やしてOK。 そして作っている中で、「あ、これもしかしてなくてもいけるんじゃやない？」というものを徐々に削っていく。 最初からできるかできないかわからないのに「もうちょっとタグへらせないのかな・・・」と悩んでいる時間はムダです。 ソースが長くなっても他でできる方法があるなら迷わずその方法でやってみたらいいでしょう。 よく「ソースは短いほうがいい」とか言われるが、初心者の頃からそんなものを気にする必要はほぼない。それなりに技術も知識も付いてから改めて見直せばすぐに改善できるし、なにより誰も初心者にそれを求めていません。 ただ間違った書き方をしている場合もあるかもしれないので、そうならないためにはよく調べることは重要だし、もし周りに聞ける上司や先輩、メンターがいるなら「ここはこういう書き方でいいですか？」と訪ねてみるのがいいですね。 ステップ⑨ レスポンシブサイトなら、PCスマホ（タブレット）全パターンのレイアウトに対応できるソースか確認しながらHTMLを組め レスポンシブサイトが一般的になっているので、ここは外せないところ。PC用にいくらきれいにコーディングできても、スマホに対応しにくい書き方をしてしまっていては結局ソースの書き直しになってしまう可能性が大。 HTMLを組んでいる際に予め両方のデザインを確認しながらCSSを想定しつつ書けるようになりましょう。 ステップ⑩ sassを使え 時短かつ管理レベルを引き上げるにはsassの導入が必須と言えるでしょう。色や数字を変数に格納して共通化させることで、今後のメンテナンス性も抜群に上がるのでどんどん使って行きましょう。 ただ数時間程度で終わるものならわざわざ導入するまでもないかもしれないので、使いつつ使い所は見極められたほうが効率的に進めることができます。 まとめ いかがでしたでしょうか、後で書き直しが少なくなる10のステップ。手戻りは最も時間の無駄といっても過言ではありません。 手戻りしないためにはスキルが必要です。そしてそのスキルを身につけるのに必要なのが今回紹介した10のステップです。 これをしっかりできているかどうかで、格段に他の人との差が生まれますし、なにより時間短縮につながるだけでなくクオリティも上がるような手順になっているので、ぜひ初心者の方にはマスターしていただきたいです。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

Flexboxを使ってUAE国旗を作る 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！　何をどんな風に、どうやって作るのか？ 　最初にある程度決めておくと後が楽になります。 　例　UAEの国旗を調べる 　　　<div>は何個必要なのか？ 　　　class属性名はどうしようか？ 　　　 ・紙とペンで実際に枠を書いてみる（添付画像参照） ここまで出来たらcodeを書いていきます♪ ※head部分は省略 組み立てのポイント！　 『あか』と『みどり、しろ、くろ』の向きが違うのでそれぞれに親要素をつけてあげる <div class="uae"> <div class="uae7"> <div class="uae1">あか</div> </div> <div class="uae6"> <div class="uae2">みどり</div> <div class="uae3">しろ</div> <div class="uae4">くろ</div> </div> </div> .uae { width: 450px; height: 300px; border: 1px solid black; } .uae1 { background-color: red; } .uae2 { background-color: green; } .uae3 { border: 1px solid black; } .uae4 { background-color: black; } 上記の状態をブラウザで一旦確認 上記のCSSにFlexboxをつける。 『.uae』と『.uae6』にそれぞれFlexboxをつける .uae { width: 450px; height: 300px; border: 1px solid black; display: flex; ※ flex-direction: row;　※ } .uae6 { display: flex;　※ flex-direction: column;　※ } 結果　↓ 『あか』と『みどり、しろ、くろ』が横並びになりました。 次に、Flexアイテム（子要素）にそれぞれFlexboxを付ける 理由としては、子要素の幅を調整するため .uae7 { flex-grow: 1;※ } .uae6 { display: flex; flex-direction: column; flex-grow: 4;　※ } .uae1 { background-color: red; height: 300px;　※ flex-grow: 6;　※ } .uae2 { background-color: green; flex-grow: 1;　※ } .uae3 { background-color: white; flex-grow: 1; ※ } .uae4 { background-color: black; flex-grow: 1;　※ } 最後に、『あか、みどり、しろ、くろ』の文字を消して完成です 　まとめ 今回気を付けた点、 display: flex;のFlexコンテナー（親要素）を２回、Flexアイテム（子要素）を使用したことです。 Flexアイテム（子要素）は、親要素にdisplay: flex;が無いと反応しないので気をつけました。 また、Flexboxは動かしたいブロックの『親要素』にdisplay: flex;を設定してあげる必要があります！ これを見落として『子要素』にdisplay: flex;をつけてしまい上手に反応しなくて苦戦してしまう時があるので常に、『親要素』と『子要素』はどれなのか意識してあげると良いと思います。 今回は以上です ありがとうございます！

複雑な家庭の事情により、iframeでpdfを表示する際にツールバーを非表示にする必要があったためメモ。 やりたいこと ブラウザでPDFを開くときに表示される、ダウンロードボタンや印刷ボタンの表示領域を非表示にしたい。 PDF本体を表示する領域が狭くなってよろしくないとか、ダウンロードできないようにしたいとか、印刷させたくないとか、いろいろな理由でこいつを消したいと思うことがあると思います。 やったこと iframeでsourceを指定する際のurlに#toolbar=0&navpanes=0をつけるだけ <iframe src="https://hogehoge.test/test.pdf#toolbar=0&navpanes=0'"> みたいな。 他の方法としてはiframeに"preview"というidをつけて、previewAreaというクラスを付与して、cssで非表示にするみたいなのもありらしいです。 <script> mounted(){ const preview = document.getElementById('preview') const item = preview.contentWindow.document.querySelector('#toolbar') item.classList.add('previewArea') } </script> <style lang="scss" scoped> .previewArea { #toolbar { display: none; } } </style> あとはpdf.jsをつかってがんばったり色々あると思いますが、ライトにやるなら今回のやりかたでいいんじゃないかと。 参考文献