前提 今年8月末に、ゼロからHTMLに取り組み始めました。 黒澤さん（@kurokurosawa）によるウェビナー「YoshiTech 会津わろ法則」Round2 の修了生です。 黒澤さんが提唱する「学んだことをQiitaにアウトプットする取り組み」を、少しずつ実践しています。 現状としては、HTML/CSS の基礎についての学習が一区切りついたので、Bootstrap の学習に入っています。 Bootstrap について一区切りついたら、次はJavaScript に進む予定です。 Udemyを利用して学習しています。 現在受講を進めている講座は、 ・ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！ ・[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門 の二つです。 Bootstrap を用いたコードで、「#」を書き忘れてしまいました Bootstrap を使って、画面幅が狭くなったときに出現する「ハンバーガーメニュー」のコードに取り組んでいた時のことです。 （画面幅が狭くなるとこうなって・・・） ↓ ↓ （右側のボタンを押すとこうなるやつです） こうしたハンバーガーメニューを作ろうと、次のコードを書きました。 <nav class="navbar navbar-expand-lg navbar-light" style="background-color: rgb(194, 226, 247);"> <a class="navbar-brand" href="#">ナビゲーションバー</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="NavbarSupportedContent" aria-controls="NavbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="NavbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">ホーム</a></li> <li class="nav-item"><a class="nav-link" href="#">ブログ</a></li> <li class="nav-item"><a class="nav-link" href="#">ギャラリー</a></li> </ul> </div> </nav> もちろん、自分でゼロから書いているわけではありません。 Udemy の講座を見ながら、ハンズオン形式の「手取り足取り状態」で書きました。 にもかかわらず・・・エラー発生です。 どんなエラーかというと、ハンバーガーメニューが開いてくれません。 ハンバーガーメニューのボタン自体は表示されるのですが、いくらボタンをクリックしても反応してくれないのです。 結論から言うと、button タグ内の data-target 属性の記述に誤りがありました。 正しくは「data-target="#NavbarSupportedContent"」と書かなければならないのに、「#」を書き忘れていたのです。 書き忘れただけならまだしも・・・ こうした「書き忘れ」自体は、つまるところヒューマンエラーです。 もちろん間違いに対して開き直るのは禁物ですが、かといってヒューマンエラーを根絶するのも不可能でしょう。 大切なのは、ヒューマンエラーの発生を見越しつつ、リカバリーする体制をととのえておくことだと思います。 その意味で、今回の件では「書き忘れ」以上に深刻な問題がありました。 というのも、この書き忘れを見つけるのに、とても時間がかかってしまったのです。 HTML/CSS のコードを書くのにもだいぶ慣れてきて、自分の中では「エラーへの対処法」がそれなりに固まっていたところでした。 もしエラーが発生しても、 ・スペルミス ・半角スペースの欠如 ・タグ類の閉じ忘れ（特にCSSの「;」の書き忘れ） ・使用する要素や属性の取り違え ・ネスト構造の間違い といった点に注意してコードを見返せば、エラーの原因は見つかるものだと思っていたのです。 そのやり方が、今回の「#」の書き忘れについては通用しませんでした。 なぜなら、「#」の意味を理解できていなかったからです。 意味を考えない「丸暗記」には限界がある 今回のミスについて、 「data-target 属性について記述する際には、# が必要！」 と割り切って丸暗記してしまうのも、ひとつの対処法かと思います。 はじめのうちは、あえて丸暗記する。 そのうえで、たくさんコードを書きながら、手に覚えさせてしまう。 ・・・もちろん、こうしたアプローチも必要です。 ただ、それだけに頼っていると、膨大な時間がかかってしまいます。 そこで、手を動かすことに加えて、「意味を考える」ことが大事になってくるのではないでしょうか。 実際、私はHTML/CSSの学習を始めて、まだそれほど時間が経っていません。 それでも、基礎的なコードの書き方をある程度習得できています。 それは、手を動かしてコードを書くと同時に、コードの意味を考えていたからだと思うのです。 （視聴しているUdemy 講座が、質の高いレクチャーをしてくれるおかげです） 意味を考えずに、ただ丸暗記しようとしていたら、何一つ習得できていなかったことでしょう。 なので今回のミスについても、「# の意味を考える」ことで道が開けるのではないかと考えました。 というわけで、「#」について考えてみました そこで、「#」がコードの中でどんな役割を果たすのか、自分なりに考えていきたいと思います。 情報をリンクさせるためのものっぽい 今回のコードで「#」が必要になった data-target 属性。 この属性の役割は、「ハンバーガーメニューを開いたときに出てくる情報を指定する」ということだと思います。 つまり、「ハンバーガーメニューのボタン」と「開いたメニューに表示される情報」をリンクさせるための属性です。 「#」をリンクに使う例として思い浮かぶもの こうした「#」が出てくる例としては、ページ内リンクが思い浮かびます。 <body> <p>（本文１）</p> <p>電話番号は<a href="#phone_number">こちら</a>をクリック</p> <p>（本文2）</p> <p id="phone_number">電話番号は〇〇〇</p> </body> そういえば、id 属性を付加した要素に CSS をあてるときにも、「#」を使いますよね！ #phone_number{ color:red; border:solid 1px black; } 似たような例でも「#」を使わない場合が・・・ 一方、似たような場面なのに「#」を使わない例も思い浮かびます。 たとえば、外部サイトにリンクを張る場合。 <body> <p>（本文１）</p> <p>お店のホームページは<a href="https://〇〇〇">こちら</a>をクリック</p> <p class="background_color_red">（注意書き1）</p> <p>（本文2）</p> <p class="background_color_red">（注意書き2）</p> </body> また、class 属性を付加した要素に CSS をあてるときには、「#」ではなく「.」を使います。 .background_color_red{ background-color:red; } あるいは、HTMLファイルにCSSスタイルシートを読み込む際にも、「#」は使いません。 <link rel="stylesheet" href="css/style.css"> ・・・なぜ「#」を使う場合とそうでない場合に分かれるのでしょう？ 「#」を使う場合のポイント1 「ファイル内の特定箇所へのリンク」 ヒントを求めて Web をさまよっていると、とても参考になる記事を見つけました。 ハイパーリンクを提供する | The Web KANZAKI この記事の中で、ページ内リンクの例として、次のようなコードが挙げられています。 <a href="#detail">このファイル内の詳細へ</a> そして、直後に次のような注意書きが書かれています。 ×よくある間違い：#を忘れると、「detail」という名前のファイルを探そうとしてNot Foundエラーになります。 「#」がなければ、ファイル名と誤解されてしまう・・・ この注意書きが、とても大きなヒントになってくれました！ つまり、まずは次のように考えるとよいのだと思います。 1. リンク先としてファイル全体を指定するときは、「#」は不要 2. リンク先としてファイル内の特定箇所を指定するときは、「#」を使う 2-1 同一ファイル内の特定箇所を指定するときは「#〇〇」 2-2 外部ファイル内の特定箇所を指定するときは「ファイル名#〇〇」 こう考えれば、外部リンクやCSSスタイルシートを読み込む際には「#」が不要で、ページ内リンクには「#」が必要になる理由が分かります。 また、そもそもの発端である「data-target="#〇〇"」の意味についても、だいぶハッキリしてきます。つまり、 【ハンバーガーメニューが開いたときに出てくるようにしたいのは、同一ファイル内の特定箇所にある情報。だからこそ、「#」を書く必要がある】 というわけです。 ここまでイメージできるようになれば、data-target 属性に「#」を書き忘れてエラーが発生した場合にも、リカバリーにかかる時間を短縮できそうです。 「#」を使う場合のポイント2 「名前の唯一性」 ここまでの段階で、今回の目的（「#」の書き忘れへの対処）はすでに達成できています。 ですが、先ほどの記事（ハイパーリンクを提供する | The Web KANZAKI）には、さらなるヒントがありました。 それは、「#」を用いて指定する「名前」についてのお話です。 名前は、同一ドキュメントの中で唯一のものでなければならず、重複してはいけません（Uniqueness）。このとき、(1)大小文字の違いだけによる名前付けは、この唯一性を満足できません；(2)ただし、名前の照合時（string match）に大小文字は区別されます。以下のような使い方をしないよう注意してください。 記事内では、これを「名前の唯一性」と呼んでいます。 「#」を使って指定する名前は、「唯一」のものでなければならない。 だからこそ、CSSをid属性とリンクさせる場合には「#」を使えて、class属性とリンクさせる場合には使えないのですね。 CSSでの「#」と「.」の使い分けにまで、視野を広げることができました！ （そういえば、そもそもの発端であるBootstrapを使ったコードの中で、ハンバーガーメニューに紐づける要素のタグ付けには id 属性が使われていたのでした・・・まるで伏線が回収されたような感覚です笑！） おまけ：個人的な「#」のビジュアルイメージ 今回の検討を踏まえて、「#」に対して個人的に次のようなビジュアルイメージを持つに至りました。 ※フック付きロープイラスト／イラストACより 先端に金属製のフックが結びつけられたロープです。 （よくアクション映画なんかで、フックを高いところめがけて投げて「ガチっ！」と固定させ、壁をよじ登るのに使うアレです） ファイル内の特定箇所に向けて、このロープを投げかけるようなイメージ。 また、1本のロープなので1か所にしか使えず、「名前の唯一性」のイメージにもぴったりなんじゃないかな？と思っています。。。 最後まで読んでいただき、ありがとうございました！
今年8月末に、ゼロからHTMLに取り組み始めました。 黒澤さん（@kurokurosawa）によるウェビナー「YoshiTech 会津わろ法則」Round2 の修了生です。 黒澤さんが提唱する「学んだことをQiitaにアウトプットする取り組み」を、少しずつ実践しています。
現状としては、HTML/CSS の基礎についての学習が一区切りついたので、Bootstrap の学習に入っています。 Bootstrap について一区切りついたら、次はJavaScript に進む予定です。
Udemyを利用して学習しています。 現在受講を進めている講座は、 ・ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！ ・[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門 の二つです。
Bootstrap を使って、画面幅が狭くなったときに出現する「ハンバーガーメニュー」のコードに取り組んでいた時のことです。
（画面幅が狭くなるとこうなって・・・） ↓ ↓ （右側のボタンを押すとこうなるやつです）
こうしたハンバーガーメニューを作ろうと、次のコードを書きました。
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: rgb(194, 226, 247);"> <a class="navbar-brand" href="#">ナビゲーションバー</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="NavbarSupportedContent" aria-controls="NavbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="NavbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">ホーム</a></li> <li class="nav-item"><a class="nav-link" href="#">ブログ</a></li> <li class="nav-item"><a class="nav-link" href="#">ギャラリー</a></li> </ul> </div> </nav>
もちろん、自分でゼロから書いているわけではありません。 Udemy の講座を見ながら、ハンズオン形式の「手取り足取り状態」で書きました。 にもかかわらず・・・エラー発生です。
どんなエラーかというと、ハンバーガーメニューが開いてくれません。 ハンバーガーメニューのボタン自体は表示されるのですが、いくらボタンをクリックしても反応してくれないのです。
結論から言うと、button タグ内の data-target 属性の記述に誤りがありました。 正しくは「data-target="#NavbarSupportedContent"」と書かなければならないのに、「#」を書き忘れていたのです。
こうした「書き忘れ」自体は、つまるところヒューマンエラーです。 もちろん間違いに対して開き直るのは禁物ですが、かといってヒューマンエラーを根絶するのも不可能でしょう。 大切なのは、ヒューマンエラーの発生を見越しつつ、リカバリーする体制をととのえておくことだと思います。
その意味で、今回の件では「書き忘れ」以上に深刻な問題がありました。 というのも、この書き忘れを見つけるのに、とても時間がかかってしまったのです。
HTML/CSS のコードを書くのにもだいぶ慣れてきて、自分の中では「エラーへの対処法」がそれなりに固まっていたところでした。
もしエラーが発生しても、 ・スペルミス ・半角スペースの欠如 ・タグ類の閉じ忘れ（特にCSSの「;」の書き忘れ） ・使用する要素や属性の取り違え ・ネスト構造の間違い といった点に注意してコードを見返せば、エラーの原因は見つかるものだと思っていたのです。
そのやり方が、今回の「#」の書き忘れについては通用しませんでした。
なぜなら、「#」の意味を理解できていなかったからです。
今回のミスについて、 「data-target 属性について記述する際には、# が必要！」 と割り切って丸暗記してしまうのも、ひとつの対処法かと思います。
はじめのうちは、あえて丸暗記する。 そのうえで、たくさんコードを書きながら、手に覚えさせてしまう。 ・・・もちろん、こうしたアプローチも必要です。
ただ、それだけに頼っていると、膨大な時間がかかってしまいます。 そこで、手を動かすことに加えて、「意味を考える」ことが大事になってくるのではないでしょうか。
実際、私はHTML/CSSの学習を始めて、まだそれほど時間が経っていません。 それでも、基礎的なコードの書き方をある程度習得できています。 それは、手を動かしてコードを書くと同時に、コードの意味を考えていたからだと思うのです。 （視聴しているUdemy 講座が、質の高いレクチャーをしてくれるおかげです） 意味を考えずに、ただ丸暗記しようとしていたら、何一つ習得できていなかったことでしょう。
なので今回のミスについても、「# の意味を考える」ことで道が開けるのではないかと考えました。
そこで、「#」がコードの中でどんな役割を果たすのか、自分なりに考えていきたいと思います。
今回のコードで「#」が必要になった data-target 属性。 この属性の役割は、「ハンバーガーメニューを開いたときに出てくる情報を指定する」ということだと思います。 つまり、「ハンバーガーメニューのボタン」と「開いたメニューに表示される情報」をリンクさせるための属性です。
こうした「#」が出てくる例としては、ページ内リンクが思い浮かびます。
<body> <p>（本文１）</p> <p>電話番号は<a href="#phone_number">こちら</a>をクリック</p> <p>（本文2）</p> <p id="phone_number">電話番号は〇〇〇</p> </body>
そういえば、id 属性を付加した要素に CSS をあてるときにも、「#」を使いますよね！
#phone_number{ color:red; border:solid 1px black; }
一方、似たような場面なのに「#」を使わない例も思い浮かびます。 たとえば、外部サイトにリンクを張る場合。
<body> <p>（本文１）</p> <p>お店のホームページは<a href="https://〇〇〇">こちら</a>をクリック</p> <p class="background_color_red">（注意書き1）</p> <p>（本文2）</p> <p class="background_color_red">（注意書き2）</p> </body>
また、class 属性を付加した要素に CSS をあてるときには、「#」ではなく「.」を使います。
.background_color_red{ background-color:red; }
あるいは、HTMLファイルにCSSスタイルシートを読み込む際にも、「#」は使いません。
<link rel="stylesheet" href="css/style.css">
・・・なぜ「#」を使う場合とそうでない場合に分かれるのでしょう？
ヒントを求めて Web をさまよっていると、とても参考になる記事を見つけました。
ハイパーリンクを提供する | The Web KANZAKI
この記事の中で、ページ内リンクの例として、次のようなコードが挙げられています。
<a href="#detail">このファイル内の詳細へ</a>
そして、直後に次のような注意書きが書かれています。
×よくある間違い：#を忘れると、「detail」という名前のファイルを探そうとしてNot Foundエラーになります。
「#」がなければ、ファイル名と誤解されてしまう・・・ この注意書きが、とても大きなヒントになってくれました！
つまり、まずは次のように考えるとよいのだと思います。
1. リンク先としてファイル全体を指定するときは、「#」は不要 2. リンク先としてファイル内の特定箇所を指定するときは、「#」を使う 2-1 同一ファイル内の特定箇所を指定するときは「#〇〇」 2-2 外部ファイル内の特定箇所を指定するときは「ファイル名#〇〇」
こう考えれば、外部リンクやCSSスタイルシートを読み込む際には「#」が不要で、ページ内リンクには「#」が必要になる理由が分かります。
また、そもそもの発端である「data-target="#〇〇"」の意味についても、だいぶハッキリしてきます。つまり、 【ハンバーガーメニューが開いたときに出てくるようにしたいのは、同一ファイル内の特定箇所にある情報。だからこそ、「#」を書く必要がある】 というわけです。
ここまでイメージできるようになれば、data-target 属性に「#」を書き忘れてエラーが発生した場合にも、リカバリーにかかる時間を短縮できそうです。
ここまでの段階で、今回の目的（「#」の書き忘れへの対処）はすでに達成できています。 ですが、先ほどの記事（ハイパーリンクを提供する | The Web KANZAKI）には、さらなるヒントがありました。
それは、「#」を用いて指定する「名前」についてのお話です。
名前は、同一ドキュメントの中で唯一のものでなければならず、重複してはいけません（Uniqueness）。このとき、(1)大小文字の違いだけによる名前付けは、この唯一性を満足できません；(2)ただし、名前の照合時（string match）に大小文字は区別されます。以下のような使い方をしないよう注意してください。
記事内では、これを「名前の唯一性」と呼んでいます。
「#」を使って指定する名前は、「唯一」のものでなければならない。 だからこそ、CSSをid属性とリンクさせる場合には「#」を使えて、class属性とリンクさせる場合には使えないのですね。
CSSでの「#」と「.」の使い分けにまで、視野を広げることができました！ （そういえば、そもそもの発端であるBootstrapを使ったコードの中で、ハンバーガーメニューに紐づける要素のタグ付けには id 属性が使われていたのでした・・・まるで伏線が回収されたような感覚です笑！）
今回の検討を踏まえて、「#」に対して個人的に次のようなビジュアルイメージを持つに至りました。 ※フック付きロープイラスト／イラストACより
先端に金属製のフックが結びつけられたロープです。 （よくアクション映画なんかで、フックを高いところめがけて投げて「ガチっ！」と固定させ、壁をよじ登るのに使うアレです）
ファイル内の特定箇所に向けて、このロープを投げかけるようなイメージ。 また、1本のロープなので1か所にしか使えず、「名前の唯一性」のイメージにもぴったりなんじゃないかな？と思っています。。。
最後まで読んでいただき、ありがとうございました！
【HTML/CSS】 ①「親→子」指定時にひっかりがちなミスと指定法 ②レイアウト－外から指定する方法(一般的)と内側の要素に指定する方法(少し複雑だが便利) ③Flexboxにおいてはmarginしか使わないほうが良いこと
【HTML/CSS】 ①「親→子」指定時にひっかりがちなミスと指定法
②レイアウト－外から指定する方法(一般的)と内側の要素に指定する方法(少し複雑だが便利)
③Flexboxにおいてはmarginしか使わないほうが良いこと
HTML 今後の流れ ①HTML&CSS（残り8回） ②JavaScript（16回） ③Webサイト（Dreamweaver）（15回） ④PHP/MySQL（8回） ⑤WordPress（18回） ⑥卒業制作 ※SEO練習、illustrater、Photoshop 準備すること ・Gmail ・Dropbox ・チャットワーク アプリケーションソフト ・TeraPad ・Visual Studio Code ・Mira Type ルーティン ・3分スピーチ・・・起承転結をつけて、相手にアクションを起こしてもらうのが大事です。 ・タイピング（10分100回）・・・最低目標は、1分間120文字 就職するにあたって必要なスキル グループワーク Webサイトを制作して、3回やる予定 当たり前のことですが、人の話を聞いて、自分の意見を言えることが大事です。 私のおすすめサイト ちょっと変わったサイトを紹介できると良いです。 internetとは？ interは何かと何かを繋げるもの interchange 乗換駅 interview 会見 プロトコル インターネットの共通言語 基本的にTCP/IPが使われます。 データは小分け（パケット）にしてネットワーク上に送り出されます。 ルートは違えど、目的地にパケットにした情報の全てが届けばよいというのが基本的な考え方です。 ウェブサイト：HTTP 電子メール：SMTP（Simple Mail Transfar Protocol） インターネット上に正しい情報が送られるように、住所のようなIP（Internet Protocol）アドレスがあります。 URLにアクセスするのは、サーバーにリクエストするということです。 https://www.yahoo.co.jp（ドメイン名） https://183.79.135.206（IPアドレス） このように、ドメイン名とIPアドレスを結びつけることを「ドメインネームシステム」と言います。 wwwサーバー名 yahoo組織名 co組織の種類 jp国別コード HTMLについて Hyper Text Markup Language Hyperはsuperを超えているという意味です。 すんげえ文章に印を付けている言語ですよという意味です。 コンピュータで文書を記述するのに、SGMLを用意されました。 複数のコンピュータを扱うのに、XMLができました。 わかりやすさを追求して、HTMLができました。 HPについて 最初のページをホームページ。最初のページ（ホームに帰る）からホームページと呼びます。 すべてのページを含めたものが「Webサイト」と呼びます。 要素 空要素 入れ子 <head> <meta charset="utf-8"> </head> metaは情報が入っていますよという意味です。 就職先 就職先 インフォメーション・アーキテクチャー・・・情報の構造化が重要です。 Web制作＋動画が必要です。Premere ProやAfter Effectsなどなど。 TeraPadの初期設定 ・表示＞オプション＞EOFのチェックを外す ・表示＞オプション＞文字コード 初期文字コード：utf-8Nを選択 ・表示＞オプション＞ブラウザ Firefoxを以下に変更 C:\Program Files (x86)\Google\Chrome\Application\chrome.exe ・ファイル＞文字/改行コード指定保存＞文字コードをutf-8に変更 ・表示＞折り返し桁設定＞0:87桁（右端） をクリック テンプレート <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> hr 「br」はforced line break（強制改行）、「hr」はhorizontal rule（罫線） <p>これは段落です。<br>これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。</p> <hr> <p>これは段落です。<br>これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。</p> ショートカット Alt+tabキー 表示切替 Winキー+Dキー デスクトップ表示 mypage.html 学んだものを反映させるページで、授業ごとにページを作っていきましょう。 習ったら、反映。を繰り返します。
①HTML&CSS（残り8回） ②JavaScript（16回） ③Webサイト（Dreamweaver）（15回） ④PHP/MySQL（8回） ⑤WordPress（18回） ⑥卒業制作 ※SEO練習、illustrater、Photoshop
・Gmail ・Dropbox ・チャットワーク
・TeraPad ・Visual Studio Code ・Mira Type
・3分スピーチ・・・起承転結をつけて、相手にアクションを起こしてもらうのが大事です。 ・タイピング（10分100回）・・・最低目標は、1分間120文字
Webサイトを制作して、3回やる予定 当たり前のことですが、人の話を聞いて、自分の意見を言えることが大事です。
ちょっと変わったサイトを紹介できると良いです。
interchange 乗換駅 interview 会見
インターネットの共通言語 基本的にTCP/IPが使われます。 データは小分け（パケット）にしてネットワーク上に送り出されます。 ルートは違えど、目的地にパケットにした情報の全てが届けばよいというのが基本的な考え方です。
ウェブサイト：HTTP 電子メール：SMTP（Simple Mail Transfar Protocol）
インターネット上に正しい情報が送られるように、住所のようなIP（Internet Protocol）アドレスがあります。
URLにアクセスするのは、サーバーにリクエストするということです。
https://www.yahoo.co.jp（ドメイン名） https://183.79.135.206（IPアドレス） このように、ドメイン名とIPアドレスを結びつけることを「ドメインネームシステム」と言います。
wwwサーバー名 yahoo組織名 co組織の種類 jp国別コード
Hyper Text Markup Language Hyperはsuperを超えているという意味です。 すんげえ文章に印を付けている言語ですよという意味です。
コンピュータで文書を記述するのに、SGMLを用意されました。 複数のコンピュータを扱うのに、XMLができました。 わかりやすさを追求して、HTMLができました。
最初のページをホームページ。最初のページ（ホームに帰る）からホームページと呼びます。 すべてのページを含めたものが「Webサイト」と呼びます。
空要素
<head> <meta charset="utf-8"> </head>
metaは情報が入っていますよという意味です。
インフォメーション・アーキテクチャー・・・情報の構造化が重要です。 Web制作＋動画が必要です。Premere ProやAfter Effectsなどなど。
・表示＞オプション＞EOFのチェックを外す ・表示＞オプション＞文字コード 初期文字コード：utf-8Nを選択 ・表示＞オプション＞ブラウザ Firefoxを以下に変更 C:\Program Files (x86)\Google\Chrome\Application\chrome.exe ・ファイル＞文字/改行コード指定保存＞文字コードをutf-8に変更 ・表示＞折り返し桁設定＞0:87桁（右端） をクリック
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
「br」はforced line break（強制改行）、「hr」はhorizontal rule（罫線）
<p>これは段落です。<br>これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。</p> <hr> <p>これは段落です。<br>これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。</p>
Alt+tabキー 表示切替 Winキー+Dキー デスクトップ表示
学んだものを反映させるページで、授業ごとにページを作っていきましょう。 習ったら、反映。を繰り返します。
前提 私がハマったcssをまとめた備忘録です display 要素の「表示形式」を指定するプロパティ ブロックレベル要素 display: block 見出し要素（h1, h2, h3…h6）、p、ul、ol、li、div、table 要素の前後に改行が入り、ブロックが積まれているイメージ ・widthとheightを指定できる ・上下左右にmargin,paddingを指定できる ・text-alignは要素の中身に適応される インライン要素 display: inline ブロックレベル要素の中身として使われる要素(a、span、strong など) テキストの一部として扱われるため、要素の前後には改行は入らず横に並んでいくイメージ ・widthとheightを指定できない ・左右だけmargin,paddingを指定できる ・text-alignは親ブロックに指定することで適用できる display: inline-block ・横に並んでいく ・widthとheightを指定できる ・上下左右にmargin,paddingを指定できる ・text-align を親ブロックに付けることで指定できる。 <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <ul> li {display: inline-block;} a { display: block;} listをインラインブロックで横並びにして、aをブロック要素で表示することでクリックできる範囲を広げる overflow ボックス内に収まりきらない内容の処理を指定するプロパティ ・visible(初期値)：ボックスから内容をはみ出して表示 ・hidden：ボックスからはみ出した要素は表示しない ・scroll：ボックスに入りきらない内容はスクロールで表示される ・auto：ボックスに入りきらない内容はスクロールで表示される autoとhiddenの違い autoは内容が入りきらない場合にのみスクロールバーが表示 hiddenは内容にかかわらず常に表示される position position: staticが初期値 通常の位置に配置される、topやbottomなどの位置を指定できない position: relative 元々配置される位置を基準にtopやleftなどを指定することができる position: absolute 通常の位置から外れてbodyが基準になる 親要素にstatic以外の値を設定している場合は親要素の左上が基準の位置になる <div class="container"> <img href="#"> </div> .container{ position: relative; } .container img{ position: absolute; top: 50%; left: 50%; } containerを基準にimgの場所を指定できる clear 回り込みの解除 floatプロパティで左、右寄せを指定されている要素の回り込みを解除する際に使用 none 初期値。回り込みを解除しない left 左寄せされた要素に対する回り込みを解除 right 右寄せされた要素に対する回り込みを解除 both 全ての要素に対する回り込みを解除
私がハマったcssをまとめた備忘録です
要素の「表示形式」を指定するプロパティ
見出し要素（h1, h2, h3…h6）、p、ul、ol、li、div、table 要素の前後に改行が入り、ブロックが積まれているイメージ
・widthとheightを指定できる ・上下左右にmargin,paddingを指定できる ・text-alignは要素の中身に適応される
ブロックレベル要素の中身として使われる要素(a、span、strong など) テキストの一部として扱われるため、要素の前後には改行は入らず横に並んでいくイメージ
・widthとheightを指定できない ・左右だけmargin,paddingを指定できる ・text-alignは親ブロックに指定することで適用できる
・横に並んでいく ・widthとheightを指定できる ・上下左右にmargin,paddingを指定できる ・text-align を親ブロックに付けることで指定できる。
<ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <ul>
li {display: inline-block;} a { display: block;}
listをインラインブロックで横並びにして、aをブロック要素で表示することでクリックできる範囲を広げる
ボックス内に収まりきらない内容の処理を指定するプロパティ
・visible(初期値)：ボックスから内容をはみ出して表示
・hidden：ボックスからはみ出した要素は表示しない
・scroll：ボックスに入りきらない内容はスクロールで表示される
・auto：ボックスに入りきらない内容はスクロールで表示される
autoとhiddenの違い autoは内容が入りきらない場合にのみスクロールバーが表示 hiddenは内容にかかわらず常に表示される
position: staticが初期値 通常の位置に配置される、topやbottomなどの位置を指定できない
元々配置される位置を基準にtopやleftなどを指定することができる
通常の位置から外れてbodyが基準になる 親要素にstatic以外の値を設定している場合は親要素の左上が基準の位置になる
<div class="container"> <img href="#"> </div>
.container{ position: relative; } .container img{ position: absolute; top: 50%; left: 50%; }
containerを基準にimgの場所を指定できる
回り込みの解除 floatプロパティで左、右寄せを指定されている要素の回り込みを解除する際に使用
none 初期値。回り込みを解除しない left 左寄せされた要素に対する回り込みを解除 right 右寄せされた要素に対する回り込みを解除 both 全ての要素に対する回り込みを解除
どうも7noteです。ちょっとした自動化の小技を紹介。 フッターなどで、外部サイトにリンクする際によく使われる別窓マークを自動で付ける方法を紹介。 今回マークはフォントオーサム4で付けています。 <head>内で以下を読み込んで起きます。 <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> つけ方 index.html <ul> <li><a href="https://hogehoge.com" target="_blank" >ほげほげサイトへ飛ぶ</a></li> </ul> style.css ul li a[target="_blank"]::after { content: '\f08e'; font-family: FontAwesome; /* font-awesomeを使うための呪文 */ margin-left: 0.5em; } aタグの属性で、target="_blank"を使用することで、「別窓で開く」ことができます。 多くの場合、外部サイトへリンクさせる時は別窓で開くことが多いので、この属性値を利用して、css側で a[target="_blank"] という書き方をすることで、別窓で開くaタグにのみcssを当てることが可能になります。 そして、疑似要素のafterにアイコンフォントのフォントオーサムを指定することで別窓マークが自動的に付くようになります。 特定のクラスなどをわざわざ書かなくても済むのでhtmlがすっきりしますし、経験者が見れば一目で何しているかが伝わりやすい書き方になるので覚えて起きたいところです。 まとめ 簡単で地味ですが、コーディングの業務は様々なところに気をつかわないといけないので、今後のメンテナンスの事も考え自動化できるところは自動化する方が効率的です！ おそまつ！ ~ Qiitaで毎日投稿中!! ~ [【初心者向け】HTML・CSSのちょいテク詰め合わせ](https://qiita.com/7note
フッターなどで、外部サイトにリンクする際によく使われる別窓マークを自動で付ける方法を紹介。 今回マークはフォントオーサム4で付けています。
<head>内で以下を読み込んで起きます。
<head>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<ul> <li><a href="https://hogehoge.com" target="_blank" >ほげほげサイトへ飛ぶ</a></li> </ul>
ul li a[target="_blank"]::after { content: '\f08e'; font-family: FontAwesome; /* font-awesomeを使うための呪文 */ margin-left: 0.5em; }
aタグの属性で、target="_blank"を使用することで、「別窓で開く」ことができます。 多くの場合、外部サイトへリンクさせる時は別窓で開くことが多いので、この属性値を利用して、css側で
target="_blank"
a[target="_blank"]
という書き方をすることで、別窓で開くaタグにのみcssを当てることが可能になります。
そして、疑似要素のafterにアイコンフォントのフォントオーサムを指定することで別窓マークが自動的に付くようになります。
特定のクラスなどをわざわざ書かなくても済むのでhtmlがすっきりしますし、経験者が見れば一目で何しているかが伝わりやすい書き方になるので覚えて起きたいところです。
簡単で地味ですが、コーディングの業務は様々なところに気をつかわないといけないので、今後のメンテナンスの事も考え自動化できるところは自動化する方が効率的です！
~ Qiitaで毎日投稿中!! ~ [【初心者向け】HTML・CSSのちょいテク詰め合わせ](https://qiita.com/7note
ファイルアップロードのUI(input type="file")は厄介です。ブラウザによって表示方法が異なるのにCSSでのカスタマイズが難しいし、Chrome以外では添付したファイルをキャンセルできないという問題もあります。ですが、JavaScriptを使えば、 CSSでカスタマイズ可能 添付したファイル名を表示可能 添付したファイルをキャンセル可能 にできます。 元のHTML <form method="POST" enctype="multipart/form-data"> <ul> <li><input type="file" name="file1"></li> <li><input type="file" name="file2"></li> </ul> <input type="submit" value="UPLOAD"> </form> input type="file" な要素が2つあります。なのでJavaScriptでコントロールするときには対象を特定する必要があります。 修正版HTML よくあるのは input type="file" な要素を非表示にした上で label 要素で囲み、label のクリックで input type="file" のポップアップを連動させるというやり方です。ですが、JavaScript を使うのであれば label にこだわる必要はありません。むしろ label にはデフォルトで連動のアクションがあるため扱いが面倒です。 label の代わりに span で囲むことにします。目印のために class="upload" としています。 <form method="POST" enctype="multipart/form-data"> <ul> <li><span class="upload"> <input type="file" name="file1"> <input disabled> </span></li> <li><span class="upload"> <input type="file" name="file1"> <input disabled> </span></li> </ul> <input type="submit" value="UPLOAD"> </form> span の中には2つ input 要素があります。一つは元々の input type="file" な要素、もう一つはファイル名を表示するために追加した要素です。追加した要素は表示のためだけに使うので、disabled にしています。アイコンなどを追加したい場合は span 要素の中に入れればクリック時にポップアップと連動します。 追加のCSS 以下のCSSを追加します。 form .upload { display: inline-block; } form .upload input[type="file"] { display: none; } form .upload input[disabled] { pointer-events: none; } span 要素はクリックを「受け止める」必要があるため、inline-block にします。元々の input 要素は非表示にし、追加した input 要素はクリックを「素通し」するので pointer-events: none; とします。この設定がないと Firefox では追加した input 要素がクリックを「消費」してしまい、span までクリックが伝わりません。 コントロール用JavaScript 以下のJavaScriptを追加します。 $(function(){ $('.upload').on('click', function(){ $(this).find('input').val(''); $(this).find('input[type="file"]').trigger('click'); }); $('.upload input[type="file"]').on('click', function(event){ event.stopPropagation(); }); $('.upload input[type="file"]').on('change', function(){ if (this.files.length) { $(this).parent().find('input[disabled]') .val(this.files[0].name); } }); }); span 要素(class="upload")がクリックされたときは、内部にある2つの input 要素をともにクリアし、input type="file" な要素をクリックすることでポップアップを起動します。 input type="file" な要素がクリックされたときに親要素へのイベント伝播を停止します。これを行わないと再度 span がクリックされることになるので無限ループになってしまいます。 ポップアップから戻ったとき、ファイルが選択されていればそのファイル名を追加した方の input 要素に表示します。 jQueryを使ったので簡潔に書けました。生のDOM操作関数でも記述可能と思いますが、かなり面倒になると思います(私にはその根気はありません)。 完成品 (見映えはCSSで修正)
ファイルアップロードのUI(input type="file")は厄介です。ブラウザによって表示方法が異なるのにCSSでのカスタマイズが難しいし、Chrome以外では添付したファイルをキャンセルできないという問題もあります。ですが、JavaScriptを使えば、
にできます。
<form method="POST" enctype="multipart/form-data"> <ul> <li><input type="file" name="file1"></li> <li><input type="file" name="file2"></li> </ul> <input type="submit" value="UPLOAD"> </form>
input type="file" な要素が2つあります。なのでJavaScriptでコントロールするときには対象を特定する必要があります。
input type="file"
よくあるのは input type="file" な要素を非表示にした上で label 要素で囲み、label のクリックで input type="file" のポップアップを連動させるというやり方です。ですが、JavaScript を使うのであれば label にこだわる必要はありません。むしろ label にはデフォルトで連動のアクションがあるため扱いが面倒です。
label
label の代わりに span で囲むことにします。目印のために class="upload" としています。
span
class="upload"
<form method="POST" enctype="multipart/form-data"> <ul> <li><span class="upload"> <input type="file" name="file1"> <input disabled> </span></li> <li><span class="upload"> <input type="file" name="file1"> <input disabled> </span></li> </ul> <input type="submit" value="UPLOAD"> </form>
span の中には2つ input 要素があります。一つは元々の input type="file" な要素、もう一つはファイル名を表示するために追加した要素です。追加した要素は表示のためだけに使うので、disabled にしています。アイコンなどを追加したい場合は span 要素の中に入れればクリック時にポップアップと連動します。
input
disabled
以下のCSSを追加します。
form .upload { display: inline-block; } form .upload input[type="file"] { display: none; } form .upload input[disabled] { pointer-events: none; }
span 要素はクリックを「受け止める」必要があるため、inline-block にします。元々の input 要素は非表示にし、追加した input 要素はクリックを「素通し」するので pointer-events: none; とします。この設定がないと Firefox では追加した input 要素がクリックを「消費」してしまい、span までクリックが伝わりません。
pointer-events: none;
以下のJavaScriptを追加します。
$(function(){ $('.upload').on('click', function(){ $(this).find('input').val(''); $(this).find('input[type="file"]').trigger('click'); }); $('.upload input[type="file"]').on('click', function(event){ event.stopPropagation(); }); $('.upload input[type="file"]').on('change', function(){ if (this.files.length) { $(this).parent().find('input[disabled]') .val(this.files[0].name); } }); });
jQueryを使ったので簡潔に書けました。生のDOM操作関数でも記述可能と思いますが、かなり面倒になると思います(私にはその根気はありません)。
はじめに スマートフォンの普及をきっかけに、Web制作において 必須のスキルとなっているレスポンシブデザイン。 今回css記述の際に気をつける点を記述する。 参考文献 CSSシークレット ―47のテクニックでCSSを自在に操る ※kindle版は英語表記しか見つけれませんでした。 考え方 様々な解像度の下でWebサイトを表示させ、問題が生じたらメディアクエリを記述する。 →しかし、後々変更が必要になった場合、手間は倍となる。 メディアクエリを追加するたびにCSSのコードは不安定さを増す。 よって、ビューポートによって完全にデザインを切り替えたいなどの 最終手段としてメディアクエリを使うべきである。 以下に、 メディアクエリを回避するためのヒントを記述 ※メディアクエリが悪いわけではなく、正しく使うべきという考え方。 ①Widthは固定値ではなく、％を使う 学習初期では、よく固定値を多用して他のデザインに影響を与えてハマっていた。 ・できる限りpaddingやmarginで表す。 ・width: 〇〇px;ではなくwidth: 〇〇%; ・相対値（vw, vh, vmin,vmax）を使う。 ②widthではなくmax-widthを使う max-widthを使用することによって、メディアクエリを使用せずとも小さな画面に対応できる。 ③置換要素ではmax-width: 100%;を忘れずに 置換要素→img,object,video,iframeなど ④background-size: cover; 背景画像がコンテナ全体を覆う必要がある場合にコンテナのサイズを記述する必要がなくなる。 ※モバイル向けのデザインにて、大きな画像を縮小する場合は不具合も。 ⑤column-widthを指定する 段組を使ってテキストを配置する場合に小さな画面では１段組みで表示する。 結論 大量のメディアクエリの記述が必要となった場合には 一歩戻ってコードの構造を見直すことが重要。 2,3個の簡単なメディアクエリでレイアウトをレスポンシブにできるように意識する。 cssは奥が深くもっともっと学習が必要であると感じた。 もう少し具体的に記述できるよう随時アップデートしていきたい。
スマートフォンの普及をきっかけに、Web制作において 必須のスキルとなっているレスポンシブデザイン。 今回css記述の際に気をつける点を記述する。
CSSシークレット ―47のテクニックでCSSを自在に操る
※kindle版は英語表記しか見つけれませんでした。
様々な解像度の下でWebサイトを表示させ、問題が生じたらメディアクエリを記述する。 →しかし、後々変更が必要になった場合、手間は倍となる。
メディアクエリを追加するたびにCSSのコードは不安定さを増す。 よって、ビューポートによって完全にデザインを切り替えたいなどの 最終手段としてメディアクエリを使うべきである。
以下に、 メディアクエリを回避するためのヒントを記述
※メディアクエリが悪いわけではなく、正しく使うべきという考え方。
学習初期では、よく固定値を多用して他のデザインに影響を与えてハマっていた。
・できる限りpaddingやmarginで表す。 ・width: 〇〇px;ではなくwidth: 〇〇%; ・相対値（vw, vh, vmin,vmax）を使う。
max-widthを使用することによって、メディアクエリを使用せずとも小さな画面に対応できる。
置換要素→img,object,video,iframeなど
背景画像がコンテナ全体を覆う必要がある場合にコンテナのサイズを記述する必要がなくなる。 ※モバイル向けのデザインにて、大きな画像を縮小する場合は不具合も。
段組を使ってテキストを配置する場合に小さな画面では１段組みで表示する。
大量のメディアクエリの記述が必要となった場合には 一歩戻ってコードの構造を見直すことが重要。 2,3個の簡単なメディアクエリでレイアウトをレスポンシブにできるように意識する。
cssは奥が深くもっともっと学習が必要であると感じた。 もう少し具体的に記述できるよう随時アップデートしていきたい。
・テキストは左 ・画像は右 もしくは上記と逆を作るCSSをメモ。 参考 https://niwaka-web.com/flexbox_reverse/ 完成形 以下、コピペで動く hoge.css <style> .fbox { display:flex; /* テキストが左、画像が右 */ flex-direction: row; /* 画像が左、テキストが右 */ /*flex-direction: row-reverse;*/ justify-content: space-between; } /* justify-content */ /*flex-start フレックスコンテナの主軸の起点に揃えます。通常、左端に配置されます。*/ /*flex-end フレックスコンテナの主軸の終点に揃えます。通常、右端に配置されます。*/ /*center フレックスコンテナの主軸の幅の中央に揃えます。通常、左右中央に配置されます。*/ /*space-between フレックスコンテナの主軸の幅に対して余白をもって等間隔に配置されます。余白がないときは、flex-startと同じになります。*/ /*space-around フレックスコンテナの主軸の幅に対して余白をもって等間隔に配置されます。space-betweenと異なり、起点・終点との間にも間隔が生じます。余白がないときは、centerと同じになります。*/ .fbox .pic { width: 64px; } /* テキストが左、画像が右 を、それぞれ 左右交互に表示 */ .fbox:nth-child(even) { flex-direction: row-reverse; } .fbox:nth-child(even) .text { text-align: right; } </style> hoge.html <a class="fbox" href="//yahoo.co.jp"> <div class="text"> <h3>見出しが入ります</h3> <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p> </div> <div class="pic"> <img src="https://placehold.jp/3d4070/ffffff/64x64.jpg"> </div> </a> <a class="fbox" href="//yahoo.co.jp"> <div class="text"> <h3>見出しが入ります</h3> <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p> </div> <div class="pic"> <img src="https://placehold.jp/3d4070/ffffff/64x64.jpg"> </div> </a> <a class="fbox" href="//yahoo.co.jp"> <div class="text"> <h3>見出しが入ります</h3> <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p> </div> <div class="pic"> <img src="https://placehold.jp/3d4070/ffffff/64x64.jpg"> </div> </a> <a class="fbox" href="//yahoo.co.jp"> <div class="text"> <h3>見出しが入ります</h3> <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p> </div> <div class="pic"> <img src="https://placehold.jp/3d4070/ffffff/64x64.jpg"> </div> </a>
・テキストは左 ・画像は右
もしくは上記と逆を作るCSSをメモ。 参考 https://niwaka-web.com/flexbox_reverse/
完成形
以下、コピペで動く
<style> .fbox { display:flex; /* テキストが左、画像が右 */ flex-direction: row; /* 画像が左、テキストが右 */ /*flex-direction: row-reverse;*/ justify-content: space-between; } /* justify-content */ /*flex-start フレックスコンテナの主軸の起点に揃えます。通常、左端に配置されます。*/ /*flex-end フレックスコンテナの主軸の終点に揃えます。通常、右端に配置されます。*/ /*center フレックスコンテナの主軸の幅の中央に揃えます。通常、左右中央に配置されます。*/ /*space-between フレックスコンテナの主軸の幅に対して余白をもって等間隔に配置されます。余白がないときは、flex-startと同じになります。*/ /*space-around フレックスコンテナの主軸の幅に対して余白をもって等間隔に配置されます。space-betweenと異なり、起点・終点との間にも間隔が生じます。余白がないときは、centerと同じになります。*/ .fbox .pic { width: 64px; } /* テキストが左、画像が右 を、それぞれ 左右交互に表示 */ .fbox:nth-child(even) { flex-direction: row-reverse; } .fbox:nth-child(even) .text { text-align: right; } </style>
<a class="fbox" href="//yahoo.co.jp"> <div class="text"> <h3>見出しが入ります</h3> <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p> </div> <div class="pic"> <img src="https://placehold.jp/3d4070/ffffff/64x64.jpg"> </div> </a> <a class="fbox" href="//yahoo.co.jp"> <div class="text"> <h3>見出しが入ります</h3> <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p> </div> <div class="pic"> <img src="https://placehold.jp/3d4070/ffffff/64x64.jpg"> </div> </a> <a class="fbox" href="//yahoo.co.jp"> <div class="text"> <h3>見出しが入ります</h3> <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p> </div> <div class="pic"> <img src="https://placehold.jp/3d4070/ffffff/64x64.jpg"> </div> </a> <a class="fbox" href="//yahoo.co.jp"> <div class="text"> <h3>見出しが入ります</h3> <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p> </div> <div class="pic"> <img src="https://placehold.jp/3d4070/ffffff/64x64.jpg"> </div> </a>
はじめに 自作拡張機能をchromeからfirefoxアドオンに移行し投稿（審査待ち）したので、移行中に修正した点を記事にします。 スクロールバーの表示を消す スクロールバーは消したいけど、ホイールや別の手段でスクロールはさせたい時のCSSです。 chrome.css .wrapper::-webkit-scrollbar {display: none;} firefox.css .wrapper {scrollbar-width: none;} これchromeでも実装しないかな。 *-reverse flexboxを使って子要素の配置順を反転させる(row|column)-reverse。 chrome.css .wrapper { display: flex; flex-direction: row-reverse; overflow: scroll; } firefoxでこの記述のままだとスクロール幅（rowは横、columnは縦）が可視幅と同値になり、スクロールが効かなくなった。 こんなケースは稀かもしれません。 左右のボックスを入れ替えるだけだったので、orderで対処。 firefox.css .wrapper { display: flex; flex-direction: row; overflow: scroll; } .wrapper.reverse .right_box {order: -1;} 終わりに 他にはfont-familyのfantasyが使えなくてImpactにしたとか font-sizeを要素でちゃんと指定しないと思うようなサイズにならなかったとか 細かい所は割愛。 ※内容がわかりにくい？タイトルだったので変更しました。
自作拡張機能をchromeからfirefoxアドオンに移行し投稿（審査待ち）したので、移行中に修正した点を記事にします。
スクロールバーは消したいけど、ホイールや別の手段でスクロールはさせたい時のCSSです。
.wrapper::-webkit-scrollbar {display: none;}
.wrapper {scrollbar-width: none;}
これchromeでも実装しないかな。
flexboxを使って子要素の配置順を反転させる(row|column)-reverse。
.wrapper { display: flex; flex-direction: row-reverse; overflow: scroll; }
firefoxでこの記述のままだとスクロール幅（rowは横、columnは縦）が可視幅と同値になり、スクロールが効かなくなった。 こんなケースは稀かもしれません。
左右のボックスを入れ替えるだけだったので、orderで対処。
.wrapper { display: flex; flex-direction: row; overflow: scroll; } .wrapper.reverse .right_box {order: -1;}
他にはfont-familyのfantasyが使えなくてImpactにしたとか font-sizeを要素でちゃんと指定しないと思うようなサイズにならなかったとか 細かい所は割愛。
※内容がわかりにくい？タイトルだったので変更しました。
はじめに 自作拡張機能をchromeからfirefoxアドオンに移行し投稿（審査待ち）したので、移行中に修正した点を記事にします。 スクロールバーの表示を消す スクロールバーは消したいけど、ホイールや別の手段でスクロールはさせたい時のCSSです。 chrome.css .wrapper::-webkit-scrollbar {display: none;} firefox.css .wrapper {scrollbar-width: none;} これchromeでも実装しないかな。 *-reverse flexboxを使って子要素の配置順を反転させる(row|column)-reverse。 chrome.css .wrapper { display: flex; flex-direction: row-reverse; overflow: scroll; } firefoxでこの記述のままだとスクロール幅（rowは横、columnは縦）が可視幅と同値になり、スクロールが効かなくなった。 こんなケースは稀かもしれません。 左右のボックスを入れ替えるだけだったので、orderで対処。 firefox.css .wrapper { display: flex; flex-direction: row; overflow: scroll; } .wrapper.reverse .right_box {order: -1;} 終わりに 他にはfont-familyのfantasyが使えなくてImpactにしたとか font-sizeを要素でちゃんと指定しないと思うようなサイズにならなかったとか 細かい所は割愛。
