はてなブログのスマホ用ヘッダーをカスタマイズしてすっきり見せる方法について
2017年9月8日 ゆうき webproduct-lab
今回は、はてなブログのスマホ用ヘッダーのカスタマイズについてのお話です。 まず、はてなブログのデフォルトのスマホ用テンプレートのまま使 …
Webアイコンフォント「Font Awesome」の使い方と注意点について
2017年4月25日 ゆうき webproduct-lab
Webアイコンフォント使ってますか？
Webフォントの中でも画像を使わずにリストマークなどにアイコンを表示することができる“アイコンフォン …
はてなブログのAMP用ページにCSSを設定してみました！
2017年3月31日 ゆうき webproduct-lab
はてなブログのAMPページに別途CSSを設定することが可能となりました。
staff.hatenablog.com
私もAMPページを導 …
CSSでテキストの横に線を引く方法について
2017年3月31日 ゆうき webproduct-lab
サイトやブログを管理していて、テキストの左右に線を引きたい時ってありませんか？実はこれCSSで表現することができます。
その方法は何通りかあるようですが、今回は個人的にいつも使っ …
CSSリストで作れる便利なデザイン色々まとめ
2017年2月17日 ゆうき webproduct-lab
CSSのリスト（ul,li）は、基本的にWebデザインで箇条書きといった表現をする場合に使用します。しかし、そのデザイン・装飾はCSSはもちろん、疑似要素・疑似クラスを利用すること …
cssが効かない…原因についてまとめ
2017年2月1日 ゆうき webproduct-lab
コーディング作業をしていてcssが効かない…という経験は私を含めコーダーの方なら必ずあると思います。 その原因はうっかりミスから複雑なものまで様々です。
そして、通常ならす …
linear-gradientとは？cssでテキストにマーカーを引いた表現方法について
2016年11月18日 ゆうき webproduct-lab
さて、今回はブログでよく見かける下記のようなマーカーを引いた感じの設定方法についてです。 サンプルテキストです
<span s …
【css】ボックスの高さを揃えるheightLine.jsが便利
2016年10月25日 ゆうき webproduct-lab
私はデザインの仕事に携わって早15年になりますが、コーディングも10年以上経験しています。 そんな私がよく遭遇する、htmlやcssを …
レスポンシブデザインに便利なcssまとめ
2016年9月27日 ゆうき webproduct-lab
今回はレスポンシブデザインに便利なcssについてのお話です。 レスポンシブデザインに対応するためにはまず、ビューポートをヘッダーに記述して、メディアクエリのブレイクポイントに …
CSSで三角形を作る方法と理屈について
2015年11月5日 ゆうき webproduct-lab
はい、今回はCSSで三角形を作る方法と、なぜそうなるのか？理屈についてまとめてみたいと思います。 疑似クラスの、:beforeや:afterに使うと吹き出しなどの三角形を表現 …
