文系未経験プログラマ

忘れてもいいように書く

aタグをボタンっぽくする方法

CSS

【前提知識】a:hoverでaタグの領域にマウスがフォーカスされた時の体裁を指定できる 【本題】# リンクをボタンのように見せる方法display: blockにする -> paddingを設けることでコンテンツ領域以外もリンクとすることが可能更にhover時の背景色を変更するこ…

clearfixについて(floatは浮くらしい・・・)

CSS

【前提知識】.clearfix::after { content: ""; display: block; font-size: 0; clear: both;} 【本題】・::after疑似要素を使用して、タグ内の内容の末尾にボックスを配置して高さをかくほすることにより、親要素がfloatしている子要素の高さを認識できるよ…

transmitでの改行コード

【前提知識】・mac, windows, unixではそれぞれ改行コードが異なる 【本題】・transmitでサーバーにファイルをあげる際にデフォルトの設定だと改行コードがデフォルトで変更される 【感想】・ちなみに改行コードはmac: crunix: lfwindows: crlf 【参考】特に…

heightについて

CSS

【前提知識】 ・インライン要素にはwidthもheightも効かない 【本題】 ・初期値はautoで要素の中身の分だけの高さになる ・px指定時は、要素の中身の高さに関わらず、高さが固定される ・%指定は少し面倒で以下の通り →基本的には親要素に対する比率で高さが…

widthについて

CSS

【前提知識】【前提知識】・インライン要素にはwidthもheightも効かない 【本題】・初期値はautoで、基本的に親要素の幅いっぱいに広がる・px指定時に、親<子にすると子が親からはみ出て気持ち悪い・width: autoと100%での指定による違いは、padding分まで広…

positionでやる中央寄せ

CSS

【前提知識】・親要素にposition: relative, 子要素はposition: absoluteを指定しておく 【本題】・子要素をleft: 50%で、親の半分より右に持っていき、更に子要素のtransform: translateX(-50%)で子要素自身のサイズの半分分左に持っていくと、子要素が親要…

vertical-alignとtext-alignの違い

CSS

【前提知識】・vertical-align:縦方向の位置決めに使用する・text-align:水平方向(つまり横方向)の位置決めに使用する 【本題】・vertical-alignは、インライン要素とテーブルセルにしか使用できない ・text-alignは、ブロックレベル要素内のテキストと…

cookieとキャッシュの違い

【前提知識】・特になし 【本題】・cookie:サーバーからもらう会員証のようなもの ・キャッシュ:一度開いたページの情報をブラウザが一時的に保存しておく仕組みのこと 【感想】・マークアップを修正したり、cssを修正したりした際に表示の変更が行われて…

stylusでの「&」の効果

【前提知識】.特になし 【本題】stylusで「&」は親セレクタの参照例:コンパイル前textarea color #A7A7A7 &:hover color #000 例:コンパイル後textarea { color: #a7a7a7;}textarea:hover { color: #000;} 【感想】・smacssでサブクラスを追加する際に親セ…

atomでの検索パス指定

【前提知識】・atomで検索する際に、特定のディレクトリ配下から検索したり、逆に特定のディレクトリ配下を省いて検索する方法 【本題】・lib配下から検索する場合は、lib・逆にlib配下は除いて検索する場合は、!lib・上記の検索するディレクトリ指定を複数…

absolute, relativeの意味

CSS

【前提知識】・デフォルトのhtml配置は、ブロックレベル要素(<div>, <p>など)はhtmlに記述されている順に上から下に縦に配置される。インラインレベル要素(<strong>, <a>など)は他のテキストなどに混じって表示される。 ・positionプロパティのデフォルト値は全てのタグにおいて</a></strong></p></div>…

px・%・emでのサイズ指定

CSS

【前提知識】特になし 【本題】・px(ピクセル):モニターの1ピクセルが基準、モニターは小さい点がたくさん集まって表示されているから、つまりはその点1つ分 ・%:何かに対する割合、対象である「何か」はプロパティごとに設定されている、例えばpタグのf…

まとめて拡張子を変更するコマンドについて

【前提知識】・下記の拡張子変更するコマンドで「${nm%.txt}」が意味不明$ for nm in *.txt; do> mv $nm ${nm%.txt}.doc;> done 【本題】・上記のコマンドは.txt拡張子のファイルを.docに変更するコマンド →${nm%.txt}の部分は.txtに一致する箇所を変数から…

Finderで一つ上・下の階層に移動するショートカットキー

【前提知識】特になし 【本題】・⌘ + ↑ で一つ上の階層に移動・ちなみに⌘ + ↓ 一つ下の階層に移動 【感想】・この動きを探し求めていた。長かった。。。 【参考】 【Mac】Finder で一つ上のフォルダへすぐ移動する方法 : Mac・iPhone・iPad を使い倒したい

openコマンド

【前提知識】特になし 【本題】・open ファイル名 →ファイルを開く(開く時のアプリケーションはデフォルトで決まっているやつで開く) ・open ディレクトリ名 →ディレクトリをfinderで開く 【感想】・ターミナルからなんでも操作出来ると楽しい 【参考】man…

