環境 jsfiddle vue@2.6.14 クリックしたボタンの色を変化させる! 完成したコード ボタンをクリックするとボタンの色が変化します。 クリック前 クリック後 詳細 css .buttoncolor { background-color: green; } 変更後のボタンの色を指定しています。 html <div id='app'> <button v-bind:class="{ buttoncolor: buttonState }" v-on:click="changeState"> 色を変えるためのボタン </button> {{buttonState}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> ①v-bind:classではv-bind:class="{class名: バインド先(真偽値を持つ)}"とすることで、真偽値を持つbuttonState変数とbuttoncolorクラスを対応させている。 つまりbuttonStateがtrueの時、buttoncolorクラスが適用されるが、falseの際には適用されなくなることでボタンの色が変化する。 ②v-on:clickは、クリックした際に作成したchangeStateメソッドが実行され、buttonStateの真偽値が変更される。 真偽値が変更されることで①が実行される。(changeStateメソッドの詳細は、sctiptの詳細で説明します。) script var app = new Vue ({ el:'#app', data:{ buttonState: false }, methods:{ changeState: function(){ this.buttonState = !this.buttonState } } }) ①data内に、真偽値を持つbuttonState変数を指定している。 ②methodsでは、呼び出された際に、真偽値を変更するchangeStateメソッドを作成している。 動作 ①ボタンがクリックされる ②v-on:clickで指定された、changeStateメソッドが実行される。 ③②でbuttonStateの真偽が変更される。 ④③で真偽値が変更されたこと、v-bindでバインドされたクラスがtrueの時にだけ適用される。 まとめ 簡単なコードですが、いざ実装するとなると慣れるまでは時間がかかってしまいました。 私と同じ初心者さんの参考になればと嬉しいです!

どうも7noteです。背景色につかえそうな色をまとめてみました。 多くのwebサイトが白背景の黒文字になっていますが、webサイトにこだわりを出している会社なんかは実は白以外の背景色を使っていたりもします。 そんなおしゃれなサイトを作るための参考として、ホームページで背景色として使えそうな組み合わせをいくつかまとめてみました。 これだけに限らず、色には様々ないろがあるのでこだわりの一色をさがしてみてください。 「文字:黒」で映える背景色 ・ 白 ・ ベージュ(赤) ・和紙風 「文字:白」で映える背景色 ・黒〜グレー ・青 ・茶色 ※あまり濃い色が多く見えてしまうとサイトがキツイ印象なってしまうので注意！ まとめ 文字も真っ黒の#000ではなく#333くらいにする方が少し柔らかい印象になりますし、 白文字も真っ白でない方が綺麗に見える場合もあります。 ただ、オシャレな色を選ぶ際は視認性もしっかり意識して選ばなければなりません。 以下のサイトでコントラストチェックをして視認性が良いか判断することができます。 ブログなんかは特に文字も多く読むテキストばかりなので、視認性はとても重要になってきます。 参考： https://lab.syncer.jp/Tool/Color-Contrast-Checker/ http://degitekunote.com/blog/2015/06/29/background-color/ https://www.heyblend.com/ http://talking-ultrasuede.jp/ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

目的 HTMLにてラジオボタンを実装する方法をまとめる 方法 下記のように記載することでラジオボタンを実装する事ができる。 <input type="radio" name="1" value="true">テストテスト true <br> <input type="radio" name="1" value="false">テストテスト false input要素にてtypeをradioにすることで作成することができる。

結論 親要素にdisplay:gridを使用する。 参考にさせて頂きました。ありがとうございます。 https://qiita.com/mishiwata1015/items/7c26ea7bc80a9200ad78 https://drafts.csswg.org/css-align-3/#overview 下記ページにもNote that justify-self is ignored in Flexbox layouts.とあります。 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

結論 justify-selfはgridで使用できます。 ・親要素をdisplay:grid、子要素をjustify-self:endにする。 ・または、親要素をdisplay:flex、子要素をmargin:leftにする。 参考にさせて頂きました。ありがとうございます。 https://qiita.com/mishiwata1015/items/7c26ea7bc80a9200ad78 https://drafts.csswg.org/css-align-3/#overview 下記ページにもNote that justify-self is ignored in Flexbox layouts.とあります。 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

cssの色々 以下のように"."が付くのは、HTML内でクラスの設定（class="works"）とした場合に必要です。headerの"p"タグの場合は、header p {}として大丈夫です。 css .works { } font-weight（太さの指定） css .work h1 { margin: 0; font-weight: normal; font-size: 24px; } list-style-type: none;（liの・を消す） css .work ul { margin: 0; padding: 0; list-style-type: none; display: flex; } CSSを適用したい（ulの中のliに適用したい時）指定方法 カンマなどで区切ったりしないようにする。ulの後にliと書こう。 .work ul li { margin-right: 8px; } アイテムの調整（containerなどにも使える） Flexbox内の要素を縦方向で中央揃えにするために、align-itemsを使っていきます。 css /* 位置による配置 */ /* align-items は左と右の値を取らない */ align-items: center; /* アイテムを中央付近にまとめる */ align-items: start; /* アイテムを先頭にまとめる */ align-items: end; /* アイテムを末尾にまとめる */ align-items: flex-start; /* フレックスアイテムを先頭にまとめる */ align-items: flex-end; /* フレックスアイテムを末尾にまとめる */ クラス内にあるタグにだけcssを適用する方法(>区切りのセレクタ) ">"を使用して、指定したクラスの中にあるもの（今回：h1）にのみ適用することができる。 css .works > h1 { font-weight: normal; font-size: 24px; text-align: center; } .works > section > h1 { font-weight: normal; } line-heightで行間指定方法 細かい余白を調整したのちに、line-heightプロパティを使って行間の調整をしていきます。数値1以上で空間が発生します。 css .works p { line-height: 1.8; }

画像を丸くする方法 css .icon img { border-radius: 50%; border-width: 5px; border-style: solid; border-color: white; }