【初級編】CSSを書くときに徹底している事
表題の件をまとめ。 1. style= は死んでも書かない。 ①可読性を殺す ②重複だらけでみっともない ③子要素や妹要素に影響を与えない 可読性の要らない極小のDHTMLで、今後絶対に修正しない箇所でもない限り、欠点だらけの style= は書かない。（で、そんなDHTMLを公開する事はない。） 「取り急ぎ」で用いたとしても十中八九、後で class= などに書き換えるのだから、最初から...
View ArticleHTMLの文法について！
結論！ HTMLは要素の積み重ねで構成されている！ また、head要素とbody要素に大きく2つに分かれている！ head要素にはWebページのタイトルや、Webページの情報を記述する！ 以上の事が答えだと思います！ では、基本文法について書いていきたい思います！ ①.要素 HTMLを構成する成分の1つで、< >と</ >で囲まれているものを『要素』と呼びます！...
View Articlevue.js css last-child 効かない
vue.jsでlast-childが効かないぞ？ 結論 hoge.vue <style> .kudamono .kudamono-item { background-color: blue; } .kudamono .kudamono-item:last-child { background-color: red !important; } </style> <div...
View ArticleサイクルコンピュータのGPSログデータをMapbox GL JSで表示してみました
はじめに サイクルコンピュータ（Garmin）のGPSログデータ（gpxファイルをgeojsonファイルに変換したデータ）をMapbox GL JSで表示してみました。 Mapbox GL JSでの表示部分は、こちらのMapboxさんのドキュメントを参考にさせていただきました。 Mapbox GL JSのバージョンはv2になります。 Mapboxのアクセストークンが必要になります。...
View Article1kmメッシュ滞在人口（全国人流オープンデータ）をMapbox GL JSで表示してみました
はじめに 1kmメッシュ滞在人口（全国人流オープンデータ）をMapbox GL JSで表示してみました。 Mapbox GL JSの表示部分は、こちらのブログ記事を参考にさせていただきました。 国土交通省が2019年・2020年を対象に、全国の「1kmメッシュ別の滞在人口データ」を全国人流オープンデータとして公開していますので、今回はこちらのデータを用いています。...
View ArticleCSS変数について
宣言の仕方はハイフンを2つつける --my-color: orange; 使い方はvar関数を使う color: var(--my-orange); 複数要素で同じ変数を使用したい場合は共通の親要素で変数を定義する HTML全体で同じ変数を使用したい場合は:root要素で定義してあげる 値には適用できるが、プロパティ名には適用できない 単位を使う場合① 宣言に単位までつける...
View ArticleLaravelでCSSが接続できない
基本的にhtmlからcssへリンクさせるときの記述は html <link rel="stylesheet" href="繋ぎたいCSS"> ではあるが Laravelでは <link rel="stylesheet" href="{{ asset('css/cssファイル') }}"> を用いる。 {{PHPの処理}}を書き込むとPHPの記述が適用されるけれど...
View ArticleGoogle Apps ScriptのHTMLダイアログの見た目を合わせる
Google Apps ScriptのHTMLダイアログの見た目を合わせる 概要 Google Apps ScriptのモーダルダイアログではUIとしてHTMLを埋め込むことができます。この際HTMLにスタイルが適用されていない状態になるため見た目が悪いです。なので標準のダイアログ (alert や prompt) と同様の見た目にできるようにします。 標準ダイアログのスタイル...
View ArticleiPhoneでも全画面表示（iOS15への対応）
はじめに 以前の投稿からの iOS15 への対応となりますので、こちらもご参照ください。 やってみるしかない サンプルコード index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta...
View ArticleHTMLを記述する際の細かい要素について！
結論！ head要素とbody要素には、それぞれ細かい要素があります！ head要素の記述は、ブラウザ上には表示されない! body要素には、ブラウザ上に表示される情報を記述する! 以上の事が答えだと思います！ では、細かい要素について書いていきたいと思います！ ①.title要素 ＊head要素の中に記述します！ ウェブサイトのタイトルを指定する要素です！...
View Articlefont-sizeの最小値を限界突破する小技
どうしてもfont-sizeを10px未満にしたい Google chromeではfont-sizeを10px未満に指定しても必ず10pxで表示されます。 この値より小さいと可読性が悪くなるからやめとけよ、というchromeからのメッセージでもあるわけですが、とはいえ、Galaxy fold (Width280px)...
View Articlefont-size: 62.5%;はアクセシビリティを損ねるのか？
これは何 ルート要素にfont-size: 62.5%;を指定しつつ、それぞれの要素にfont-size: ○○rem;と指定するやり方はアクセシビリティを損なうという意見をたまに見るので、それを検証した記事です 結論 ここでいう「アクセシビリティ」が「ブラウザのfont-size変更機能が正しく機能する」を意味するなら損ねません。 事の発端...
View Article【個人開発】さんまを焼くだけのアプリを作ってみた
はじめに さんまが食べたいなぁと思いましたが、なかなかさんまを食べる機会がないなぁと思ったので、さんまを焼けるアプリを作成しました。 名前の通り、さんまを焼くだけのアプリです。 就活の息抜きなので約1日で作成しました。 構造 HTML、CSS、JavaScriptのみのお手軽実装。 UIフレームワークとしてはbootstrapを使ってます。 デプロイ netlify 作ってみての感想...
View ArticleHTML5プロフェッショナル レベル2合格まで
はじめに HTML5プロフェッショナルレベル2を受けようとした時に、あまり記事がヒットせず、自分も困ったので、これから受けようとしている方の助けに少しでもなれたらと思い、書きました！ また、最近自宅からでも受験できるようになったので、そこらへんも書いていきます...
View ArticleCSSの読み込みについて！
結論！ CSSファイルの読み込みはHTMLのhead要素の中で行うこと！ link要素を用いてHTMLファイルからCSSファイルを読み込むことが出来ます！ 以上が答えだと思います！ では、細かく書いていきたいと思います！ ①.HTMLからCSSを呼び出す！ CSSファイルを呼び出すためには、head要素内に以下のような記述をします！ <link rel="stylesheet"...
View ArticleCSSのみで和柄（七宝？）の背景パターンを作成した
CSSのみで作成された背景パターンを漁っていたのですが、目当てのパターンがなかったので自分で作りました。 「これなんて名前なん…？七宝？検索しても全然出てこない…」となった背景パターン style.css :root { --white: #fff; /*円の大きさ*/ --shippo1: calc(var(--shippo2) - 0.6px); --shippo2: 40px;...
View Articleinput要素でCSSを動的に操作する(jQurey)
目次 1.はじめに 2.カラーピッカーで色を変える 2-1.type="color"について 2-2.コード 3.スライダーでCSSを変更する 3-1.type="range" 3-2.コード 3-3.その他のプロパティを変える場合のポイント 4.リセットボタンの設定 5．おわりに 1.はじめに...
View Articlevue.js と 複雑なcss
tdの中身を 値に応じて変更したい。 しかし、複雑。 hoge.vue <style> *[data-content="cont-0"] { background-color: #f7f9f9 !important; } </style> ---略 <td v-for="(s,key2) in calendar[weekCount][key]"...
View ArticleCSSの記述について！
結論！ CSSの記述は、セレクタ・プロパティ・値から成り立っている！ セレクタを用いて、CSSを適用する箇所を決める！ プロパティはCSSで何を装飾するのかを決める！（文字の色や大きさ、余白などなど） classセレクタを用いることで、特定の箇所だけにCSSを適用することができる！ span要素を使うことでテキストの一部分にCSSの装飾を加えられる！ 以上が答えだと思います！...
View Article