CSSの記事一覧

最近外注先として依頼を多く請けており、コーディングのみの制作というのが増えてきてます。PCサイト用のデザインをもらって、それをもとにコーディングする。ただ、スマホ用のデザインはない...

SVGを使おうと思っているけど、親しみやすいpng画像をついつい使ってしまうという人は多いのではないでしょうか。私もSVGはロゴで使っているくらいで、あとはアイコンフォントで簡単に...

TwitterやFacebookなどの公式シェアボタンは、サイトに実装することでそれ単体だけでも表示がかなり遅く、問題の1つになりがちです。来年からのモバイルファーストインデックス...

レスポンシブデザインに対応させるためのフォント設定をご紹介！2017年から始まるモバイルファーストインデックスに対応するには、レスポンシブデザインが必要。そこで、今回はさまざまなデ...

YouTube動画をヘッダーの背景に設定する案件がありまして、その際に使用した方法についてご紹介します。YouTube動画を画面全体に表示させる方法というのはよく見かけるのですが、...

Font Awesome は、CSS3の登場で使用する機会が多くなりました。私の制作でも、ボタンやリストなどのアクセントとして使用する機会は多いです。ただ、毎回サイトにアクセスして...

パンくずリストをWordPressに表示させるにはプラグインを使用するのが一般的ではありますが、できるかぎりWordPressプラグインは使わずに表示させたいもの。そこで今回は、f...

先日当サイトのレイアウトを少し変えてみたら、iOS版のTwiiterブラウザでのみ表示が崩れていることが判明。じゃあ、キャッシュを切ろうと設定画面とか探してみてもキャッシュを切れな...

シンタックスハイライト用の超軽量なプラグインprism.jsは、WordPressブログでソースコードを高速表示してくれます。WordPressでシンタックスハイライト表示用のプラ...

Twitterフォローボタンは公式で配布されておりますが、表示に時間がかかるため、できるかぎり使用したくないものだったりします。そこで今回はTwitterフォローボタンをオリジナル...

Googleフォントから日本語版が無料で9種類公開されました。日本語のウェブフォントって英数字と比べてダントツで文字数が多くデータ量が大きくなってしまうので、どうしても表示に遅延が...

細かいドットの背景や斜線の背景って、結構使いやすいものなので利用頻度は何気に多いです。手軽に用意する方法はないかと探していたところ、PatternfyというWebサービスを見つけま...

flexboxを使いたいけど、たくさんのプロパティがあって実際に使用するにはしっかり勉強しないと実装は難しいものであったりします。でも、実際の現場で使用するプロパティはある程度限ら...

CSSボタンにおもしろい動きを演出することがCSS3で出来るようになったのですね。数年前まではjQueryを使用しないといけなかったのが、CSSだけでもエフェクトをつけられるのはと...

カルーセル表示でおすすめスライダープラグインのSwiper は、jQueryに依存することなく実装できます。さまざまな表示形式がありますが、今回はFacebookのような横スライド...

ブログ記事が長い場合、目次を表示してそのブログ記事に記載されている内容を知らせてあげると訪問者も読みやすくなります。WordPressではプラグインを利用することで自動で見出しを設...

Googleフォントにて見た目の良いフォントを利用できるのは知っておりましたが、デザインに合うものを探すが大変であったり、表示が遅かったりで、使用する機会はありませんでした。しかし...

WordPressの制作では、スマートフォンとPCで表示を切り替える条件分岐を利用する機会が多いです。PC表示ではピッタリな表示形式だけど、スマートフォン表示ではレイアウトを変更し...