今年もCSSの進化がすごいです! 次のプロジェクトに使ってみたくなるようなワクワクする素晴らしいアイデア満載のスタイルシートのテクニックを紹介します。 CSSアニメーションはより洗練され、単に要素を動かして楽しむだけでなく、意味のある動きとしてより効果的に利用されるものが目立ちました。 まずは、アニメーションの表現もここまでできるのかと驚いた「Marvel Logo animation」から。 ※一部は、実際に動作するデモのコードを埋め込んでいます(全部をコードにしたらページが重すぎました)。
![CSSの素晴らしいアイデアが満載!2015年スタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/97a91c64f542c2a87a676dd297ae719b217a54b8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015120905-03.gif)
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近、いろんな先輩方から「お前服だっせえな」と言わるので、ファッションの傾向を泣く泣く変えました。嵐の相葉君をお手本にこれまで頑張って参りましたが、相葉君には近づけませんでした。無念。 さて、今回はさまざまなシーンで活用できる、汎用性の高いjQueryプラグインを7つほどご紹介させていただきます。簡単&シンプルで優れた機能のものばかりなので、ぜひご覧ください。ダウンロードできる本家サイトのほかに、日本語で分かり易く解説してくださっているサイト様のURLも合わせて載せておきます。 1.世界一使いやすいスライダー”bxslider.js” カスタマイズ豊富で、設置の仕方も超簡単!弊社CTOづやさんのオススメでもあります。 フリック、スワイプも対応しています。最強すぎます。 ダウンロード:bxslider様
これまで画像ファイルを一括で圧縮する際にはPhotoshopのアクションを使用していたのですが、業務で画像ファイルを100枚ほどリサイズしなければならない状況に。 そんなことのためにPhotoshop起動するのもあれだなと思い調べたところ、Macで画像をリサイズするならこれが最強!無料で機能豊富なTh-MakerXがありがたすぎる! | iPhone持って珍スポいてくると言う記事を発見。 サンキュー斉藤! Th-MakerX こちらが起動画面。と言っても難しい操作は一切ございません。 圧縮するサイズを指定して、フォルダをウィンドウ内にドラッグアンドドロップするだけ。 試しにこんなフォルダを… ご覧の設定でリサイズしてみました。 なにこれチョー簡単!あっさりとリサイズ完了。 有り難いな、と思ったのは横長の写真は横幅を設定した長さに、縦長の写真は縦幅を設定した数値に変換してくれるところ。他にも
以前「ちょっと待て!素人がWordPressのキャッシュ系プラグインをわけわからずに使うと悲惨な目に遭うぞ!」という記事を書いたのですが、それを星野邦敏さんに拾って頂いて、WordPress界の名だたる方々がツイッターで話されていたのを拝見し、非常に濃く有意義な内容なのに基本はメンションなのでほとんど一般タイムラインに流れない会話内容です。 こんな会話がTwitterで終わるなんて勿体ない! 皆さんが頭を悩ませるWordPressのキャッシュ系プラグインに関して正しい見識を知ることが出来ます。 こういったバックエンドに詳しいプロフェッショナルな方々の声が もっと聞けるといいんですが。 ※今回の記事は会話の主の@miya0001さんにご承諾いただき掲載しております。 事の発端は僕の「Wp Super Cache」を使用したらWordPressが ぶっ壊れた人がいるという記事より。 (以下、T
前のエントリーで書くとお約束した WordPressのプラグインや設定に関するエントリーです。 月間20万稼ぐ!僕がブログを書くのに使う“神”ツールをドンッと紹介 今や、MTを抑え不動の人気を得ているWordPressその力はGoogleのマットカッツ氏もお勧めしている事も皆さんご存知だと思います。僕自身、ビジネスワークでも自身のブログでもいろいろ試行錯誤しながらより、SEOに強く効果のあるWordPressを目指して試行錯誤して来ました。その上で、今のベストセッティングだと思えるWordPressテーマ「Stinger」を公開させて頂いているのですが、ここで一度この「Stinger」にしている設定と、その上で僕が使用しているおすすめの「プラグイン」をご紹介したいと思います。 photo credit: opacity via photopin cc 現在、絶賛パーマリンク変更中なので変動
あら簡単!写真やウェブページの画像にパースをつけてかっこよく魅せるPhotoshopのアクション -Perspective Actions
Analyticsを利用したサイト改善案シリーズ第2回です。 まず、ランディングページ自体、ブログにあまり必要ないと考えられていますが、実はそうではありません。 ブログも記事を書けば書くほど多くのランディングページが生まれているのですが、それらを単に無視しているだけであり、気付くことが出来れば、それなりに対処することが出来るのです。 ランディングページとは? Web制作やマーケティングに関わっていない、一般的なブロガーさんであれば、なんですかそれは?という言葉かもしれません。 簡単にいうと、制作したサービスや商品につなげるために、入り口的ページです。 多くの場合、広告をクリックした時の、最初のページに用いられます。 なぜなら、せっかく広告をクリックしてくれたにもかかわらず、興味を持ってもらえなければ、直ぐに離脱されてしまいます。そこで、ユーザーの興味を強く引くための、協力な入り口専用ページ
Simple and Effective jQuery Dropdown Login Formは、軽量でお手軽にログインフォームを設置出来るプラグインです。 ちょっとしたサイトのアクセント、Twitterみたいなログインフォームを設置したーいという人が何人かいたので共有。 クリックから展開 イメージ的には以下の様な。 中々美しいでしょ? 設置方法 はじめにjQueryをGoogle先生から呼び出し、CSS、login.jsを読み込みます。 <link rel="stylesheet" href="css/style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script> <script src="js/login.js"></scrip
たった一つのdiv要素を使うだけで、お気に入りのカラースウォッチのコレクションページを作成できるjQueryのプラグインを紹介します。 ホバーでコード表示 Swatchesの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル スタイルシートはhead内に、スクリプトを</body>の上に配置します。 <head> <link href="css/swatches.css" rel="stylesheet"> </head> <body> ... ... <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.swatches.js"></
私自身まだなんとなくで、きちんと定義できないのですが、なんでもかんでもWordPressで組むのではなく、プロジェクトによってWordPressで組むのが本当に最良なのかを見極めることが必要な気がしてきています。 WordPressは便利です。私も、案件として数多くご依頼いただいていますし、慣れ親しんでいます。ネット上にもWordPressの改造方法やプラグインが多く掲載されており、納品後、自分で拡張できるかもしれない、と考えてくださっているお客様もいらっしゃいます。 しかし、時間と予算との制約のなかで細かな設定を行えば行うほど、プラグインとの親和性は低くなり、最悪、動かなくなってしまうプラグインもあります。 「このプラグイン(記事)でできているから、できるってことですよね?」と聞かれることもあります。そのプラグインどおりならできるけれど、プラグイン以上(要は2、3tipsを複合するような
永らくHTMLエディターを移ることなく過ごしてきたのですが、先日Adobe Bracketsの記事を見て一目ぼれし、インストールしてみました。ごめんな、Sublime Text…! どうもハマれなかったSublime Text 私は普段HTMLを書くときに結構適当なエディターを使ってきたんですが、いい加減ちゃんと効率のいい、Zen-Codingにも対応してて、HTML5の予測変換も出来てSassに対応したエディターを使わなきゃなーと思ってました。 そして現れたのがSublime Text。 ”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド! | 株式会社LIG 確かに、知人友人のweb制作者達がこいつの魅力にバッタバッタとやられてました。私も望んでいる要件を満たしているこいつが気になってはいました。 恋する速度を爆速化。Sublime TextでZen-Codingを使用
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる!」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス&タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが!フォトショでもFW並か、それ以上に楽ができると思います。 そ
最近のウェブデザインのトレンドといえば、フラット、サークル、ブラー、ブラックなどがありますが、一番大切なのはコンテンツありきのコンテンツファーストではないでしょうか。 ここではコンテンツを魅力的に見せているウェブデザインをCSS Awardsから紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く