ただ日々を記すもの

意識高めを装うことができます

スマホで見たときはてなブログのMarkdown記法テーブルが見切れてしまうときの対処法

起こっていた現象 Markdown記法でテーブルを書いていたのですが、 スマホでみてみると右側が見切れてしまっていました。 今回はその時に行った対処法を紹介します! 対処法 スマホで見たときはテーブルを横方向にスクロールできるように設定していきます。 …

はてなブログで「続きを読む」を入れてみる!

長い記事を書いた場合や続きはトップページではなく詳細ページで表示させたいときに使えるのが「続きを読む」記法。 今回はその使い方を調べたので書いて行きたいと思います!

TACの講座を受講し、応用情報技術者試験に受かりました

応用情報技術者試験について 学習方法 TAC どんな感じで利用したか 結果 まとめ 応用情報技術者試験について 言わずもがななITの資格。 基本情報技術者試験の上位資格に該当。 転職を考えていたので取っておくと有利かなと思い受験。 受験日 2018年4月15日 …

kubernetesメモ

kubernetesとは 複数のホストを束ねてDockerを利用するためのオーケストレーションツールで、分散環境において「あたらかも1台のコンピュータ」のように透過的にコンテナにアクセスすることが可能。 基本的な概念 Pod 複数のコンテナをまとめてPodとして管理…

Dockerまとめ2

docker-compose 複数のコンテナを起動するとき、コンテナごとに構成や起動/停止を管理していると運用が煩雑になり大変... そこでdocker-composeを使用する。 docker-composeは、複数のコンテナ(DB用やwebサーバー, logのコンテナ)をまとめて管理するための…

Dockerまとめ

Dockerfile RUN yum -y install httpd exec形式の記述 exec形式ではshellを介さずに実行される。 シェルを使用したい場合は、以下のようになる。 RUN ["/bin/bash","-c","yum -y install httpd"] /bin/shを介したい場合 => shell形式 それ以外 => exec形式 C…

Font Awesomeについてもろもろ

iconを重ねる <div class-"fa-stack"> <i></i> <i></i> </div> アイコンを重ねるためには、fa-stackを親要素に追加して、子要素に重ねるアイコンを配置します。 子要素は次のようにクラスを追加します。 外側に見せたいアイコン => fa-stack-2x(少し大きめのサイズ) 内側に見せたいアイコン => fa-stack…

float属性をつける際の注意

float属性を指定すると、要素は それを囲む要素の高さに関係無く表示され、スタイル崩れが起きる場合があります。 したがって、float属性を指定する際には、その一つ上の要素(例えば li要素ならば ul要素 など)にoverflow属性を指定し、その値にhidden をつ…

【Sass】&セレクタのメモ

&セレクタを.contentsセレクタの後ろに付与した場合は、.contentsに続いて&セレクタの内容が展開されます。 &セレクタには、親のセレクタの参照を返すため、結果は次のようになります。 // &の親セレクタはこれ .preview .header .title // であるため、cont…

【Sass】@at-rootメモ

@at-rootをつけたセレクタは、そのままグローバルなところに展開されます。 .container { .row { @at-root .red { color: red; } } } 展開されるCSS .container .row {} .red { color: red; }

中身のコンテンツをfloatにすることで発生するレイアウト崩れをoverflowで解決する方法

中身を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>

S3を使ったdockerイメージ共有

プラベートレジストリの作成 S3を指定してのプライベートレジストリ起動 アップロード用イメージの作成 dockerイメージ作成 アップロード プラベートレジストリの作成 docker pull registry:2.0 # registryイメージをpull docker images # registryがpullさ…

【CSS】aタグの下線をなくす方法

aタグにはデフォルトで下線が設定されていますが、デザインの関係上その下線を取り除きたい場面も多々あると思います。 今回はその方法を紹介。 text-decorationの設定 デフォルトのaタグは以下のようになります。 そこで、text-decorationというプロパティ…

ターミナルの背景をポケモンに!

手順 Hyperのインストール Hyper-Pokemonプラグインの適用 Hyperをインストール ターミナルエミュレーター のHyperをインストールします。 brew update brew cask install hyper インストールが完了したらHyperを起動します。 プラグインの適用 Hyperを起動…

【CSS】擬似要素

<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

