タイトルで結論が出てますが、一応解説します。 前提 ・Live severを起動してもファイル画面が表示される。 ・Setting.jsonの記述は完璧 config.json "liveServer.settings.port": 5000, "liveServer.settings.CustomBrowser": "chrome", "liveServer.settings.ChromeDebuggingAttachment": false, "liveServer.settings.fullReload": true, "liveServer.settings.donotShowInfoMsg": true, 原因 HAML は、Brackets がアクセスできないサーバーサイドの状態を参照できるテンプレート言語なので、サーバーサイドの HAML ページをリアルタイムで Live Preview 更新しながら編集するのは複雑です。 あと自分が英語のイシューを避けてたことも原因でした。 日本語でぱっと見記事がなさそうな時は英文のソースも積極的に見ていきたいと思います。
HTML、CSSの知識 さらに得た知識です。 HTMLとCSSを同時で学んでいるので 行ったり来たりしています。 1.divタグ(html) ディビジョンのことで領域（エリア）を示すためのタグ タグ自身には意味がない class属性（組：グループ分け）をつけることが多い class属性はグローバル属性 2.marginプロパティ(css) margin 上 右 下 左 で指定する margin 10 auto; で要素を中央に配置することができる 左右をautoにすると中央に寄るのはCSSの仕様 paddingは内側の余白を指定できる 3.font-sizeプロパティ(css) em→倍率を表す ex)1.2em→元の大きさから1.2倍 4.labelタグ(html) <div class="control"> <label for="mymail">メールアドレス</label> <input id ="mymail" type="email" name="mymail"> </div> for属性でinputタグと紐づける 5.spanタグ(html) divと同じように意味はない 改行したくない、1つの要素の中に納めたいときはspan 逆に改行して使いたいときはdiv htmlとCSSが繋がって色々できるの面白いな。 指定した通りに見た目が変わっていくと嬉しい。 以上
どうも7noteです。CSSで作れる波線は2種類だけ CSSで波線を再現する方法！ それは以下の2種類しかありません！ ・text-decolation: wavy; ・波パーツ画像のループ表示 グラデーションを駆使して作っているものも見ましたが、実用性はあまりないかと。 また、SVGを使う事で波の背景を作る方法はあるようです。 1行で書くなら「text-decolation: wavy;」 style.css p { text-decoration: #f00 wavy underline; /* 色,波線,線を引く場所を指定 */ } テキストに波線を書く方法です。色や線を引く場所は変えれますが波線の曲がり具合や大きさは変更できません。 ・自由度を求めるなら「波パーツ画像のループ表示」 このような波のパーツ画像を用意し、繰り返し表示することで波線を再現します。 index.html <p><span class="wave">波下線を引く</span></p> style.css .wave { padding-bottom: 5px; background: url(parts.png) repeat-x bottom left / auto 5px; } 結果 インライン要素、もしくはインラインブロック要素に指定しましょう。 まとめ 現状CSSだけでは上記の方法でしか波線を再現することはできません。 それっぽいものは作れるかもしれませんが実運用を考えると上記の2つの方法のどちらかを選ぶしかないと思います。 ただwavyもあまり美しい感じではないので、実質背景画像を使った方法1択ではないかなと思います。 SVGを使った方法が知りたい方はこちらから。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
CSSの基礎知識 開始5分で得た知識です。 1.インラインスタイル <h1 style="font-size: : 50px;">入会申し込み</h1> pxは光の粒＝解像度の単位。数字が大きければ大きいほど文字を大きく表示できる style属性はすべてのタグに使える＝グローバル属性と言われる font-sizeはプロパティと呼ばれる タグの中に属性を書いていくことを、インラインスタイルシートと言う。 2.内部参照 <style> p { font-size: 14px; } </style> headタグの中に書く pはセレクターと言い、セレクターに対してスタイルシートを指定する スタイルシートとhtmlを分離して書くことができる 3.外部参照 <link rel="stylesheet" href="style.css"> rel（リル）＝リレーションのこと href（エイチレフ）＝シートの名前 headタグの中に書く style.css p { font-size: 14px; } 基本的には外部参照がすっきりして良いが、 一部だけ変えたい、このページだけ変えたい といった場合は インラインや内部参照を使うことも。 ただし、優先順位がある 外部＞内部＞インライン ので、設定するときは注意が必要な模様。 以上
はじめに gulpを使用してたときに、 急に「Not enough space」というエラー画面になりました。 ググってみたものの、なかなか原因が特定できる記事を発見できず、、、 解決までに少し時間がかかってしまったため、記事に残しておきます。 解決法 どうやら何らかの動作が原因で文字コードがGBKになっていることが原因のようで、 その文字コードをUTF-8に変更することで解決しました。 （GBKは、中国語の簡体字用の文字コード） ※ Sublime Textでは画面左下に、文字コードの記載があります。 文字コードの変更について 文字コードの変更は以下の手順で行えます。 画面上部のツールバー > File > Set File Encoding to > UTF-8
CSSについて復習 今まで、なんとなくでhtmlファイルにcssを当てており、直せたから大丈夫と考えていました。 さて、GWに突入ということもあり、CSSを再思考して基礎に戻っていきたいと思います Boxモデルとは何か まず、大切になる考え方が「Boxモデル」。 Content: textやimageなどの中心となる物 →widthやheightで幅や高さを調整する Padding: Contentに対しての外枠（透明なエリア）に当てるもの Border: Paddingによってできた幅の外枠に当てるもの Margin: Paddingに似ている物 →しかし、PaddingはContentの内側に当てるものに対して、MarginはContentの外側に当てるもの なぜズレは起きてしまうのか 以下の具体的なコードを参考にしてズレてしまう原因を考えてみる <div class="parent"> 親要素 <div class="child"> 子要素 </div> </div> .parent { width: 300; height: 100px; border: 2px dashed red; } .child { width: 100%; padding: 10px; background-color: white; border: 3px solid black; } } これを実際に記述してみると、親要素に囲まれた枠線から、子要素のボックスがはみ出てしまう →上に記述した「Boxモデル」によりボックスのサイズは、「Content + Padding + Border + Margin」の合計の大きさになる →上の例だと、childタグの幅の大きさは、width 300(100%なので親要素と同じになる) + padding 20(10 で両サイドあるので) + border 6(paddingと同じ） = 326になってしまう →そのため、parentタグの幅300に対して26分childタグの要素が出てしまう 問題解決をするには 1.計算して記述する →上の例だと、parentのwidthが300なので、計算してchildも300になるようにする →例えば、widthを95%(285)にしてpaddingを4.5にすれば、合計して300になるので横にはみ出す原因は解決することができる 2.親要素に「box-sizing」プロパティを使用する →そうすることで、contentに対して適度な大きさになるように計算してくれるようになる
Javascript、HTML/CSSで数当てゲームを作りました。 ルール ・1から50までの数字を入力し、5回以内に正解の数を当てるゲームです。 プログラミングコード <!-- 数当てゲーム--> <!-- 新規作成 2021/04/30 --> <!-- author 乃木坂好きのITエンジニア --> <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>数当てゲーム</title> <style> h1 { color:plum; font-size:100px; } h2 { color:#4f7911; font-size:50px; } body { background-color:whitesmoke; } </style> </head> <body id = "test"> <header> <div class="container"> <h1>数当てゲーム</h1> <h2>数を当ててみよう</h2> </div><!-- /.container --> </header> <main> <div class="container"> <section> </section> </div><!-- /.container --> </main> <footer> <div class="container"> </div><!-- /.container --> </footer> <script> 'use strict'; let message; let count = 1; let flag = 0; //乱数を発生させる。0~49まで数字がランダムに表示されるので1を足す。 const number = Math.floor(Math.random() * 50) + 1; //数当てゲームは5回挑戦できるようにする。 while (count <=5){ const answer = parseInt(window.prompt('数当てゲーム。1〜50の数字を入力してね。5回まで挑戦できます')); window.alert(count + "回目です。") //正解、数が小さい、数が大きい、1から50以外の数字が入った時の条件式 if(answer === number) { message = 'あたり！'; window.prompt(count + "回目で正解しました。おめでとうございます!"); document.querySelector("h1").innerHTML = "<h1>数当てゲーム、正解です!</h1>"; document.querySelector("h2").innerHTML = "<h2>おめでとうございます！</h2>"; flag = 1; break; } else if((answer < number) && (answer >= 1)) { message = '残念でした！もっと大きい'; } else if((answer > number) && (answer <=50)) { message = '残念でした！もっと小さい'; } else { message = '1〜50の数字を入力してね。'; } //入力した数字に応じてメッセージを出力する。 window.alert(message); // count = count + 1; } //5回挑戦して不正解だったら正解をアラートで表示する if (flag === 0){ window.alert("正解は" + number + "です"); } </script> </body> </html> 本来ならCSSとスクリプトファイルは別のほうが良いのですが、今回はまとめて1ファイルで作成いたしました。
はじめに Charts.cssというHTMLのClass指定だけで、チャートやグラフを表示できるフレームワークがあるということを知りましたので、どんなものか試してみました。 Charts.css 公式サイト https://chartscss.org/ https://github.com/ChartsCSS/charts.css CDNの指定 ・CSSの設定として下記を指定 sample.html <link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css"> CDNを指定し、テーブルタグにclassを加えていきます。charts-css の次に、チャートの種類、そしてオプション等です。 sample.html <table class="charts-css bar hide-data show-primary-axis show-data-axes"> ... </table> 種類は以下のようなものがありますが、まだUnderver Developmentとなっているものもあります。 色やラベル、3D効果、アニメーションなどがあります。 サンプルでは、下記のような各国のメダル数を表示できるものがでていました。 ソースコード：https://chartscss.org/components/tooltips/ Mixed Charts 簡単なMixed Chartsを作成してみました。 グラフの中に数字をいれることはできましたが、目盛りをいれることができなそうでした。やはり簡単にテーブルデータをグラフ・チャート化できるのが売りだと思うので、細かいことはできないことがありそうです。（目盛りは最低でもあるべきとは思いますが） 折れ線グラフは、始点と終点をいれる形なので、中央に設定することはできなそうでした。 sampleMixed.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS CHART</title> <link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css"> <style> #my-chart { position: relative; height: 550px; width: 100%; max-width: 800px; margin: 0 auto; } #my-chart > table { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #my-column { --color: lightblue; } #my-line { --color: darkgreen; } </style> </head> <body> <div id="my-chart"> <table class="charts-css column show-heading show-labels data-spacing-20 show-primary-axis" id="my-column"> <caption>グラフタイトルの設定</caption> <tbody> <tr><th scope="row"> 2020/7 </th><td style="--size: calc( 30000 / 150000 );">\30,000</td></tr> <tr><th scope="row"> 2020/8 </th><td style="--size: calc( 60000 / 150000 );">\60,000</td></tr> <tr><th scope="row"> 2020/9 </th><td style="--size: calc( 90000 / 150000 );">\90,000</td></tr> <tr><th scope="row"> 2020/10 </th><td style="--size: calc( 120000 / 150000 );">\120,000</td></tr> </tbody> </table> <table class="charts-css line" id="my-line"> <tbody> <tr><th scope="row"> 2020/7 </th><td style="--start: 0.2; --size: 0.8;"></td></tr> <tr><th scope="row"> 2020/8 </th><td style="--start: 0.8; --size: 0.6;"></td></tr> <tr><th scope="row"> 2020/9 </th><td style="--start: 0.6; --size: 0.7;"></td></tr> <tr><th scope="row"> 2020/10 </th><td style="--start: 0.7; --size: 0.9;"></td></tr> </tbody> </table> </div> </body> </html> まとめ HTMLのtableにClassを加えるだけで、グラフやチャートが実装できます。 すでにHTMLにTableデータがあり、その下あたりにちょっとグラフを入れたいなと思ったときに便利ではないでしょうか。 テーブルデータを外部から読み込み、月日などによりデータが変わっていく場合などはちょっとやりにくいですし、細かい設定を実施する際には、Chart.jsのほうが使い勝手がよさそうです。 参考URL
再配布不可能・私的利用可能 やり方 PCブラウザ版に限る まずは無料版adguardなど入手 次に以下の3行をユーザールールにコピペする twitter.com##div:matches-attr("/aria-label|role|data-testid|class/"="/タイムライン:.*|listbox|listitem|userCell|article|option|link|region/") > div > div:contains(/AAA|BBB|CCC/im) twitter.com#@#div:matches-attr("/aria-label|role|data-testid|class/"="/テキストをツイート|検索クエリ/") twitter.com##div[data-testid="card.layoutLarge.detail"]:remove() 大まかな解説 使い方 嫌な言葉をdiv:contains(/AAA|BBB|CCC/)に入れる それを含むツイートやユーザーは全て非表示になる(そのユーザーのページではユーザーの情報だけ見えてしまうが…) 正規表現でやっているので公式クライアントより正確に安全に条件を絞れるミュート機能のような使い方も出来る 検索はフラグ/im（アルファベットの大文字と小文字の区別がない，^$が先頭末尾に加え行頭行末もマッチする）を使っているので各自でオンオフしてくれ 仕組み :matched-attr()と特定のパラメータを用いて検査の対象のdivを決め打ちし，:contains()と各種のワードで検査して引っかかったdivを不可視化している > div >はどうやらdivの階層構造の深さを表すらしい…が，今のところ1個だけの状態が最もパフォーマンスが良い 1ライナーで複数のdivを選定しているのでリストも1つで済む，フィルタリングがより快適になった 本来なら:remove()して少しでもブラウザを軽くしたかったのだが，非常によくTwitterがバグるので断念した 注意 "/タイムライン:.*|listbox|listitem|userCell|article|option|link|region/"の部分に"tweet"を加えると，対象語を検索窓やツイート欄に入力したときにバグる，その上に加えても良いことが何もないので非推奨 また2行目は現状においては不要であるが，Twitterが仕様を変えてきた際に上のバグをなるべく回避するためのおまじないの役目があるので，なるべくは書き加えてほしい 3行目は消さないこと，Twitter Card（リンク貼るときにサムネと説明文が見えるやつ）の説明文のせいで挙動が不安定になる…あと見た目が少しスリムになるかも 真面目な解説 関数について ネット上の記事だとdiv[xxx="yyy"]やdiv:has-text(/xxx|yyy/)のような解説が多いですが，前者は拡張性と管理性が低い・後者は使用する関数が古い問題があります，AdGuardのユーザールールのフィルタ向けのリファレンス（最新版）に沿って設計することをお勧めします ただし:has()セレクタに限ってはCSS 4.0で実装されると策定されただけなので，現状では基本的にどのブラウザでも未実装です，これだけは使えないので注意しておきましょう divの中身について "/aria-label|role|data-testid|class/" 主要なhtmlタグはだいたいこの4つだけ ちなみにTwitterはreactでやってるらしい タイムライン:.*系 ユーザー発のアクティビティに関するもの，正規表現で1個にまとめた aria-label=で与えられる タイムライン: ホームタイムライン homeに流れるタイムライン タイムライン: トレンド 今どうしてる？のやつ タイムライン: 最近でてきたトピックのサジェスト こいつ絶対あとで名前が変わるだろ タイムライン: 話題を検索 検索のトップページ タイムライン: Carousel 横並びになっているサジェスト タイムライン: タイムラインを検索 検索した結果 タイムライン: 会話 各ツイートのスレッド タイムライン: 通知 通知 タイムライン: メッセージ DM タイムライン: リツイートされました 通知をクリックした画面 タイムライン: いいねしました 通知をクリックした画面 タイムライン: リツイートしたユーザー ツイートから見れるやつ タイムライン: いいねしたユーザー ツイートから見れるやつ listboxとlistitem role=で与えられる 検索窓のサジェスト欄と履歴欄がコレに該当する，トレンド名とアカウント名を両方とも潰すには2つとも必要らしい userCell data-testidで与えられる 色んな所に並んで表示される時にユーザーを非表示にする article role=で与えられる 全てのツイートはコレに入っているので，念の為にこれも非表示にする option role=で与えられる サジェストとか設定ボタンの1個の枠は大抵がこれ link role=で与えられる Twitterが用意してくるリンクは大抵はこの中にある region role=で与えられる でっかい組み分けの外の箱は大抵これになっている card.layoutLarge.detail data-testidで与えられる 注意書きにある通り，Twitter Cardの説明する部分を:remove()で消し去った，逆に:remove()しないとダメなパーツだった スマホ対応について 現状うまく動作していない ちょっとよくわからない，ユーザールールの動作条件がPCとは違うらしい… 解決したらまた書きたい 最後に また何かあったら改善したいのでその時は改善されたバージョンを追って頂きたい あとTwitterは無●
