【Sass】ラベルとボタンの作り方エンジニアTwitterFacebookはてブPocketLINEコピー2019.07.01この記事は約5分で読めます。こんにちは、オノユウ(@yumaonodera_)です。ラベルとボタンの関数を作りました。使いたいところで、関数を呼び出し、値を入力することで、簡単にオリジナルのボタンを作ることができます。コピペOKですので、ぜひ使ってみて下さい。関数の使用まとめSassの導入まず、Sassを導入してください。Sassの導入方法については省略します。導入していない方は、下記記事を参考に導入してください。背景色や角の丸みなどを設定することで、様々な種類のラベルが作れます。完成イメージは下記画像です。それでは早速、手順を見ていきましょう。任意のクラス名をつけて、文字をpタグで囲みます。次に、Sass側で関数を定義します。最後に、関数を使いたい場所で、関数を読み込みましょう。文字の色);上記の通り、関数では、頻繁に設定すると思われる上記7つの項目を定義しています。影や枠線などを設定したい場合は、別で付け足してください。使用例はこんな感じです。完成したラベルが下記の画像です。基本的にはラベルと同じ仕様で、背景色や角の丸みなどを設定することで、様々な種類のボタンが作れます。作り方の手順も、ほとんどラベルの作り方と同じです。完成イメージは下記画像です。それでは、見ていきましょう。任意のクラス名をつけて、文字をaタグで囲みます。次に、Sass側で関数を定義します。最後に、関数を使いたい場所で、関数を読み込みましょう。文字の色);項目の種類はラベル関数と同じです。影や枠線などを設定したい場合は、別で付け足してください。デフォルトでは、マウスホバー時にやや透明度が上がるように設定されています。0.9;}マウスホバー時の挙動を変更したい場合は、hoverの設定を上書きするか、関数自体の定義をアレンジしてください。使用例はこんな感じです。枠線やボタンの位置などは別途指定する必要があります。完成したボタンが下記の画像です。まとめあらかじめよく使う型を定義しておくことで、コーディングが楽になります。今回紹介したのはラベルとボタンの作り方ですが、他の部品にも応用できるので、よく使う部品はあらかじめ関数を作っておくと良いでしょう。本記事では、模写コーディングの手順と心構えについて解説していきます。「プログラミング学習のためにこれから模写コーディングを始めたい」という方はぜひ参考にしてください。備忘録として、BootstrapのForm-controlの青い光を消す方法を残しておきます。コピペで簡単に使用可能です。メリット・デメリットを解説します30DAYSトライアルは、これからWeb制作で稼いでいきたいという人にうってつけの教材です。今回は、体験者の視点から、30DAYSトライアルのメリット・デメリットについて解説していきます。エンジニア最もおすすめのテキストエディタは「VisualStudioCode」です【理由と初期設定の仕方を解説】エディタ選びで迷ったら「VisualStudioCode」を選べば問題ないでしょう。本記事では、VSCodeのメリットと初期設定の仕方について解説していきます。エンジニアIT企業に就職して一番大変だった仕事は電話応対だった件IT系の企業に就職して一番大変だった仕事は電話応対でした。個人的には、プログラミングよりも電話応対のほうがよほど難しいと思います。本記事では、会社で働く上で一番苦労した電話応対の大変さについて解説します。本記事では、ウェブサイト公開サービス「Firebase(ファイアベース)」の特徴と使い方について解説します。スクショを用いて解説しているので分かりやすいはずです。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。ホームエンジニアオノユウ新卒でIT企業に就職→1年5ヶ月で退職→個人ブロガーとして2サイト運営、計250記事以上執筆→1年やってほとんど稼げず再就職→渋谷のITベンチャーでWebエンジニア兼広報担当として勤務。個人で稼ぐ力をつけるために会社でスキルとキャリアを積んでいます。さとりろぐ.メニューおすすめ記事ライフスタイルオピニオンアフィリエイトエンジニア雑記ホーム検索トップサイドバーオノユウ新卒でIT企業に就職→1年5ヶ月で退職→個人ブロガーとして2サイト運営、計250記事以上執筆→1年やってほとんど稼げず再就職→渋谷のITベンチャーでWebエンジニア兼広報担当として勤務。個人で稼ぐ力をつけるために会社でスキルとキャリアを積んでいます。日本アーカイブ2019年9月22019年8月32019年7月102019年6月82019年5月62019年4月152019年3月192019年2月282019年1月12018年11月62018年10月212018年9月162018年8月92018年7月92018年6月42018年5月122018年4月4ブログ村タイトルとURLをコピーしました。