ただ日々を記すもの

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

【Sass】&セレクタのメモ

デザイン

&セレクタを.contentsセレクタの後ろに付与した場合は、.contentsに続いて&セレクタの内容が展開されます。

&セレクタには、親のセレクタの参照を返すため、結果は次のようになります。

// &の親セレクタはこれ
.preview .header .title
// であるため、contents &の結果はこうなる
.contents .preview .header .title

.preview {
  .header {
    .title {
      color: red;
      .contents & {
        color: green;
      }
    }
  }
}

.preview .header .title {
  color: red;
}
.contents .preview .header .title {
  color: green;
}

【Sass】@at-rootメモ

デザイン

@at-rootをつけたセレクタは、そのままグローバルなところに展開されます。

.container {
  .row {
    @at-root .red {
      color: red;
    }
  }
}

展開されるCSS

.container .row {}
.red {
  color: red;
}

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

デザイン

中身をfloatにすることで起こる、レイアウト崩れを解消する方法。 overflowを使う！

html

<!DOCTYPE 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 hello world hello world hello world
          hello world hello world hello world hello world
        </p>
      </div>
      <div class="box">
        <h2>Box 2</h2>
        <p>
          hello world hello world hello world hello world
          hello world hello world hello world hello world
        </p>
      </div>
      <div class="box">
        <h2>Box 3</h2>
        <p>
          hello world hello world hello world hello world
          hello world hello world hello world hello world
        </p>
      </div>
      <div class="box">
        <h2>Box 4</h2>
        <p>
          hello world hello world hello world hello world
          hello world hello world hello world hello world
        </p>
      </div>
    </div>
  </body>
</html>

.contents {
  overflow: hidden;
  ...
}
.box {
  float: left;
  ...
}

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

プログラミング

プラベートレジストリの作成
S３を指定してのプライベートレジストリ起動
アップロード用イメージの作成
- dockerイメージ作成
アップロード

プラベートレジストリの作成

docker pull registry:2.0 # registryイメージをpull
docker images # registryがpullされたを確認する

S３を指定してのプライベートレジストリ起動

アクセスキー: ABCDE
シークレットキー: xyz
Region: ap-northeast-1 (TOKYO)

docker run -d \
--name registry \
-p 5000:5000 \
-e REGISTRY_STORAGE=s3 \
-e REGISTRY_STORAGE_S3_ACCESSKEY=ABCDE \
-e REGISTRY_STORAGE_S3_SECRETKEY=xyz \
-e REGISTRY_STORAGE_S3_BUCKET=[バケット名] \
-e REGISTRY_STORAGE_S3_REGION=ap-northeast-1 \
-e REGISTRY_STORAGE_S3_ROOTDIRECTORY=/v2 \
registry:2.0

アップロード用イメージの作成

Dockerfileを作成

FROM centos:latest
RUN yum -y install httpd
CMD ["/usr/sbin/httpd", "-D", "FOREGROUND"]

dockerイメージ作成

docker build -t webserver .

アップロード

docker tag webserver localhost:5000/httpd
docker push localhost:5000/httpd

これで、設定したS3のバケットにDockerイメージがpushされている

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

デザイン

aタグにはデフォルトで下線が設定されていますが、デザインの関係上その下線を取り除きたい場面も多々あると思います。

今回はその方法を紹介。

text-decorationの設定

デフォルトのaタグは以下のようになります。

f:id:RONKUN:20180422114218p:plain

そこで、text-decorationというプロパティを設定します。デフォルトでは、underline が設定されているので、今回はそれを none に。

a.link {
  text-decoration: none;
}

f:id:RONKUN:20180422114510p:plain

これでOK。

おまけ

aタグ以外の要素にもtext-decorationは設定可能です。
pタグとdivタグに設定するとこんな感じです。

f:id:RONKUN:20180422114741p:plain