20200227のCSSに関する記事は11件です。

文字のアウトラインだけ色が変化するCSSアニメーション

やりたいこと

  • テキストのアウトラインだけ色が変化するようにしたい
  • テキストは決め打ちではなく、自由に変えられる

イメージ

スクリーンショット 2020-02-27 23.41.25.png

このカラフルな部分がグラデアニメーションする感じです。

出来上がったコード

index.html
<p class="txt-outline">TEXT OUTLINE</p>
style.css
body{
 background-color:#fff; 
}
.txt-outline{
    text-align:center;
    font-size: 5rem;
    color: #fff;
    -webkit-text-stroke: 4px rgba(0,0,0,0);
            text-stroke: 4px rgba(0,0,0,0);
    font-weight: bold;
    letter-spacing:3px;
    background: -moz-linear-gradient(-45deg, #661df7 0%, #fcbf2f 25%, #ef26ba 50%, #2696f2 75%, #661df7 100%) 0% center / 200% auto;
    background: -webkit-linear-gradient(-45deg, #661df7 0%,#fcbf2f 25%,#ef26ba 50%,#2696f2 75%,#661df7 100%) 0% center / 200% auto;
    background: linear-gradient(135deg, #661df7 0%,#fcbf2f 25%,#ef26ba 50%,#2696f2 75%,#661df7 100%) 0% center / 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-animation: outlineRun 4s linear infinite;
            animation: outlineRun 4s linear infinite;
}
/* 背景の横位置をズラす */
@-webkit-keyframes outlineRun {
  to { background-position-x: 200%; }
}
@keyframes outlineRun {
  to { background-position-x: 200%; }
}

text-strokeの色を透明にし、背景色と文字色を同じにするのがポイントです。

実際のサンプル

See the Pen outline text animation by Mei Koutsuki (@mei331) on CodePen.

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

SassとStylusについて

業務でStylusを使用することになったので、Stylusの書き方について、まとめてみました。

CSSの問題点

CSSは、HTMLでマークアップしたものを飾り付けることで、より意味を持たせるためのスタイル言語です。
これにより、PCの画面をHTMLだけのものに比較して様々な表現をすることが可能となりますが、CSSでは{}が必要だったりセミコロンが必要だったりと、多くの制約があることが事実としてあります。
その制約を取ることができないものか。
これを考えた末、SassとStylusが誕生しました。

SCSSとは

Sass(サス)とはCSSをより簡略的に、しかし多機能で書けるようにした記法です。
具体的に見てみましょう。

CSS
div {
    margin: 0 auto;
}

div p {
    padding: 20px;
}
Sass
div {
    margin: 0 auto;
    p {
        padding: 20px;
    }
}

上がCSS、下がSassとなります。
見てみると、Sassは入れ子構造でdivを一つにできているのがわかります。
このように、書き方を省略してもCSSと同じようにスタイリングすることができるのがSassの魅力です。

SASSとSCSS

少しわかりにくいですが、SassにはSASSとSCSSというふたつの記法が存在します。

SASS
div
    margin: 0 auto
    p
        padding: 20px
        span
            font-color: red;
SCSS
div {
    margin: 0 auto;
    p {
        padding: 20px;
        span {
             font-color: red;
        }
    }
}

上がSASS、下がSCSSです。
実は先ほど紹介したSassはSCSSの記法であったことがわかります。
SASSが先に生まれ、SCSSが後にできているのですが、
どちらもネスト構造(入れ子構造)を作ることで、省略をしようとしていることがわかりますね。
ただ、そのアプローチがインデントを作ることであるか、{}をつくることであるか、という違いであると言えます。
SASSのほうがよりシンプルだと思うのですが、CSSとの連携に乏しかったこともあり、結局{}を持ったSCSSの記法が一般的になりました。

Sassはmixinが使える

ここで、少しSassの機能として、mixinに触れておきます。
CSSでは基本的には全ての値をスタイル時に決めておくことが必要で、動的に表示を変えたりすることが難しいという点がありました。
Sassはそれを改善するためにmixinという機能を搭載しています。
mixinとは、引数を使ってスタイルの設定ができる、いわばプログラミング言語的にCSSを扱うことができる機能です。

Stylusとは

CSSの書き方のひとつで、自由な書き方で書くことができます。
具体的には、

  • CSSをそのまま書くことができる
  • SCSSをそのまま流用することができる

というように、他の記法をそのまま使うことができます。

その中で、CSSだと {} などが必要となるところで、それが必要なく書くことができるところが便利なところです。

また、変数や引数を使用したりと、動的に書くことができるのも、Stylusの魅力であると言えます。

構造はインデントを使うことで階層を作ることができます。
書いていると、インデントがないと階層構造を作れないので、インデントがずれてしまうとその後の設計が全て狂ってしまうという事がありえます。

詳しくはまた後日付け加えようと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Ruby on Rails 5】Instagram風簡易SNSアプリを作ってみよう!(Techpit教材)を終えて

Techpitの【Ruby on Rails 5】教材の感想

TechCommitさんのお年玉企画にて頂いたTechpit教材を使って、Ruby on Rails 5で簡易アプリを作成しました。
簡単ではありますが、どのようなことを学べたのか、その感想を記します。

また、当方実務経験などが全く無く、言語を独学で学んでいる程度なので、経験も知識も非常に浅いことをご了承願います。

教材に取り組む上で必要な知識

まず、【Ruby on Rails 5】instagram風簡易SNSアプリを作ってみよう!という教材は、以下の言語を使用します

  • HTML
  • CSS
  • Javascript
  • Ruby

必要条件はHTML/CSS、及びRubyの基礎知識とされています。

主な目的はRuby on Railsの流れを把握するものであり、
SNSのinstagramを参考にしたアプリ作成を進める内容となっています。

今回の教材に取り掛かるにあたって、HTMLとCSS、Rubyの基礎知識をProgateで補っています。
教材は、2回ほど繰り返し学習を行いました。

※教材内でHTML/CSSは多く使われますが、詳しい解説はありません。

教材の流れと大まかな内容

  • 環境構築
    • Mac -Homebrew
    • Windows -Cloud9
  • Railsアプリケーション作成
    • Gemインストール
    • ローカルサーバー立ち上げ
  • MVC知識
  • Bootstrap導入
  • 機能を付ける
    • サインアップ・サインイン
    • プロフィール
    • 画像投稿
    • いいね
    • コメント
  • デプロイ
    • Herokuを利用してサービス公開
  • pry-railsを用いたデバック方法

どのファイルでどのコードを記述するか、コードの意味から、詳しい情報が書いてある詳細ページのリンクも要所要所あります。

また、各項ごとに質問投稿欄があり、わからないことが運営へ質問出来るようになっていました。

全体を通しての感想

プログラミング超初心者ながら教材を終えて、感想を大きく三つあります。

  • 初心者にも作れるわかりやすさ
  • 使用する知識が多い
  • エラーに慣れてくる

初心者にも作れるわかりやすさ

アプリを作るというと難しそうだなとは思っていましたが、
一つ一つのページを作り、それを組み立てるような流れでわかりやすかったので、
進めていければアプリ作成・公開まで行うことが出来ます。

使用する知識が多い

教材内容全てを理解する、というのは、特に言語など基礎の基礎を学んだだけでは出来ませんでした。使用する言語も多い(ように感じた)ので、基礎知識しか無い段階で全て理解しようとすると相当な時間がかかると思われます。

といっても、そもそもこの教材の一番目的がRuby on Railsの流れを把握することなので、まずは流すように取り組むだけでも、大枠が見えてきます。
細かいことを知りたい時はそのページで質問するでも、リンクを参考にするでも可能なところが良かったです。

エラーに慣れてくる

私が初心者なせいかとは思いますが、教材通りにしているつもりでもどこかしらでエラーが起きて躓いてしまうことが多々ありました。

しかし自分が躓いていることは大体他の人も躓いていることが多かったので、特に各項の質問投稿欄は、同じエラーで解決した人が居たりして、非常に助けになり、また、何度かエラーを繰り返すことでエラーの直し方や着目すべきところも以前より見えるようになった気がします。

まとめ

長くなりましたが、この教材の対象者でもあるように、Ruby on Rails開発の流れをつかみたい人、アプリを作成してみたい人、特にRubyを学んでいる方にはおすすめです。

しかし感想でも触れましたが、やはり言語の面での自分の知識不足が痛かったです。
基礎知識をしっかり固めてやると、もっと入りやすいのかなと思いました。教材としては扱いやすくてとても良かったです。

アプリ作成、そしてサイトの公開まで学べるという点で、知識の色んな活用の仕方が出来るのではと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

文系ガチの未経験だった僕が自力4ヶ月弱で自社開発のweb系会社で新卒内定をもらうために行ったこと

誰に読んで欲しいか

・文系新卒未経験の方
・web系の会社で働きたい方
・フリーランスでアソビタィ!!

偉そうに書きますがご容赦ください><

なぜ書くのか

実際に自分がエンジニアになりたいと思った時に情報が全くなかったから。
何をしなければいけないかが全くわからなかった。

web系で就職した人や未経験理系卒の方の情報は多少あれど文系未経験新卒でweb系エンジニアになった人の情報は全くなかったため。しかし文系卒のエンジニア志望は増えて来ていてニーズはかなりあると考えた。

自己紹介

早稲田大学文系3年生。
長所は考えた上で実際に行動にすぐに移せること。
大学生時代は酒飲み、遊び、そしてオーストラリアとニュージーランドでワーキングホリデーを行い、ガチガチの現地の環境に身を置いて生活をした。
その時に初めてテクノロジーに触れて衝撃を受け、ITに興味を少し持つ。
ものを作ってびっくりさせることが好き。

自分が行ったこと

3年生の夏

コンサル目指してサマーインターンを応募しまくるも落選落選。
→自己分析を重ねてどう考えても仕事よりノマドになって海外で自由に働きたいと強い決意。

10月前半

・週3働いていたマーケのインターンを辞め、飲み会などを減らし、未来への投資として勉強する。
実際にprogateという初心者向けの学習サイトで月額1000円払ってHTML,CSSを2週ほどした。
 →一周2日あれば余裕
 →月額1000円はスクールと比較すればどう考えても格安
・その後実際に自分の作ってみたいサイトを5つほどアウトプットしてみる
・その後同じものでJavaScriptを学び、難しかったので5週ほどした。

10月後半

・インターンを視野にいれて重役のいる大手コンサルでの長期インターンの条件としてあげられた制作物の作成に励む。
 ・課題の内容としてはとあるチャットアプリのAPIを使ったアプリ内メッセージ検索webアプリ
 ・AWSを使ったデプロイまで行うよう指示される
 ・文系なのでエンジニアの友人もいなかったため小学校の時の友人、MatcherというOB訪問アプリで 出会った社会人の方、前職場のエンジニアの方に再コンタクト
 ・正直かなり大変でエラー1つに数日かけることもしばしば
・Vue.jsというjavascript(js)の指定が確かあったため、Udemyというオンライン学習用動画を販売するサイトを利用し、1000円で購入し、課題と同時並行で勉強した。

11月後半

課題完成し、OKが出たが人数の関係で引き伸ばされた。
→しょぼいですがもしお時間あれば見てみてください..まだまだ改良中なのでお手柔らかに..
slackのメッセージ検索アプリ

早く実務経験を積みたかったため、諦めて自分でインターンを探し始める。
この時使ったものはMatcher,キャリアバイト,Infraというサービスたち。
まずエンジニアとしての働き方などベースを知るためにMatcherで20人ほど文系未経験卒のエンジニアの方中心に話を聞いた。

12月

その後早速実務未経験でも働けそうなインターンに応募。面接させてくれた企業は3つ。
1つ目の企業には面接中に断られる。

ここでフィードバックをお願いして教えてもらったこと
・普通に企業の目線で考えるとエンジニアを雇う意味は2つ。
 ❶即戦力で企業に利益をもたらすため
 ❷就職するかもしれないため将来を見越した研修込みの投資として

今このページを読んでいる人はおそらく❷を狙うしかない。
だから自分はそれ以降就職してもいい会社しか応募せず、面接も本気で就活のレベルで受けた。

12月後半

ゲームメディアを運営する企業で採用された。フロントでの努力を評価されバックエンドのPHPを使ったエンジニアとして研修込みでの採用。
同時にレバテックという人材サービスを利用し就活を視野に入れて自己分析をもっと極める。

1月

長期インターン開始。
後半からは面接も平日夜に毎日受ける。
→フィードバックを最大限に生かしてPDCA回して面接の受けが良くなっていく。

2月

ついに複数の企業から内定をいただく。
現在まだ一応他の企業も見ている。

すいません。日記のような形になりました。

まとめ

就職までの時間を考えて何をすべきか逆算していくことが大事。
正直自分は実務経験ないと就職できないと思ってインターンを必死に探したが、しなくてももしかしたらよかったかもしれない。
しかしインターンをして就活しながらも現在進行形で技術に触れていることをアピールできたのは大きかった所感。

インターンを受けるにあたって大事なことは
ちゃんと就職してもいい企業で受けると互いに良くて面接ももちろん通る。

就活では
・しっかりエンジニアになりたい理由を固めることは大前提必要。

・その上でそのために実際にこんなもの作って、インターンもやっている(何かしら活動している)から私はこれからももちろんエンジニアでゴリゴリ開発していきますよ?だって書くの好きだもん!ということを伝えることが絶対に必要。

おそらく面接官が心配していることは、
❶エンジニアなりたいのはわかったけど続けれるのか。文系やめる人多いけど。
❷成長は早くて遅い経験有りのエンジニアを雇うよりも将来的に利益になるのか。

ということ。
あとは文系ならでは(?)のコミュニケーション能力を面接で抜群に発揮して内定をもぎ取りましょう!!

感想

初めてのqiita投稿でした。
ずっと前から自分が情報なくて困っていたのでこういったことを内定もらったらすぐにしたいと考えていて、それが実行できたので嬉しいです。

次回は初心者から見た簡単なIT業界やエンジニアの中の詳しい職種の特徴を発信したいと思います。
もちろんコーディングの知識もアウトプットしたいと考えてます。

お手柔らかに、意見やコメントもらえると嬉しいです!
ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

文系ガチの未経験エンジニアだった僕が自力4ヶ月弱で自社開発のweb系会社で新卒内定をもらうために行ったこと

誰に読んで欲しいか

・文系新卒未経験の方
・web系の会社で働きたい方
・フリーランスでアソビタィ!!

偉そうに書きますがご容赦ください><
右に目次があるので興味あるとこのみピックアップできます!!

なぜ書くのか

実際に自分がエンジニアになりたいと思った時に情報が全くなかったから。
何をしなければいけないかが全くわからなかった。

web系で就職した人や未経験理系卒の方の情報は多少あれど文系未経験新卒でweb系エンジニアになった人の情報は全くなかったため。しかし文系卒のエンジニア志望は増えて来ていてニーズはかなりあると考えた。

自己紹介

早稲田大学文系3年生。
長所は考えた上で実際に行動にすぐに移せること。
大学生時代は酒飲み、遊び、そしてオーストラリアとニュージーランドでワーキングホリデーを行い、ガチガチの現地の環境に身を置いて生活をした。

なぜエンジニアになりたいか

2年生までは「MacBook=レポートを作成できる優れモノ」だったが、
ワーホリで初めてキャッシュレスというテクノロジーに触れて衝撃を受け、生活の質を劇的に変えることのできるITに興味を少し持つ。
誰かの役に立つものを作ること。喜んでもらうこと。びっくりさせることが好きだから。
あとは成長が積み上げ式でわかる。営業を2年間やっていたが状況によって結果が大きく異なる。エンジニアのスキルは昔のコード見ると明らかに質が低いのがわかる。(四ヶ月目までの今の時期だけかもしれないが)

自分が行ったこと(具体的に)

3年生の夏

コンサル目指してサマーインターンを応募しまくるも落選落選。
→自己分析を重ねてどう考えても仕事よりノマドになって海外で自由に働きたいと強い決意。

10月前半

・週3働いていたマーケのインターンを辞め、飲み会などを減らし、未来への投資として勉強する。
実際にprogateという初心者向けの学習サイトで月額1000円払ってHTML,CSSを2週ほどした。
 →一周2日あれば余裕
 →月額1000円はスクールと比較すればどう考えても格安
・その後実際に自分の作ってみたいサイトを5つほどアウトプットしてみる
・その後同じものでJavaScriptを学び、難しかったので5週ほどした。

10月後半

・インターンを視野にいれて重役のいる大手コンサルでの長期インターンの条件としてあげられた制作物の作成に励む。
 ・課題の内容としてはとあるチャットアプリのAPIを使ったアプリ内メッセージ検索webアプリ
 ・AWSを使ったデプロイまで行うよう指示される
 ・文系なのでエンジニアの友人もいなかったため小学校の時の友人、MatcherというOB訪問アプリで 出会った社会人の方、前職場のエンジニアの方に再コンタクト
 ・正直かなり大変でエラー1つに数日かけることもしばしば
・Vue.jsというjavascript(js)の指定が確かあったため、Udemyというオンライン学習用動画を販売するサイトを利用し、1000円で購入し、課題と同時並行で勉強した。

11月後半

課題完成し、OKが出たが人数の関係で引き伸ばされた。
→しょぼいですがもしお時間あれば見てみてください..まだまだ改良中なのでお手柔らかに..
slackのメッセージ検索アプリ

早く実務経験を積みたかったため、諦めて自分でインターンを探し始める。
この時使ったものはMatcher,キャリアバイト,Infraというサービスたち。
まずエンジニアとしての働き方などベースを知るためにMatcherで20人ほど文系未経験卒のエンジニアの方中心に話を聞いた。

12月

その後早速実務未経験でも働けそうなインターンに応募。面接させてくれた企業は3つ。
1つ目の企業には面接中に断られる。

ここでフィードバックをお願いして教えてもらったこと
・普通に企業の目線で考えるとエンジニアを雇う意味は2つ。
 ❶即戦力で企業に利益をもたらすため
 ❷就職するかもしれないため将来を見越した研修込みの投資として

今このページを読んでいる人はおそらく❷を狙うしかない。
だから自分はそれ以降就職してもいい会社しか応募せず、面接も本気で就活のレベルで受けた。

12月後半

ゲームメディアを運営する企業で採用された。フロントでの努力を評価されバックエンドのPHPを使ったエンジニアとして研修込みでの採用。
同時にレバテックという人材サービスを利用し就活を視野に入れて自己分析をもっと極める。

1月

長期インターン開始。
後半からは面接も平日夜に毎日受ける。
→フィードバックを最大限に生かしてPDCA回して面接の受けが良くなっていく。

2月

ついに複数の企業から内定をいただく。
現在まだ一応他の企業も見ている。

すいません。日記のような形になりました。

まとめ

就職までの時間を考えて何をすべきか逆算していくことが大事。
正直自分は実務経験ないと就職できないと思ってインターンを必死に探したが、しなくてももしかしたらよかったかもしれない。
しかしインターンをして就活しながらも現在進行形で技術に触れていることをアピールできたのは大きかった所感。

インターンを受けるにあたって大事なことは
ちゃんと就職してもいい企業で受けると互いに良くて面接ももちろん通る。

就活では
・しっかりエンジニアになりたい理由を固めることは大前提必要。

・その上でそのために実際にこんなもの作って、インターンもやっている(何かしら活動している)から私はこれからももちろんエンジニアでゴリゴリ開発していきますよ?だって書くの好きだもん!ということを伝えることが絶対に必要。

おそらく面接官が心配していることは、
❶エンジニアなりたいのはわかったけど続けれるのか。文系やめる人多いけど。
❷成長は早くて遅い経験有りのエンジニアを雇うよりも将来的に利益になるのか。

ということ。
あとは文系ならでは(?)のコミュニケーション能力を面接で抜群に発揮して内定をもぎ取りましょう!!

感想

初めてのqiita投稿でした。
ずっと前から自分が情報なくて困っていたのでこういったことを内定もらったらすぐにしたいと考えていて、それが実行できたので嬉しいです。

次回は初心者から見た簡単なIT業界やエンジニアの中の詳しい職種の特徴を発信したいと思います。
もちろんコーディングの知識もアウトプットしたいと考えてます。

お手柔らかに、意見やコメントもらえると嬉しいです!
ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

背景画像のFade-in表示

CSSで背景画像をフェードイン/フェードアウトで画像を切り替えるサンプルを掲載しています。
当ページでは、フェードイン/フェードアウトの速度や動き(遠近/近遠)や表示切り替えの速度などを自由に指定しながら実際のデザインを確認することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

いろいろフェードインを試してみよう
表示時間と変化の大きさ
表示時間

切り替え時間

背景画像の動き
なし 小→大 大→小
時計回り 横軸回転 縦軸回転
フェード
切り替え
使用したhtml






フェード
切り替え


生成したCSS

https://webparts.cman.jp/box/bgfade/のまんまコピペ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

続編:Javascriptでテキストを自動で円形にする

はじめに

この記事は別記事「HTMLとCSSで魔法陣を描いてみる」の続編です。続編みたいなものです。

自動化したので、長いテキストでも円形にできるようになった。

サンプル

See the Pen OJVmLOd by Yomogenium (@yomogenium) on CodePen.

コード

html
<style>
/* cssはなくても大丈夫だが、つけないとほぼ確実に見た目が悪くなる。 */
#test{
  background-color: black;
  color: white;
  position: relative;
  width: 400px;
  height: 400px;
}
</style>

<div id="test">I am the flesh and bone of my own sword, Steel flows through my body, And fire is what courses through my blood, I have created over thousand blades. Unknown to Death. Nor known to life, Many times have withstood enormous pain to create thousands of weapons. And yet those hands that are brave so much never hold anything, So as I pray now I call for “Unlimited blade works”.</div>

<script type="text/javascript">
(function(){

function ToArch(element){


  // 要素内のテキストを抜き出して配列にする
  var text = element.textContent;
  text = text.split('');

  // 要素内のテキストを1文字ずつかこみ、それらに角度と高さを設定
  element.innerHTML = '';
  for(var int = 0; int < text.length; int++){

    var divnode = null;

    // 要素の角度
    var divrotate = (360 / text.length) * int;

    divnode = document.createElement('span');
    divnode.innerHTML = text[int];
    divnode.style.position = 'absolute';
    divnode.style.height = '50%';
    divnode.style.color = 'unset';
    divnode.style.transformOrigin = 'bottom center';
    divnode.style.top = '0';
    divnode.style.bottom = '0';
    divnode.style.left = '49.5%';
    divnode.style.transform = 'rotate(' + divrotate + 'deg)';
    element.appendChild(divnode);
  }
  return element;
}

// 引数にはdocument要素を入れること。
var archtarget = document.getElementById('test');
ToArch(archtarget);
})();
</script>

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【CSS】ラジオボタンで横並び・◯部分無しの選択UIを作る

概要

ラジオボタン(<input type="radio">)を使って、以下のような選択UIのスタイルを作成してみる。
選択肢を横並びにして、選択したことを◯ではなく下線で表す。
radio-buttons.gif

スタイル

HTML
<div class="radio-button-container">
  <div class="radio-button-label">ラジオボタン</div>
  <div class="contents">
    <span>選択肢</span>
    <div class="radio-buttons">
      <input id="one" type="radio" name="radio" value="1" checked>
      <label for="one">One</label>
    </div>
    <div class="radio-buttons">
      <input id="two" type="radio" name="radio" value="2">
      <label for="two">Two</label>
    </div>
    <div class="radio-buttons">
      <input id="three" type="radio" name="radio" value="3">
      <label for="three">Three</label>
    </div>
  </div>
</div>

スタイルを当てない場合、以下のようになる。
スクリーンショット 2020-02-27 17.12.06.png

ラジオボタンの🔘を無くして、選択していることを下線で表すようにする。

SCSS
.radio-button-container {
  color: #404040;
  font-size: 16px;
  font-weight: bold;
  .radio-button-label {
    margin-bottom: 9px;
  }
  .contents {
    display: flex;
    align-items: center;
    span {
      font-size: 14px;
      padding-right: 6px;
    }
    .radio-buttons {
      display: inline-flex;
      justify-content: space-between;
      height: 25.5px;
      margin: 0;
      padding: 0;
      label {
        padding: 0 3px;
        margin: 0 6px;
        cursor: pointer;
      }
      input[type=radio] {
        display: none;
        &:checked + label {
          border-bottom: 3px solid #FFFF00;
        }
      }
    }
  }
}

See the Pen radio-buttons by mmmmk (@mmmmmmk) on CodePen.

input[type=radio]:checked + labelborder-bottombackgroundにすることで、選択した要素の背景色が変わるようにすることもできる。

SCSS
... ()
&:checked + label {
    background-color: #FFFF00;
}

スクリーンショット 2020-02-27 15.11.28.png

まとめ

ラジオボタンを使って、選択肢が横並び・選択した時に下線で選択したことを表すUIのスタイルを作成した。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者によるプログラミング学習ログ 250日目

100日チャレンジの250日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。

すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

250日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSのbox-shadowプロパティのプレイグラウンドを作ってみた

動作ページ

https://playcss.dev/box-shadow
image.png
カンマ区切りで複数の影を追加できるので、「add shadow」ボタンで複数の値を追加できるようにした。

実装

縦に長くなるので、縮められるようにしてみた、
boxsizeanime.gif
heightを変えているけれど、カラーピッカーの時には、overflowをvisibleにする必要があるので、カラーピッカーを表示したときに変化させる形になってる。

追加部分は、コンポーネント分割をして、v-forで回す感じにしてる。

<transition-group name="side">
  <template v-for="(box, index) in boxShadow">
    <box-shadows
      v-model="boxShadow[index]"
      :key="box.id"
      :index="index"
      @delete="deleteBox"
    />
  </template>
</transition-group>

border-radiusとかもコンポーネント分割して、値だけを返すようにしてどのページでも追加できるようにしていきたい。

valuesの部分のスタイルにfieldset要素がちょうどよかったので、使ってみてる。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/fieldset

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSで2カラムの料金表をつくる時のテクニック

やりたいこと

PCでは2〜3カラム、SPでは1カラムの料金表にしたい

イメージ

スクリーンショット 2020-02-26 23.41.08.png

出来上がったコード

表組みだとやりたいイメージを実現できないので、リストで書きます。

index.html
<ul class="price_list">
  <li><strong>本日のおすすめラム料理</strong>2000円</li>
  <li><strong>ラムケバブ(2本)</strong>800円</li>
  <li><strong>ラムチョップ(2本)</strong>800円</li>
  <li><strong>ラム&チップス</strong>800円</li>
  <li><strong>揚げたて!ラム唐揚げ</strong>1000円</li>
  <li><strong>おいしいラムのソテー</strong>1000円</li>
  <li><strong>ラム餃子</strong>1000円</li>
  <li><strong>マトンカレー</strong>1200円</li>
  <li><strong>ラムシチュー</strong>1200円</li>
</ul>

2カラムにするために column-count を使います。

style.css
ul.price_list{
  list-style:none;
  column-count: 2;
  column-gap: 40px;
  margin:5%;
  padding:0;
}
ul.price_list li{
  display: inline-flex;
  padding-bottom: 8px;
  border-bottom: #d2d2d2 1px dotted;
  margin-bottom: 8px;
  width: 100%;
  color:#cc0000;
}
ul.price_list li strong{
  font-weight:normal;
  color:#333;
  margin-right:auto;
}
@media screen and (max-width: 500px){
  ul.price_list{
    column-count: 1;
  }
}

column-count で分割する要素がブロック要素の場合、↓のようにpaddingやborderなどがズレてしまいます。

スクリーンショット 2020-02-26 23.46.31.png

column-count 内の要素はインライン要素にしてください。
今回はメニューと料金を分けるために inline-flex を使用しているのがポイントです。

実際のサンプル

See the Pen 2カラムの料金表サンプル by Mei Koutsuki (@mei331)on CodePen.

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む