1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

CSS

Buefyで3列のグリッドレイアウトを作る

tonyo.design こちら勉強になった。こんな感じにするだけで3列のグリッドレイアウトになって、 溢れた分は折り返してくれる。 ul.columns.is-multiline li(v-for="(todo, index) in todos" :key="index" class="column is-4")

RailsにおけるCSS構成のプラクティス

body class="#{controller.controller_name}-#{controller.action_name}" コントローラー名とアクション名 .articles { &-show { .inputContainer { margin: 20px } } &-edit { .inputContainer { margin: 10px; } } } @import "user/articles" ユーザー画面…

react-nativeでbox-shadowをつける

IOSの場合 shadowColor: #ccc, shadowOffset: { width: 0, height: 2, }, shadowRadius: 0, shadowOpacity: 1, shadowOffset width: 横への影 height: 縦の影 shadowOpacity 影の透明度 0が透明、1は透明なし これでこんな感じで下に影をつけられる Android…

CSSで記号を実装する

今回は文字の前後に記号を追加したい。 CSSの疑似セレクタ(:before, :after)を使えば要素の前後に値を表示できます。 値を指定するには疑似セレクタのcontentプロパティを使う。 IE7以下は未対応らしいですが、今回は無視しています。 contentプロパティで表…