SassのコンパイルをするときにGulpというものを使うといいって聞いたことあるからインストールとコンパイルを行ってみた Gulpはめんどくさいことを自動で行ってくれたりするらしい。 環境 コンパイル プロジェクト設定ファイルの作成 SCSS記法のSassのコンパ…

transitionとは プロパティを変更するときにどのように変化させるかを設定できるプロパティ！ .boxに定義された値・・・transitionのスタート値 .box:hoverに定義された値・・・transitonのゴール値 CSSアニメーションの基礎【Transitionを使ってみる】 | キ…

影をつけることができる。 あと、図形を複製することもできる box-shadow: offset-x, offset-y, (blur-radius), (spred-radius), (color), (inset); offset-x: 左右の影 offset-y: 上下の影 blur-radius: ぼかし具合 spred-radius: 影の広さ color: 影の色 i…

codepen.io これを作ったときに知ったことを書いていく ソース wihte-space: nowrap;で折り返しをしない :nth-child()を使うことで指定の要素にスタイルを適用できる box-shadowのinsetで内側に影を作れる border-radius: 50%;で円を作れる z-indexが効かな…

position: relativeをつける 参考文献 css 重なり z-index 効かない 解決法 - Qiita

nth-childを使うことで「2番目だけ」とか「5番目以降」にスタイルを適用するみたいなのができるようになる。 偶数番目の要素だけとか！！ nth-childはセレクタに追加して条件を指定する擬似クラスのひとつで、子要素のn番目(nth)にスタイルを適用させること…

