printenv コマンドで環境変数の一覧の表示ができる $ printenv LANG=ja_JP.UTF-8 SHELL=/usr/local/bin/bash ... 参考文献 Linuxコマンド【 printenv 】 環境変数を表示します - Linux入門 - Webkaru

ディレクトリのコピーにはcpコマンドを使う。 -rオプションを使うとディレクトリのコピーができる $ cp -r from/ to/ 参考文献 【 cp 】 ファイルやディレクトリをコピーする | 日経 xTECH（クロステック）

ぷるんと回転するアニメーションを写経して、改良してみた See the Pen ぷるんと回転 by tamago (@tamago324) on CodePen. サンプルではmatrix3d()で実装されていたが、matrix()でもいいんじゃないかと思ってmatrix()で実装し直してみた その次に、rotateで…

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などたくさんある 例）ボタンをクリックしたときにア…