メープルたいむ

メープルもみじがお送りする、Webと社会とサブカルといろいろな雑記。エモい×情報量。

晴れのち時々どろどろ

時折、どろどろする。心の内側が。

以前ほどネガティブじゃないし、何かを渇望してもいないけれど、「まだ満たされていない」と暴れだす感情が内側にある。

自分の思い通りにならないことに、イライラする。

それがどうしようもないことでも、悪意がないことでも、些細なことでも。

自分と近くも遠くもない人のことが、無性に気に障る。

偉そうにするな。そんなのは俺にとってはちっぽけな、取るに足らないものなのに、なんでそこまで偉そうにする。気付けよ。俺はそれを聞かされてるのが不快なんだよ。

こうして悪態をつかなきゃ気がすまない自分自身も不快だ。

不安になる

自分の進む道を決めた。でも、怖い。真っ暗闇が「ここから先は茨の道だ」と僕にささやく。

同じ道に、横に歩いている人はいない。はるか後ろに、道に入ろうか決めあぐねている 人が少し見える。はるか先の光の中に、堂々とあるく背中がたくさん見える。僕の横には誰もいない。

ときおり寂しくなって、誰かと言葉を交わしたくなる。そんなとき、ふと自身に関わる話題をはなしている人がいれば、勇んで声をかけにいく。でも、そんな自分はひどく不器用で不格好で、下手したら突然現れた変質者に見えるかもしれない。 迷惑をかけてしまうのかもしれない。こわい。不審な目を向けられるのが。 めんどくさそうにあしらわれるかもしらない。

ふと道を歩いていると、人の目を追ってしまう。こわい。目が合った一瞬、何を思われたか。笑い 声がどこからか聞こえてくる。まさか自分の悪口じゃあるまいな、そう体が怖ばる。

声だけで、相棒の感情が読み取れない。悲しいのか、怒っているのか、ぶっきらぼうなのか、何か別のことで気が逸れているのか、眠たいのか。顔を見ないと、言葉を引き出さないとわからない。こわい。 見逃している感情はないか、言葉はないか、不安だ。

不安だ。寂しい。こわい。どろどろ。

おやすみなさい。明日起きればまた晴れる

振り返りの振り返りは今日の振り返り

ブログを初めて、何年が経っただろう。 放置して、また書いて、また放置して。それを何回繰り返しただろう。

ブログを久々に書こう、と思うときはいつも何かの節目で、何かの気分転換で、何かの気まぐれで、何かの振り返りだ。

こういった趣旨の記事を、何度も書いた。ブログってこうだよね、僕にとってのブログってのはね。そんな弁舌を何度もふるった。

振り返りを振り返り、またそれを振り返り。あるいはブログは常に振り返りかもしれない。歩いてきた道を忘れないように、とっくに忘れていると自覚しながら、パンくずのように、何の意味も価値もない欠片を落としていく。



さて。 今宵もご機嫌麗しゅう。

僕はついさっき彼女に「寝れないけど頑張ってみる、おやすみ」とつぶやいて通話を終え、羊を150匹ほど数えた頃から気が動転し、気がつくとこのザマだ。 しかも「ブログなんてのは暇人のすることだ。そんな精神力があれば、まず別のことに注ぐにきまっている。ブログを書く時間を捻出できない。」と散々過去の自分を詰ってきた直後である。かくも見事なフラグ回収がこの世にあっただろうか。

