jQuery/Script/CSS/HTMLについて


05
多言語化する前に知っておきたいの7つのルール Webサイトのターゲットが国内だけでなく海外にもいる場合、サイトの多言語化をすることはとても大事です。ただし、最初に何の設定もせずに多言語化をしてしまうと、ページがスパム扱いされたりうまくクロールされなかったり、といったトラ ... 続きを読む⇒
06
「Googleウェブサイト翻訳ツール」を使ってWebサイトを簡単に多言語化 Webサイトを多言語化する際、Googleでは、自動翻訳ページがスパム扱いされる可能性を指摘しています。このことからも分かるように、できる限りは人の手によって管理された翻訳ページを用意することが ... 続きを読む⇒
01
ギャラリーサイトやポートフォリオ、ブログまで幅広く使えるグリッドレイアウトを簡単に、しかも超軽量なスクリプトで実装できる「minigrid」をご紹介します。画面サイズが変わると自動的に並び直して、きれいに整列します。 続きを読む 続きを読む⇒
01
アプリを制作する上で参考にしたい、「マテリアルデザイン」。、実際にこれに基づいてアプリを制作する際にとても参考になるテンプレート集&無料素材集があります。マテリアルデザインのインスピレーションを得るには最適なサイトです。この中でも特に面白い素材をいくつかご紹介します。 続きを読む 続きを読む⇒
02
昨年からGoogleが提唱している「マテリアルデザイン」。一見するとフラットデザインと同じように見えて、何をもってマテリアルデザインなのか、わかりにくく思えます。 物理の理論に忠実に従いながら、ユーザーの操作に合わせてフレキシブルに形を変えることができるのが、マテリアルデザインです。 そこで今回は、マテリアルデザインの基本的な特徴や考え方についてご紹介します。 続きを読む 続きを読む⇒
01
コンテンツの区切りに水滴を落としたような、波打つエフェクトを見せてくれる「Raindrops.js」をご紹介します。ぽちゃん、と音がしそうな幻想的な効果が素敵です。波形のアニメーションは6種用意されています。オプションの数字を変えるだけで様々な水滴の感じを表すことができるので、興味がありましたら、ぜひ試してみてください。 続きを読む 続きを読む⇒
04
スライダーでパラメーター調節するだけで自分だけのオリジナルフォントを簡単に作れて、しかも無料でダウンロードできるオンラインサービス「metaflop」が便利です。「もう少し、ここがこうだったらいいのに」という細かな好みの違いで使えないとき、ぜひ試してみてください。 続きを読む 続きを読む⇒
07
CodePenには毎日、クールなアニメーションやエフェクトを実現する面白いコードがたくさん公開されています。新しいアイデアを試す実験的なコードもあり、目が離せません。今回はその中でも、CSSだけで実現するエフェクトをいくつかご紹介します。 コピーして使うのもいいですが、コードを参考に、新しいエフェクトづくりに挑戦してみてもいいですね。 続きを読む 続きを読む⇒
01
左右にスライドするコンテンツを、更にクリックでズームして詳細にみせてくれる「Zoom Slider」。コーポレートサイト、ブランドサイト、ポートフォリオなど、多様な用途で使えそうです。ieは10から対応しています。その他のブラウザには全て対応。画像をスタイリッシュに見せたいときに、使ってみてはいかがでしょうか。 続きを読む 続きを読む⇒
06
デバイスごとにcssを変えなければいけないナビゲーションメニューですが、Bootstrapを使えば簡単にコーディングができます。しかも、ドロップダウンメニューなどの面倒な小技も一瞬で作れてしまう手軽さ。 今回は、Bootstrapで作るいろいろなナビゲーションメニューの例をご紹介します。 続きを読む 続きを読む⇒
01
さまざまな店舗・サービスが情報発信に利用しているLINE@。プライベートなLINEとは違い、フォロワーに向けて効果的な情報発信をできるしくみがあります。今回はこのLINE@の特徴や使い方について、何回かにわけてご紹介します。 続きを読む 続きを読む⇒
01
Flexboxの便利さは分かったけど、実際にどんな場面で、どのプロパティを使えばいいのか分からない・・・という方にオススメの体験デモをご紹介します。Flexboxでメニューを作るときの参考にしてみてはいかがでしょうか。 続きを読む 続きを読む⇒
Googleが提供するツールを用いてマークアップする方法をご紹介します。 ツールを用いてサイトを更新すると、Googleがサイト上のデータを認識できるようになり、そのデータが検索結果のリッチスニペットに表示されます。ただ、細かな指定には向いていないので、基本的なデータ部分はツールを使い、足りない部分は直接マークアップで補うという使い分けをするのもおすすめです。 続きを読む 続きを読む⇒
01
構造化データをマークアップする際、記述の文法やプロパティ名が間違っていると、正しく認識されず、効果を発揮することができません。 コードが長くなると、ミスも見落としがちに。スペルミスやカッコの閉じもれ一つで、せっかくのコードも意味がなくなってしまいます。 記述後は必ずテストツールでチェックすることをおすすめします。 そこで今回は、マークアップの確認に役立つテストツールをご紹介します。 続きを読む 続きを読む⇒
アイキャッチ用SEO
今回は、構造化データをHTMLに追加するため、schema.orgボキャブラリをmicrodataフォーマットに従って記述する方法をご紹介します。 ここ数年の間にもschema.orgの取り組みはどんどん発展しており、今後もこまめにチェックしていく必要がありそうです。 続きを読む 続きを読む⇒
01
今回はFlexboxの使い方について、詳しくみていきたいと思います。 まず、flexboxを利用する上で、最初に覚えておきたい用語がいくつかあります。 ここでご紹介した以外にも細かい指定もできます。これからのレスポンシブWebに必須のFlexbox。ぜひ、今のうちに使い方をチェックしてみてください。 続きを読む 続きを読む⇒
02
これまで頭を悩ませて来たfloat問題やclearfixでの回り込み解除の問題を一気に解決してしまうFlexbox。古いブラウザではサポートされていないので注意が必要ですが、これから先、レスポンシブレイアウトを作る上で主要なモジュールになるはずです。 今から準備しておくといいですね。 続きを読む 続きを読む⇒
01
メニューとしても機能する、おしゃれなスクロールバー「Scrollmenu.js」。縦や横に配置したスクロールバーをクリックすると、ページ内のコンテンツにアクセスします。 シンプルでいながら機能的で、縦長ページのデザインに最適。タッチデバイスにも対応しています。 続きを読む 続きを読む⇒
01
「Pizza Amore」は、数値を指定するだけで、チャートを作成できるjQueryプラグイン。煩雑な数字を視覚的に表すことでユーザーに分かりやすく説明することができます。 特にこのPizza Amoreはとても使いやすく、機能も十分に揃っています。 続きを読む 続きを読む⇒
04
Bootstrapで手軽にかっこいいサイトを作りたいときにオススメの無料テーマ8選 デザイン性が高いサイトを手軽に作りたいときには、Bootstrapのテーマを活用するのがおすすめ。レスポンシブ対応されているので、スマホ用、タブレット用とレイアウトに頭を悩ませる必要もあ ... 続きを読む⇒
01
写真をクリックするとかっこいいポリゴンスタイルのSVGアニメーションを伴って拡大し、コンテンツが開く「Card Expansion Effect with SVG clipPath」。ページ遷移ではなく、元ページの上にコンテンツが広がるようなイメージで、美しい動きをスムーズに楽しむことができます。 続きを読む 続きを読む⇒
02
今回は、動画だけでなく、PDFやオフィス系文書、ツイート、CodePenのコードまで、さまざまなメディアをページに埋め込んでくれるjQueryプラグインをご紹介します。 これまでは面倒だったり諦めていたようなフォーマットまで埋め込むことができるEmbed.js。 お使いのプラグインでは埋め込みが難しい、というときに試してみてはいかがでしょうか。 続きを読む 続きを読む⇒
01
Bootstrapと組み合わせると、簡単にエラーメッセージやプログレスバーなどの便利機能が使えるようになるプラグインをご紹介します。 一つの機能ごとにプラグインを実装しなくても、これ一つでよく使う機能がまとまっているので、とても便利です。 興味があればぜひ、Bootstrap導入サイトで試してみてください。 続きを読む 続きを読む⇒
02
画像の一部を反射させるプリズム効果が美しいスライダー「Prism Effect Slider with Canvas」。HTML5のカンバスとJavaScriptを使って実装されており、IE9にも対応する優れものです。 続きを読む 続きを読む⇒
02
会員登録やログインフォームをモーダルウィンドウで表示させるサイトが増えてきました。ページ遷移なしに入力ができるので、モバイル端末でも動作がスムーズです。 そこで今回は、モーダルウィンドウでフォームを表示させ、さらにボタンクリックなどのイベントを取得できるjQueryプラグイン「Remodal」をご紹介します。 続きを読む 続きを読む⇒
09
ページの隅にあるボタンをタップorクリックすると、ナビゲーションがスライドしながら出てくるoff-canvasメニュー。Facebookでもおなじみのメニューですね。レスポンシブ対応で、画面の小さなスマホでもコンテンツを邪魔せず、必要な時にシュッと表示させることができるのでとても便利です。 今回はこのoff-canvasメニューに様々なエフェクトを付けることができるプラグインをご紹介します。 続きを読む 続きを読む⇒
01
前回、子テーマを作成するメリットと、子テーマの作り方についてご紹介しました。今回は、子テーマを利用して、テーマを簡単にレスポンシブ対応させる方法をご紹介します。 続きを読む 続きを読む⇒
02
WordPressでは、優れたテーマが多くの制作者によって配布されています。 ところが、バージョンアップしてしまうと、それまでカスタマイズも消えてしまうのが難点。 そんなときに便利なのが、子テーマです。 WordPressでは、親テーマと子テーマに同じ名前のファイルが存在すれば、最初に親テーマを読み込み、次に子テーマを読み込んで上書きします。 どういうことなのか、実際にやってみましょう。 続きを読む 続きを読む⇒
01
昨年の11月にリリースされた「Firefox Developper Edition」。開発者のために作られた唯一のブラウザで、作成、テスト、サイズの変更など、Web開発を強力かつスピーディーに進める便利な機能が多数搭載されています。もちろん、全て無料で利用できます。 今回は、このブラウザが持つ9つの便利機能をご紹介します。 続きを読む 続きを読む⇒
05
レスポンシブなWebサイトを制作するときに迷ってしまう、レイアウトの問題。そんなアレコレを一挙に解決してくれるプラグインをまとめました。 一つひとつ手作業でコードを書いていくのが一番確かですが、様々なサイズのデバイスが流通し、全てに対し人の手と目で対応するのは手間と工数がかかります。効率的にコーディングを進めるためにも、プラグインに頼れる部分は頼ってみてはいかがでしょうか。 続きを読む 続きを読む⇒