前回紹介したTODOアプリを改修していきます。 具体的には以下の2点。 - タスクを追加するごとにテキストボックスの入力値をクリアする - 管理しやすいようにディレクトリ分けを行う テキストボックスの入力値をクリアする タスクを追加したときに、Storeで保…
ReactとReduxを使った超簡単なTodoリストを作成していきます。 対象 React少し触ったことある人 Reduxを使ったことがなくなれたい人 完成形 準備 まずはcreate-react-appでプロジェクトを作成します。 Reactで開発を行うときに大変なのが環境づくり。 webpac…
起こっていた現象 Markdown記法でテーブルを書いていたのですが、 スマホでみてみると右側が見切れてしまっていました。 今回はその時に行った対処法を紹介します！ 対処法 スマホで見たときはテーブルを横方向にスクロールできるように設定していきます。 …
長い記事を書いた場合や続きはトップページではなく詳細ページで表示させたいときに使えるのが「続きを読む」記法。 今回はその使い方を調べたので書いて行きたいと思います！
応用情報技術者試験について 学習方法 TAC どんな感じで利用したか 結果 まとめ 応用情報技術者試験について 言わずもがななITの資格。 基本情報技術者試験の上位資格に該当。 転職を考えていたので取っておくと有利かなと思い受験。 受験日 2018年4月15日 …
kubernetesとは 複数のホストを束ねてDockerを利用するためのオーケストレーションツールで、分散環境において「あたらかも1台のコンピュータ」のように透過的にコンテナにアクセスすることが可能。 基本的な概念 Pod 複数のコンテナをまとめてPodとして管理…
docker-compose 複数のコンテナを起動するとき、コンテナごとに構成や起動/停止を管理していると運用が煩雑になり大変... そこでdocker-composeを使用する。 docker-composeは、複数のコンテナ（DB用やwebサーバー, logのコンテナ）をまとめて管理するための…
Dockerfile RUN yum -y install httpd exec形式の記述 exec形式ではshellを介さずに実行される。 シェルを使用したい場合は、以下のようになる。 RUN ["/bin/bash","-c","yum -y install httpd"] /bin/shを介したい場合 => shell形式 それ以外 => exec形式 C…
iconを重ねる <div class-"fa-stack"> <i></i> <i></i> </div> アイコンを重ねるためには、fa-stackを親要素に追加して、子要素に重ねるアイコンを配置します。 子要素は次のようにクラスを追加します。 外側に見せたいアイコン => fa-stack-2x(少し大きめのサイズ) 内側に見せたいアイコン => fa-stack…
float属性を指定すると、要素は それを囲む要素の高さに関係無く表示され、スタイル崩れが起きる場合があります。 したがって、float属性を指定する際には、その一つ上の要素(例えば li要素ならば ul要素 など)にoverflow属性を指定し、その値にhidden をつ…
&セレクタを.contentsセレクタの後ろに付与した場合は、.contentsに続いて&セレクタの内容が展開されます。 &セレクタには、親のセレクタの参照を返すため、結果は次のようになります。 // &の親セレクタはこれ .preview .header .title // であるため、cont…
@at-rootをつけたセレクタは、そのままグローバルなところに展開されます。 .container { .row { @at-root .red { color: red; } } } 展開されるCSS .container .row {} .red { color: red; }
中身をfloatにすることで起こる、レイアウト崩れを解消する方法。 overflowを使う！ html <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML+CSS</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <div class="contents"> <h1>Layout</h1> <div class="box"> <h2>Box 1</h2> <p> hello world he…</p></div></div></body></html>
プラベートレジストリの作成 S３を指定してのプライベートレジストリ起動 アップロード用イメージの作成 dockerイメージ作成 アップロード プラベートレジストリの作成 docker pull registry:2.0 # registryイメージをpull docker images # registryがpullさ…
aタグにはデフォルトで下線が設定されていますが、デザインの関係上その下線を取り除きたい場面も多々あると思います。 今回はその方法を紹介。 text-decorationの設定 デフォルトのaタグは以下のようになります。 そこで、text-decorationというプロパティ…
手順 Hyperのインストール Hyper-Pokemonプラグインの適用 Hyperをインストール ターミナルエミュレーター のHyperをインストールします。 brew update brew cask install hyper インストールが完了したらHyperを起動します。 プラグインの適用 Hyperを起動…
<p class="first-line">aaaaaaaaa</br> bbbbbbbbb</br> ccccccccc</br> ddddddddd</br> </p> <p class="first-letter">aaaaaaaaa</br> bbbbbbbbb</br> ccccccccc</br> ddddddddd</br> </p> :first-line, :first-letterを使用 最初の行のみ、最初の文字のみスタイル変更することができる。 p.first-line:first-line { color: red; } p.first-letter:first-let…
プライバシーポリシー Divelogは、ダイブ情報を作成、保存、編集できるモバイル・アプリケーションです。 個人情報保護方針 以下のとおり個人情報保護方針を定め、個人情報保護の仕組みを構築し、個人情報保護の重要性の認識と取組みを徹底することにより、…
react-native-elements をインストールしたところ以下のようなエラーが出ました。 [server error] Cannot load the stats for react-native-elements – please try again later 何回かインストールしてみたのですが、変わらず。 調べてみるとこちらが見つか…
<ul> <li>１</li> <li>２</li> <li>３</li> </ul> <a href="http://google.com">google!</a> <input type="text"> :first-childを使用 ul li:first-child { color: red; } 結果 :link, :visited, :hover, :activeを使用 リンクに対して以下の擬似クラスが使用可能。 a:link { color: green; } /* 未訪問のリンク */ a:visited { color: blue; } /* 訪…
エラーが出たコード <div> <span className="icon"></span> </div> 解決方法 エラーの原因は、span タグの中身（content）が空の場合は、 </span> といった閉じタグの指定ではなく、 <span /> のように記述する必要があるからです。 これを self-closing と言います。 <div> <span className="icon" /> </div></span>
こちらのhtmlを元に属性セレクタを使用していきます。 <body> <p> <a href="http://google.com">Googleへ</a> </p> <p> <a href="http://yahoo.co.jp" title="yahoo" class="search link">Yahoo!へ</a> </p> </body> タイトルを指定 a[title] { color: red; } これでtitle属性をもつaタグにスタイルが適用されます。 今回は、「Yahoo!へ」のみが赤色になります。 属性の値を指定する a[title="…
「a, b」で指定 h1, h2 { color: red; } これは、同じスタイルを複数のセレクタに対して適用します。 h1とh2の文字色が赤色になります。 「a b」で指定 div p { color: red; } これは、divの下にあるpタグ全てにスタイルを適用します。 「a > b」で指定 div …
herokuのデータベース（PostgreSQL）に接続する際にでた以下のエラーの解決方法。 org.postgresql.util.PSQLException: FATAL: no pg_hba.conf entry for host "【host名】", user "【user名】", database "【database名】", SSL off 解決方法 &ssl=true&ssl…
S3に画像をアップロードする方法を紹介していきます。 言語は、 Scala 、フレームワークは Playframework を使用しています。 1. S3にバケットを作成 まずは、S3への登録です。 1_1. バケットを作成 S3のトップ画面に表示される バケットを作成する を選択 …
今までbashで問題なくやってきたのですが、友人に便利だと勧められfishに切り替えたのでその手順を記載していきます。 インストール まずはfishをインストールします。 brew install fish インストールが完了したら、/etc/shells に/usr/local/bin/fish を追…
今回はコンストラクタ引数の使い方を見ていきます。 Javaなどの言語を学んでいる方は以下のような書き方が馴染み深く理解しやすいのではないでしょうか。 class Person(_name: String) { val name = _name } object Main { def main(args: Array[String]): U…
Macで現在使用しているディスクの容量を確認する方法です。 以下の手順で確認が行えます。 1. 画面左上のリンゴアイコンから「このMacについて」をクリック 2. 「ストレージ」タブをクリック これで確認が行えます。
先日JSTQB Foundation Level 試験に合格しました。勉強法や試験について書いていこうと思います。 そもそもJSTQBって？ もしかしたら中には知らない人もいるかもしれないので。 簡単にいうと「テスト」に関する資格試験です。 我々JSTQB（Japan Software Tes…
Markdownって複数の空白行入れられないのかな…？と思いながらも調べるのが面倒で多少レイアウト乱れてもほったらかしていました。 ただ、探してみるとすぐに見つかったので備忘録としてここに書いておきます。 Markdown記法で複数の空白行を入れる方法 めち…