まぁ後悔は先に立たず。 後悔するぐらいなら公開する。(?
寝ぼけているよ、うん。



さて、

ブログは、ときに余暇であり、自己顕示欲であり、溢れ出る心の叫びであり、切実な訴えであり、くだらぬ随筆であり、まごうことなき黒歴史であり、えーと…

とにかく振り返るとロクなことがない。今書いているこの瞬間も、この思考も、趣も、文章も、ロクなものではない。

けれど、書いてしまうの、それはなぜ、なんて問いをする気もない。めんどくさい。

めんどくさい。書くのやめたい。目は冴えている。パソコン眺めてりゃ目も冴えるわ、そりゃそうだ。




最近の出来事といえば、

  • 就活を内定を一つ取った瞬間に投げ出したり、
  • 5月病という名のサボり癖が2週間も続いて単位が心配になったり、
  • 彼女と一周年を迎えたり、
  • しばらくサボっていたピアノとベースの練習を同時に再開したり、
  • 体型が気になりだしてとりあえず風呂上がりに腹筋と腕立て伏せを10回から始めてみたり、
  • 今まで頑なに拒んでいたTwitterの垢分けをして社会人の目の届かないところに逃げたらクソ気持ちが楽になってツイ廃病が再発したり、
  • 彼女にダメ元でプログラミングを教えてみたらクソ吸収率良くてなんなら追い抜かれそうな勢いだったり、
  • ふと突然おしゃれなWebデザインがひらめいたはいいけどデザインを最後まで作り込む前にモチベが落ちてきたり、
  • プログラミング関連の技術書買い漁っては積本にしてたり、
  • 規則正しい生活戻ったと思ったら眠気来る時間帯おかしくて結局寝れるの3時ぐらいだったり。

あ、こうやって見ると最近わりと充実してそう。 リア充爆発しろ、いけ!かっちゃん!(ヒロアカ沼

  • ヒロアカ見たいのにテレビがなくてわざわざ48時間しか見れないのに一話ごとにAmazon Primeに課金して見てたり。

あぁ、ヒロアカ原作揃えたみ。



そういえば、ちょっと前に気付いたのだけど、俺の、「〇〇で、〇〇で、〇〇だ」みたいな書き方、ぜったい西尾維新の影響受けてる。なんでもかんでも並列したくなっちゃう。中二病かよ、恥ずかし。

以前のTwitterのフォロワーで、はてなブログやってて、文章がエモいなって気に入ってる人がいたのだけど、その人はあれみたいだった。あの人。四畳半神話大系の人。有頂天家族の人。なんだっけ。 そっちのがなんか中二病から一歩進んで、高2、いや大2病ぐらいで、品があって良いよね。ウラヤマシイ。


わりと勢いでエモく書けたので、今日は合格。今宵は終幕。おやすみさんさん、また来週。(?

【JavaScript】基本文法

基本操作

出力

console.log('Hello,world');

文字列はクオーテーションで囲む。 セミコロンは必須ではないが推奨 JavaScriptのセミコロンを省くと起こること - Qiita

alertやdom上に出力するのは、配列などが正しく表示されないためデバッグには向かない。

計算

足し算、引き算、かけ、わり、あまり(%

console.log(7 + 2); //9
console.log(7 - 2); //5
console.log(7 * 2); //14
console.log(7 / 2); //3
console.log(7 % 2); //1

変数

var name = 'poyo'; //定義
console.log(name); //poyo
name = 'hoge'; //上書き
console.log(name); //hoge

基本的に型を宣言しない。なんでも入る。 varは「variable(変数)」からきている。

ES6以降はconst, letでの宣言が推奨されている。varの使用は非推奨

数値においては、演算子と等号を併用して計算結果を上書きできる。 またx+=1を「x++」 のように省略できる。(引き算も同じく これをインクリメント演算子と呼ぶ。 →数値の前に置くか、後に置くか問題 式と演算子 - JavaScript | MDN

var x = 1;
x += 1;
console.log(x); //2
x++;
console.log(x); //3
x--;
console.log(x); //2

文字列の連結

+を文字(String型)に使うことで連結になる。

var name = 'poyo';
console.log(name + 'fuga'); //poyofuga
name += 'hoge' //連結して上書き
console.log(name); //poyohoge

また数値と文字を連結させることもできる。

var name = 'poyo';
console.log(name + 1); //poyo1

条件分岐,If文

基本。ifの中括弧の後にセミコロンは不要。

x = -4;
if (x > 3) {
    console.log('xは3より大きい');
} else if (x > 0) {
    console.log('xは正の数');
} else {
    console.log('xは0か負');
}

「!」で条件の否定も可能。

x = 1;
if (!(x==0)) {
    console.log('xはゼロではない');
}

等号には「==」と「===」がある。→等号が二種類??

繰り返し処理

while文

x = 0;
while(x < 5) {//xが5以下であるかぎり実行
    console.log(x);
    x++; //ループする度に1足す
}
//0, 1, 2, 3, 4

whileは条件が成立し続ける限り実行されるループ。今回は5回ループ。 →よってループ条件がいずれ満たされなくなる状況にしないと永久機関に。

for文

for (変数定義 条件 変数の増減式) { 処理 } javaとかと一緒の書き方。

for (var i=0; i<5; i++){//0~4まで5回ループ
    console.log(i);
}
// 0,1,2,3,4

while文と違って、先に条件が壊れる処理を書いておくので永久機関になる心配はなし。

処理中断系

  1. ループ中断のBreak ループ中にifと併用して使う。ifの条件を満たした時に処理を中断し、ループから抜ける。
x = 0;
while(x < 5) {//xが5以下であるかぎり実行
    if (x === 3) break; //3と同値になったら処理中断
    console.log(x);
    x++; //ループする度に1足す
}
//3で処理が止まるため
//0, 1, 2
  1. ループスキップのContinue 該当の条件を満たした時に、処理をスキップさせる。
for (var i =0; i<=10; i++) {//0~10まで11回ループ
    if (i%3 === 0) continue;//3で割り切れる時スキップ
    console.log(i);
}
// 0,1,2,4,5,7,8,10

配列

var array = ['poyo','hoge','fuga']; //定義
console.log(array); //(3)["poyo", "hoge", "fuga"]
console.log(array[0]); //"poyo"

array[0] = 'java'; //上書き or 代入
console.log(array); //(3)["java", "hoge", "fuga"]

array.push['swift']; //追加
console.log(array); //(4)["java", "hoge", "fuga", "swift"]

配列は変数の箱がたくさんくっついて存在するイメージ。 先頭から番号(=インデックス番号)がついており、それを使って呼び出したり代入したりする。 インデックス番号は0からスタート。

また以下のように、配列を空で指定してからインデックス番号で指定して各々代入可能。

var arrayEmpty = []; //空を定義
arrayEmpty[0] = 'pon';//代入
console.log(arrayEmpty); //["pon"]

※空の配列に対していきなり[1]で二番目などを指定すると、呼び出した配列の中身は「empty」となる。

連想配列 (※オブジェクト)

それぞれの値に「キー」という名前をつけてまとめる配列のこと。中括弧で囲う。

var fruit = {name: 'apple', color:'red', taste:'sweet'}; //定義
console.log(fruit.name); //apple
console.log(fruit['name']); //apple
fruit.shape = 'round'; //追加
fruit.name = 'grape'; //上書き

関数

function SayingKirby(word) {
    word += 'ぽよ';
    return word;
}//定義
console.log(SayingKirby('お腹すいた')); //お腹すいたぽよ

function 関数名(仮引数) { 処理 return 戻り値;(答えとして欲しいもの }

【CSS】初心者のための要素の中央寄せのテクニック、個人的まとめ

CSSで要素をセンタリング(中央寄せ)する様々な方法まとめ。

テキストやインライン要素を左右中央寄せ(text-align)

f:id:momijitan:20180415000433p:plain

最も簡単で一般的なセンタリングの方法は寄せたい対象に「text-align」でcenterを指定することです。 これはtextとなっていますが、テキストに限らずブロック要素に囲まれたコンテンツ(=インラインの子要素*1)を中央寄せできます。画像やaタグなどがそれです。

テキストを中央寄せする場合

<p class="centering__horizontal__text">テキスト</p>
.centering__horizontal__text {
    text-align: center;
}

中央寄せしたい要素に直接適用します。

aや画像などインライン要素を中央寄せする場合

<div class="centering__horizontal__inline">
    <a href="#">リンク</a>
</div>
.centering__horizontal__inline {
    text-align: center;
}

中央寄せしたい要素をdivなどブロック要素で囲み、その囲った枠に対して適用します。要素が複数ある場合、それらがくっついたまま中央に寄ります。

テキストを天地中央寄せ(line-height)

f:id:momijitan:20180415000553p:plain

文字を上下の真ん中に寄せるにはline-heightが使えます。

<div class="centering__vertical__text">
    <p>センタリング</p>
</div>
.centering__vertical__text {
    height: 50px;
}

.centering__vertical__text p {
    line-height: 50px;
}

要素の高さを決めてから、lineheightを同じに設定します。

ただしこれは、読んで字のごとく、テキスト本体(今回であればpタグ内のテキスト)が持つ行の高さを変更 して強引に中央にあるように見せている方法です。

上下中央に寄せたいシチュエーションは左右よりは圧倒的に少ないと思いますが、あまり推奨できない方法なので、以降に紹介するpaddigか、慣れてきたらflexを使うのをオススメします。

テキストを天地左右中央寄せ(padding)

f:id:momijitan:20180415000641p:plain

主にこれはボタン的なものを作りたいときに使えます。

<div class="centering__center__text">デモ</div>
.centering__center__text {
    padding: 36px 43px;
}

この方法は正確には中央寄せではなく、文字の周りに均等に余白を作って、見かけ上、中央にあることにしてしまう方法です。文字を中心のその周囲にスペースを作るので、高さや幅は文字の長さによって変わってしまいます。

なので、以下のような、文字の長さに関わらず幅を統一した並列ボタンなどを作りたいときはpaddingは使えません。→flexなら行けるよ f:id:momijitan:20180415000716p:plain

要素を左右中央寄せ(width + margin)

f:id:momijitan:20180415000732p:plain

上記のイメージのように、要素をまるごと、例えばブログ風のデザインであれば記事部分をまるごとを中央に寄せたいと考える人は多いでしょう。

テキストではなく、それらを包む箱そのものを左右中央に寄せたいとき、widthとmarginを使います。

<div class="centering__horizontal__block">
    <h1>タイトル</h1>
    <h2>見出し</h2>
    <p>ぽよぽよぽよぽよ…</p>
</div>
.centering__horizontal__block {
    width: 400px;
    margin: 0 auto;
}

widthで幅を指定して、その左右のmarginをautoにしてあげることで、随時幅が計算され、要素が中央に来るようになります。

要素を天地左右中央寄せ

f:id:momijitan:20180415000751p:plain

上記のように、囲う親要素に対し上下左右の中央に寄せたいときもあるでしょう。

これにはいくつか方法があります。

htmlは以下で共通。

<div class="wrapper">
    <div class="centering__center__flex">
        <h1>タイトル</h1>
        <h2>見出し</h2>
        <p>ぽよぽよぽよぽよ…</p>
    </div>
</div>

FlexBox

中級者向けですが、天地中央寄せもなんとかしてくれちゃうのがCSS界のウィザード、FlexBox君。最も簡単で、推奨します。

.wrapper {
 display: flex;
 justify-content: center;
 align-items: center;
}

.centering__center__flex {
}

Flexについての詳細は省略。

この方法のすごいところは、

  • 親要素のみの記述で完結すること。
  • 書く記述が極端に少なくて済むこと。

細かい欠点で言えば、親要素に対して指定するため子要素が複数あった際、全ての子要素に適応されてしまうこと。 子要素の一つだけを天地左右中央寄せってあんまりない状況だけど。

Absolute × Transform

前述の子要素が複数あった場合にも使える方法。またIE10以前に対応してるのもこっち。 みんな大好き、伝家の宝刀、絶対位置指定。

.wrapper {
  position: relative;
}

.centering__center__flex {
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
 }

これはいわゆるネガティブマージンと同じことをやっていて、親要素に対しての50%から、自分の高さの半分を引いてあげている。

以下のように、これをY軸方向だけに限定してあげるとline-heightと違い、高さのわからない親に対しても上下寄せができる。

.wrapper {
    position: relative;
}

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: red;
}

まとめ

初心者向け

  • テキストとかをとりあえず真ん中に →text-align
  • ボタンっぽいやつ作りたい →基本padding
  • いろいろ入った要素ごと →width + margin

中級者向け

  • とりあえず天地中央 →flex
  • 複数ある中で一つだけ天地中央なら →absolute

参考リンク

CSS高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ | コリス
上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽 - ICS MEDIA

【CSS】ブロック要素、インライン要素、インラインブロック要素の違いまとめ

CSSでHTMLを装飾する際、 「その要素がブロックなのかインラインなのか」 を把握しないと、思い通りのレイアウトが実現できなかったりするので、この機会にまとめてみた。

ブロック要素とは

一般的なdiv、pタグ、その他リスト要素、tableなどもブロック要素。

特徴

  • 横いっぱいに幅がある。=親要素の100%分。 →なので見た目は改行されているように見える(見えるだけ!!!)
  • width, height, margin, paddingが指定可能。

インライン要素とは

インライン要素は文字通り、行の中にある(in line)要素。aタグやspanタグ、imgタグなど。

特徴

  • 行の中にあるので改行されない( =横並び )
  • width, height指定できない。(ただしimgタグは指定できる!!)
  • margin, padding は左右のみ指定可能。

よってwidth × marginのセンタリングなどは不可能。

特にaタグにCSSをつけようとする時、特徴の2番目が痛いです。なので、インライン要素は

.target {
    display: block;
}

でブロック要素にするか、インラインブロックにすべし。

インラインブロック要素とは

インラインブロック要素はつまり読んで字のごとく、ブロックとインラインどちらの要素も兼ね備えた最強装備!!

インラインのようにデフォで横並び、かつブロックのようにwidthやらなんやら指定できる。 例えば以下のような、ボタンのデザインなんかにはもってこいです。

f:id:momijitan:20180414223843p:plain

しかし、marginを全く指定していなくても微かな余白が生まれてしまう欠点あり。

これはhtmlタグの改行を半角スペースとして読み込んでしまっているため。 htmlを改行せずに書くなどいろいろ解決策あり。

inline-blockを並べた場合に発生する「隙間」を消去するCSS » INSPIRE TECH

→結論、めんどいからflexにしてよくね?

特徴

  • 改行されない(=横並び)
  • width, height, margin, paddingが指定可能。
  • 微かな余白

まとめ

  • ブロック→基本そのままで扱い易いけど、デフォで改行されてしまうので横並びにしたいときはflexbox。→(近日公開予定)

  • インライン→基本扱いにくい。デザインいじるならとりあえずブロック。

  • インラインブロック→ブロックとインラインの美味しいとこ取り…のはずだ ったのに謎の余白持ち。余白がウザかったらFlex!!

参考リンク

http://cra.jp/blog/skill/1506_display/ http://taneppa.net/display-inline-block/
インライン要素 - HTML | MDN