コーディング– category –

こんにちはrey( @reydesign8376) です 便利なwebアイコンを提供している「Font Awesome」の使い方をご紹介していきます〜では早速〜 【Font Awesomeとは？】 https://fontawesome.com/ 共有されるコードを入れるだけでアイコンが表示されるようになるサー...

こんにちはrey( @reydesign8376) ですナビゲーションのデザイン3案 備忘録的な感じでやっていきます！では早速〜 【コピペOK ナビゲーションデザイン】 デザイン案① まずはこのデザインからベーシックなトップ固定にしてみました。そしてメインビューと被...

こんにちはrey( @reydesign8376) です 今まで全部のタグにクラス名をつけていました；；めっちゃめんどいと思っていた時にコーダーさんの書き方を見てなるほどーと学んだ事例がございます 今回はそれをご紹介では早速〜 【class+タグでブロック要素のスタ...

こんにちはrey( @reydesign8376) です 画像サイズがバラバラでもcssで均等に指定していく方法をやっていきます〜では早速〜 【基本の記述】 htmlと全体のcssはこちら <div class="aspect__ratio"> <img src="img/aspectratio1.png...

こんにちはrey( @reydesign8376) です h2の見出しでちょっとだけ下に線を入れるデザインありますよねコーディングをちゃんと学習しない時は何食わぬ顔でやってましたが実際にあれを実装させるのってくっそ面倒臭かった！！！ コーダーさんに謝罪を込めて、...

こんにちはrey( @reydesign8376) です 表の作成でtrとthを逆に書いていました。もうダメだ。覚えられねぇやそんな感じで早速したためていきます〜 【表作成に必要なタグの確認】 <table> 表全体を囲むタグになります ↑tableで囲むイメージ <tr>...

こんにちはrey( @reydesign8376) です イラレやフォトショップみたいに乗算や焼き込みなど要素を重ねて表現することができる「mix-blend-mode」の16の種類を紹介していきます！ では早速！ 【mix-blend-mode: color;】 【mix-blend-mode: color-burn;】 【...

こんにちはrey( @reydesign8376) です ブロック要素に影をつけるbox-shadowの影デザインをしたためていきます〜 ではサクサクっとやっていきます〜 【コーディング解説】 box-shadowの書き方はこんな感じ .container1 { box-shadow: 20px 20px 10px 20px #...

こんにちはrey( @reydesign8376) です リセットCSSを入れることでブラウザが持っているスタイルをリセットしてくれます。 コードはこちら /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclark...

こんにちはrey( @reydesign8376) です input種類の備忘録をサクサクっとしたためて参りますでは早速〜 【inputとは】 inputとは送信フォームによく使うタグになりますinputにはtype属性と言われるものがあり<input type=”type属性名”>を入...