
Read more
2日間でレスポンシブデザインサイトをコーディングするために気をつけている8つのポイント
最近外注先として依頼を多く請けており、コーディングのみの制作というのが増えてきてます。PCサイト用のデザインをもらって、それをもとにコーディングする。ただ、スマホ用のデザインはない...
CSS
Web制作に関する情報やWordPressカスタマイズなど
Web制作者に役立つ情報を更新してます。
Read more
最近外注先として依頼を多く請けており、コーディングのみの制作というのが増えてきてます。PCサイト用のデザインをもらって、それをもとにコーディングする。ただ、スマホ用のデザインはない...
Read more
SVGを使おうと思っているけど、親しみやすいpng画像をついつい使ってしまうという人は多いのではないでしょうか。私もSVGはロゴで使っているくらいで、あとはアイコンフォントで簡単に...
Read more
TwitterやFacebookなどの公式シェアボタンは、サイトに実装することでそれ単体だけでも表示がかなり遅く、問題の1つになりがちです。来年からのモバイルファーストインデックス...
Read more
レスポンシブデザインに対応させるためのフォント設定をご紹介!2017年から始まるモバイルファーストインデックスに対応するには、レスポンシブデザインが必要。そこで、今回はさまざまなデ...
Read more
YouTube動画をヘッダーの背景に設定する案件がありまして、その際に使用した方法についてご紹介します。YouTube動画を画面全体に表示させる方法というのはよく見かけるのですが、...
Read more
Font Awesome は、CSS3の登場で使用する機会が多くなりました。私の制作でも、ボタンやリストなどのアクセントとして使用する機会は多いです。ただ、毎回サイトにアクセスして...
Read more
パンくずリストをWordPressに表示させるにはプラグインを使用するのが一般的ではありますが、できるかぎりWordPressプラグインは使わずに表示させたいもの。そこで今回は、f...
Read more
先日当サイトのレイアウトを少し変えてみたら、iOS版のTwiiterブラウザでのみ表示が崩れていることが判明。じゃあ、キャッシュを切ろうと設定画面とか探してみてもキャッシュを切れな...
Read more
シンタックスハイライト用の超軽量なプラグインprism.jsは、WordPressブログでソースコードを高速表示してくれます。WordPressでシンタックスハイライト表示用のプラ...
Read more
Twitterフォローボタンは公式で配布されておりますが、表示に時間がかかるため、できるかぎり使用したくないものだったりします。そこで今回はTwitterフォローボタンをオリジナル...
Read more
Googleフォントから日本語版が無料で9種類公開されました。日本語のウェブフォントって英数字と比べてダントツで文字数が多くデータ量が大きくなってしまうので、どうしても表示に遅延が...
Read more
細かいドットの背景や斜線の背景って、結構使いやすいものなので利用頻度は何気に多いです。手軽に用意する方法はないかと探していたところ、PatternfyというWebサービスを見つけま...
Read more
flexboxを使いたいけど、たくさんのプロパティがあって実際に使用するにはしっかり勉強しないと実装は難しいものであったりします。でも、実際の現場で使用するプロパティはある程度限ら...
Read more
CSSボタンにおもしろい動きを演出することがCSS3で出来るようになったのですね。数年前まではjQueryを使用しないといけなかったのが、CSSだけでもエフェクトをつけられるのはと...
Read more
カルーセル表示でおすすめスライダープラグインのSwiper は、jQueryに依存することなく実装できます。さまざまな表示形式がありますが、今回はFacebookのような横スライド...
Read more
ブログ記事が長い場合、目次を表示してそのブログ記事に記載されている内容を知らせてあげると訪問者も読みやすくなります。WordPressではプラグインを利用することで自動で見出しを設...
Read more
Googleフォントにて見た目の良いフォントを利用できるのは知っておりましたが、デザインに合うものを探すが大変であったり、表示が遅かったりで、使用する機会はありませんでした。しかし...
Read more
WordPressの制作では、スマートフォンとPCで表示を切り替える条件分岐を利用する機会が多いです。PC表示ではピッタリな表示形式だけど、スマートフォン表示ではレイアウトを変更し...