グラデーションの表示をするにはlinear-gradient関数を使う。 cssアニメーションでグラデーションをしようとしていたときに見つけたこのサイトで知った このlinear-gradientは線形グラデーションと呼ばれるらしい。他には円形グラデーション(radial-gradient…

結論 Extended PropertiesにIMEX=1を追加する！ 解説 Excelファイルを読み込むとき、１行目がヘッダーで２行目以降がデータである場合、そのままデータベースとして読み込むことができるため、すごい便利。 でも、仕様バグでしっかりとデータが存在するにも…

ADOを使い、CSVファイルにアクセスすることで、CSVファイルをDBのテーブルとして扱うことができるようになる。 ADOでの接続は以下の手順で行う プロパイダを指定する アクセスするファイルの格納フォルダの指定 そのほかの設定をする 接続開始 SQLの実行 ヘ…

flexでタイトルの通りのことをしたい こんな感じ 右寄せしたい要素にmargin-left; auto;とする！！！ 左のmarginが自動になって、右寄せになる感じ！ <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child f-right"></div> </div> .parent { display: flex; background-color: rgba(200, 200, 200, 0.8); } .child { background-col…

テキストエディタ(っぽいもの)を作ってて、バグってたから調べてみた結果、 文字列の数字同士を比較と危ないということがわかった なので、数値として扱いたいときには必ず数値に変換してから比較すること！！ github.com 文字列同士の場合、以下のように、…

JavaScriptでの型変換をメモしておく 数値 → 文字列 String()を使う > String(1); < "1" >typeof String(1); < "string" 参考文献 初心者でも迷わない！JavaScriptの数値⇔文字列変換はコレだけ覚えよ！ | 侍エンジニア塾ブログ | プログラミング入門者向け学…

typeofで取得できる > typeof "aa"; < "string" > typeof 1; < "number" 参考文献 JavaScriptの「型」の判定について - Qiita

要素を削除するには２通りあるらしい(今のところ知っている範囲だと) removeChild()：親要素から子要素を削除する remove()：自分自身を削除する 例）child1というidをもった要素を削除したいとき removeChild() 親要素を取得し、子要素である自分を削除する…

エディタのいろいろな設定 CodeMirror - JavaScript - TIL の続き www.youtube.com 自動補完機能はaddonを使うことで実装できる。でも、CSSとJavaScriptとHTMLだけなのかな？ addonフォルダ内にアドオンは入っている。ダウンロードしたフォルダに入っているa…

テーマの設定 CodeMirror - JavaScript - TIL の続き www.youtube.com コンストラクタに渡すことで簡単にいろいろな設定ができる タブのサイズの設定 tabSizeで指定できる。デフォルトは4 tabSize: integer 例）タブのサイズを8に設定 const conf = { tabSiz…

シンタックスハイライトの設定 CodeMirror - JavaScript - TIL の続き www.youtube.com この動画を見て、実際にテーマの変更をしてみた すごい簡単にできてびっくりした themeフォルダにテーマ(.cssファイル)は格納されている 以下のようにthemeフォルダをコ…

それっぽいテキストエディタを簡単に実装 CodeMirror - JavaScript - TIL の続き www.youtube.com この動画でCodeMirrorのエディタのシンタックスハイライトの設定を学んだ フォルダ構造は以下のようになっている . ├── index.html ├── lib └── mode シンタ…

CodeMirrorって何！？ JavaScriptで簡単にそれっぽいテキストエディタを生成できるライブラリ！GitHubやCodePenでも使われてる また、カスタマイズもできるらしく、面白そう！！！！ 実装してみた 以下の動画を見るとわかるが、本当にすごい簡単に実装できる…

コーディング用のテキストエリアを簡単に実装できるライブラリを見つけたので使ってみた textareとリンクさせて使うのが一般的な気がするけど、今回はすでにある要素と置き換えるようにしてみた CodeMirror まずは、http://codemirror.net/ にアクセスしてダ…

指定要素の前に要素を追加するにはelement.insertBefore()を使う element.insertBere(追加要素, 起点要素) elementの中にある「起点要素」の前の位置に「追加要素」を追加する っていう感じ 実際にやってみた sub2の前に要素(青い要素)を追加する See the Pe…

element.classListを使うことでclassの操作ができる GItHubのページでもclassListを使っていた add classの追加ができる element.add("class-name"); また、一度に複数追加することもできる element.add("class-name1", "class-name2"); remove classの削除…

element.parentNodeを使う <div class="main"> main <div class="sub">sub</div> </div> const subElem = document.querySelector('.sub'); const mainElem = subElem.parentNode; alert(mainElem.innerText); 参考文献 【JavaScript】（基礎）親要素・子要素の取得まとめ② | unitopi - ユニトピ -

CSSだけでタブを表示するやつを昨日書いたけど、他にもいい方法がないか探していたところ、JavaScriptで追加し他要素にも対応できそうな書き方があったため、実装してみた ↓昨日書いたやつ タブの表示 - CSS - TIL See the Pen dmEGry by tamago (@tamago324…

こっちの書き方のほうが好き タブの表示 ２ - CSS - TIL こんな感じのタブ！！！ See the Pen qowGpN by tamago (@tamago324) on CodePen. ポイント ラジオボタンの非表示 ラジオボタンは見せなくていいから非表示にする input[type="radio"] { display: non…

outlineプロパティを使うことでinputやtextareaの枠線のスタイルを設定できる 輪郭線ともいう？また、:focusを使うことでフォーカス時の枠線の表示をすることもできる。 outline: 太さ 色 線の種類; いろいろためしてみた See the Pen フォーカス時の枠線 ou…

クリックしたときに何か処理をしたいときとかに使う イベントに対しての処理を追加するにはaddEventListener()で追加する element.addEventListener(イベント名, 呼び出す関数); イベント名はclickやkeyupなどたくさんある 例）ボタンをクリックしたときにア…

例えば、inputやtextarea内でtabキーを入力したとする。するとフォーカスが外れる もし、無効化したい場合、event.preventDefault()を使用すればいい const disableTab = (event) => { if (event.key === "Tab") { event.preventDefault(); } }; /* キー押下…

親要素の横幅いっぱいに表示しようと思ったときに、つまづいたのでメモ box-sizing: border-box;を使う paddingをborderもwidthに含める marginではなく、paddingで調整する marginはwidthに含まれていないため <div class="main"> <textarea class="editer"></textarea> </div> * { /* すごい重要！！ */ box-sizing: bor…

background-sizeを使うことで表示するときの大きさ設定ができる Emmentのショートカットはbgsz 設定できる値は以下の通り 値 説明 contain 縦横の比率を変えず、切り取りせずに、できるだけ大きく表示(もし、余白がある場合、繰り返して表示される) cover 縦…