webproduct-lab

WEB制作を中心にSEOやマーケティングなど色々と語ります

css

はてなブログのスマホ用ヘッダーをカスタマイズしてすっきり見せる方法について

はてなブログのスマホ用ヘッダーを整理してファーストビューをすっきりと見せるためのカスタマイズをご紹介します!コピペと簡単な差し替えでできるので試してみてください!

Webアイコンフォント「Font Awesome」の使い方と注意点について

fontawesomeというアイコンフォントをご存じですか?簡単にアイコンを表示することができ、レスポンシブデザインのようなサイズが異なる表示にも荒くなることなく綺麗に表示することが可能です。そんな使用方法を簡単にご説明します。

はてなブログのAMP用ページにCSSを設定してみました!

css

はてなブログのAMPページにCSSが設定できるようになりました!調べてみると非常に簡単でしたので手順などをご紹介します。

CSSでテキストの横に線を引く方法について

css

テキストの左右に線を引きたいと思ったことはありませんか?実はこれCSSで簡単に表現することができるんです!この記事ではその方法についてご紹介します。

CSSリストで作れる便利なデザイン色々まとめ

css

コーディングする場合に、リストをうまく使っていますか?デザインによってはdivで組むよりもリストで組んで疑似要素を工夫することで管理が簡単な場合もあります。極力シンプルに管理しましょう。

cssが効かない…原因についてまとめ

css

コーディングをしていてcssが効かない…!とハマったことはありませんか?私もたまにあるので、原因と解決法についてまとめてみました!

linear-gradientとは?cssでテキストにマーカーを引いた表現方法について

css

最近、ブログを読んでいてテキストにマーカーを引いたような表現をよく見かけると思いますが、これはcssのlinear-gradientという値を使うことで簡単に表現することができます。この記事ではそのcssについてご紹介します!

【css】ボックスの高さを揃えるheightLine.jsが便利

css

コーディングをしていて、高さを揃えたい場合が多く見かけます。そんな時に便利なheightLine.jsの使い方と揃わない場合についてまとめてみたいと思います!

レスポンシブデザインに便利なcssまとめ

css

レスポンシブデザイン導入していますか?この記事ではレスポンシブデザインに便利なcssの使い方をご紹介しています。ぜひスマホ対応の参考にしてみてください!

CSSで三角形を作る方法と理屈について

css

はい、今回はCSSで三角形を作る方法と、なぜそうなるのか?理屈についてまとめてみたいと思います。 疑似クラスの、:beforeや:afterに使うと吹き出しなどの三角形を表現するのに画像を使わずにできて、しかもロールオーバーなんかにも対応できちゃいます!コ…

cssでリストを表すulとolの違いと使い分けについて

css

cssで箇条書き(リスト)にする場合…といえば、ulで組むと思いますが、同じくリスト表示となるolというセレクタとの使い分けをどうしていますか? 私は、見た目が同じなら…と思ってulばかり使って、olを覚えようとしていませんでしたが。。最近ちょっと調べ…

word-wrapでも改行できない場合の対応策

css

コーディング作業で、テキストが意図したように折り返してくれない場所では、word-wrap:break-word;を設定します。しかし、table-cellを指定している場合、思うように改行できない時があります。それは、urlを記述している時なんです!(他にも条件はありま…

レスポンシブデザインに便利なcss3の疑似クラスと疑似要素

css

スマホ対応にするためのレスポンシブデザインに便利なcss3からの特におすすめの疑似クラスと疑似要素をご紹介します!

バナーなどの画像ロールオーバー時のアクションを楽にする!

css

リンク画像にjsを使わずにデフォルトでロールオーバーにエフェクトを加えるcssが便利です!

text-indent:-9999px;を改善してみる

css

隠しテキストはseoに不利…というかペナルティになるとも言われていたtext-indent:-9999px;の違う使い方について考えました。

Copyright © webproduct-lab ALL RIGHTS RESERVED.