ひとつでも多くサイト制作でラクをするためのメモPLUSTRiCKTOPcategory:codingCSSで作るシンプルな吹き出し(通常、枠線のみ、下線のみ)パターンコーディングのヘルプに入った際、デザインに吹き出しがあったのでcssで対応したわけですが、その時に作成した枠線のみの吹き出しと下線のみの吹き出しのコーディングメモ。意外に簡単?hoverをしたときに左から右にぬるっと出てくる下線を作る方法グローバルナビにカーソルを合わせたときに、左から右にぬるっと下線が出てくるUIを最近見かけることが多かったので、自分でも作ってみました。作ってみたら意外と簡単にできたので忘れないようにメモ書きです。html2017年5月21日フォームの送信ボタンのvalueはFontAwesomeのアイコンフォントも設置できるフォームの送信ボタンは、valueにテキストを入力して使用するのが一般的です。typeをimageにして、送信ボタンを画像にすることもあります。この部分をFontAwesomeを用いてアイコンフォントを設置することも可能です。詳しく見るcategory:codingtag:html2017年4月2日opacityの親要素に背景色をつけてカッコよく透過させようCSS3から、要素を透過できるopacityが使用できるようになり、画像リンクにもhoverでopacityを付けることにより、画像がリンクだとわかるようにすることが簡単にできるようになりました。この透過を応用すれば、黒い画像をhoverで明るい画像にすることも可能です。css32017年1月8日CSSで作るボタンにグラデーションやリッチ感を出すなどの効果をつけるチュートリアル現在のWEBデザインでは画像を使用せず、なるべくcssでボタンをデザインすることが当たり前になっています。そのときによく目にする、よく作ると思われるパターンのボタンデザインに効果をかけて、デザインを変更していくチュートリアルです。css32016年9月18日display:noneとvisibility:hiddenの違いを確認しようdisplay:noneとvisibility:hiddenはどちらも要素を非表示にするプロパティですが、実際に中で起こっていることは異なっています。似ているようで似ていない2つのcssをサンプルを見ながら確認しましょう。文字を整える場合、heightとline-heightを同時に使用するケースがよくあるかと思います。heightとline-heightの値を同じに指定すると、指定したサイズの垂直方向中央に要素が整います。buttonタグのheightとline-heightの値を同じに指定すると、ベースラインが若干下にずれてしまいます。Awesomeはサイトで汎用的に使用されるようなアイコンをWebフォントとして表示することができます。表示されたアイコンはWebフォントとして扱うので、差し替えはもちろん、色の変更や大きさの拡大・縮小もソース上で行えます。TOPPROFILEみっきぃデザインからコーディングまで何でもやってます。都合のいい何でも屋さんです。ポジション的にはデザイナーだったりフロントエンドだったり、そのときによってコロコロ変わります。(詳しくはこちら)ABOUTこのサイトは、ひとつでも多くサイト制作でラクをするために、実務で取り入れたテクニックや調査したものなどを、すぐに引き出せるようにまとめたサイトです。使えるネタがありましたら、サイト制作に役立てていただければ幸いです。お問い合わせについてはこちらからお願いします。