プライバシーポリシー Divelogは、ダイブ情報を作成、保存、編集できるモバイル・アプリケーションです。 個人情報保護方針 以下のとおり個人情報保護方針を定め、個人情報保護の仕組みを構築し、個人情報保護の重要性の認識と取組みを徹底することにより、…

【react-native-elements】インストール時のserver errorについて

react-native-elements をインストールしたところ以下のようなエラーが出ました。 [server error] Cannot load the stats for react-native-elements – please try again later 何回かインストールしてみたのですが、変わらず。 調べてみるとこちらが見つか…

【CSS】擬似クラス

<ul> <li>1</li> <li>2</li> <li>3</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; } /* 訪…

【eslint】Empty components are self-closingエラーの解決法

エラーが出たコード <div> <span className="icon"></span> </div> 解決方法 エラーの原因は、span タグの中身(content)が空の場合は、 </span> といった閉じタグの指定ではなく、 <span /> のように記述する必要があるからです。 これを self-closing と言います。 <div> <span className="icon" /> </div></span>

【CSS】属性セレクタを使用する

こちらの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="…

【CSS】セレクタの指定

「a, b」で指定 h1, h2 { color: red; } これは、同じスタイルを複数のセレクタに対して適用します。 h1とh2の文字色が赤色になります。 「a b」で指定 div p { color: red; } これは、divの下にあるpタグ全てにスタイルを適用します。 「a > b」で指定 div …

PSQLException:FATAL: no pg_hba.conf entry...., SSL offの解決方法

herokuのデータベース(PostgreSQL)に接続する際にでた以下のエラーの解決方法。 org.postgresql.util.PSQLException: FATAL: no pg_hba.conf entry for host "【host名】", user "【user名】", database "【database名】", SSL off 解決方法 &ssl=true&ssl…

【Scala, Play】S3に画像をアップロード

S3に画像をアップロードする方法を紹介していきます。 言語は、 Scala 、フレームワークは Playframework を使用しています。 1. S3にバケットを作成 まずは、S3への登録です。 1_1. バケットを作成 S3のトップ画面に表示される バケットを作成する を選択 …

bashからfishに切り替える!

今までbashで問題なくやってきたのですが、友人に便利だと勧められfishに切り替えたのでその手順を記載していきます。 インストール まずはfishをインストールします。 brew install fish インストールが完了したら、/etc/shells に/usr/local/bin/fish を追…

Scalaでコンストラクタ引数を使う!

今回はコンストラクタ引数の使い方を見ていきます。 Javaなどの言語を学んでいる方は以下のような書き方が馴染み深く理解しやすいのではないでしょうか。 class Person(_name: String) { val name = _name } object Main { def main(args: Array[String]): U…

Macでディスクスペースを確認する方法【Sierra】

Macで現在使用しているディスクの容量を確認する方法です。 以下の手順で確認が行えます。 1. 画面左上のリンゴアイコンから「このMacについて」をクリック 2. 「ストレージ」タブをクリック これで確認が行えます。

JSTQB Foundation Level に受かった話

先日JSTQB Foundation Level 試験に合格しました。勉強法や試験について書いていこうと思います。 そもそもJSTQBって? もしかしたら中には知らない人もいるかもしれないので。 簡単にいうと「テスト」に関する資格試験です。 我々JSTQB(Japan Software Tes…

Markdown記法で複数の空白行を入れたい!

Markdownって複数の空白行入れられないのかな…?と思いながらも調べるのが面倒で多少レイアウト乱れてもほったらかしていました。 ただ、探してみるとすぐに見つかったので備忘録としてここに書いておきます。 Markdown記法で複数の空白行を入れる方法 めち…

Kotlin + Spring BootでThymeleafテンプレートを使ってハマった話

概要 現在、Kotlin + Spring Bootで開発をしているのですが その中で詰まった、ハマってしまった部分を紹介します。 今回はThymeleafテンプレートに関して。 かなり開発序盤の内容です。主にセットアップ。 ハマった問題 その1 前回のブログ で紹介したよう…

【爆速】kotlin、Springboot、Gradleでプロジェクト作成!

はじめに 最近kotlinでプロジェクトを作成し、その際に案外簡単にプロジェクト作成できたのでこちらでそのときの作り方を紹介します。 プロジェクトを作る SPRING INITIALIZRでプロジェクト作成 もっとも簡単にプロジェクトを作成するために使えるのがこれ。…