lessコマンドのページ送り

【前提知識】・lessコマンド 【本題】・スペース or f で1ページ次へ・b で1ページ前へ 【感想】・会社のキーボード矢印キーないからつらい 【参考】man less

gulp-ejsで拡張子htmlで出力されないとき

npm

【前提知識】・gulp-ejsのバージョンは「"gulp-ejs": "^3.0.1"」 【本題】・.pipe(ejs({}, {}, {ext: '.html'}))上記の様に設定すると拡張子htmlで出力される 【感想】・ちょくちょく変わるのめんどくさE 【参考】 gulp-ejs

オリジンとドメインの違い

【前提知識】・http://www.hoge.co.jp:80を例にする 【本題】・www.hoge.co.jpがドメイン名・http://www.hoge.co.jp:80がオリジン →つまりプロトコル(http, httpsとか)とポート番号(80とか)諸々含めたものがオリジン 【感想】・オリジンとドメインで微妙…

ドメイン名とホスト名の違い

【前提知識】・www.hoge.co.jpというアドレスを例にする 【本題】・「.hoge.co.jp」がドメイン名・「www」がホスト名・「www.hoge.co.jp」がFQDN(Fully Qualified Domain Name:完全修飾ドメイン名) →完全修飾ドメイン名をドメイン名という意味で言ったりす…

Promiseでのresolve()での引数で渡せる数の話

js

【前提知識】・PromiseはES6で追加された非同期処理制御を見かけ上わかりやすくしてくれるやつ 【本題】・resolve()で引数は一つしか渡せない →下記のコードはtwoがundefinedとなる →複数の値を渡したかったら配列に入れたり、オブジェクトとして渡したり何…

複数ファイルをまとめてmv・cp

【前提知識】・mv 移動元 移動先・cp 移動元 移動先 【本題】・下記の書き方でファイルA・ファイルB・ファイルCを移動先ディレクトリに移動できる →mv 移動したいファイルA ファイルB ファイルC 移動先のディレクトリ名(cpも同じように出来る) 【感想】・…

終端装置・ルーターとかについて

【前提知識】・光通信の話です(ADSLの話はしません)・PCはインターネットに送るデータや送られてくるデータをデジタル信号として処理している・モデム:アナログ信号とデジタル信号とを相互変換してくれる機械(1つのONUにつき、1つの端末しか使えない)…

正規表現(グループ化・キャプチャ)

【前提知識】 ・仕事で正規表現書いてあるやつ読む時「\1」とか「\2」とかがあった。 【本題】・キャプチャっていう正規表現の機能らしい →(\W)hoge\1 みたいに書くと例えば、$hoge$, :hoge:, %hoge%みたいなものとマッチする →「( )」で正規表現のグルー…

正規表現(クラス・パターン)

【前提知識】 ・文字クラス:[●☓△]と[ ] で囲ってあげると、「●」、「☓」、「△」 のどれかに一致するっていう意味になる ・パターン: おはよう|こんにちは|こんばんわ とすると「おはよう」、「こんにちは」、「こんばんわ」のどれかに一致するという意味に…

IFTTとかいうサービス

【前提知識】 ・こういうの作る人ってすごい 【本題】 ・アプリケーションの通知とかをトリガーにして、別のアプリケーションに通知飛ばしてくれるサービス →例:gmailの通知をlineで教えてくれるみたいな 【感想】 ・他の人が記事にしてるように、とりあえ…

【ファサードパターン】

【前提知識】 ・クラスとかメソッドが増えると何がどうなっているのかを把握するのが難しくなってくる。 そんなときに「窓口」を設けて呼び出すことによって期待通りの動きになるようにするパターンがファサードパターン。 【本題】 ・呼び出し用の窓口をク…

console.logでログが出ない時

【前提知識】 ・エラーでも何でもないのにchromeにconsole.logしたものが出なかった時疑う所 【本題】 ・consoleのフィルタリング設定(下記画像のDefault levelsって所) →とりあえずDefault levelsにしておけば表示される(その他のフィルタリング設定は公…

4時間バスケはつらい

今日岩槻の文化公園でバスケやったけど・・・ プログラマーに4時間バスケはつらすぎるw バスケの疲労と筋トレの疲労が別物過ぎて辛い まぁ思っていたより楽しかったからよかった 相手チームがそこそこのメンツだったから次第にやる気がでてよかった 女の子…

Linuxサーバー停止方法

【前提知識】 ・停電があるので、linuxサーバー停止しておいてくださいって言われて、やり方はググってくださいと言われたのでやり方を残しておきます。 【本題】 ・ssh でサーバーに接続 →su - でスーパーユーザーになる →shutodown -h now でlinuxサーバー…

ログインした時に使うデフォルトのシェルを変更したい時

【前提知識】 ・Macでやります。windowsは分かりません。 【本題】 ・ターミナルを開いて、cat /etc/shellsを叩く →利用可能なシェルの一覧が表示される(/bin/zshとか) →chsh -s /bin/zsh(利用可能なシェルから選ぶ) でログイン時に使用するシェルが変更…