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