次のプロジェクトに使ってみたくなるような実用的なものをはじめ、CSSでこんなこともできるの!という素晴らしいアイデアまで、クリエイティブなスタイルシートのテクニックを紹介します。
![CSSの実用的なテクニックから素晴らしいアイデアまで!スタイルシートの最新テクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bd0a5a9f93f4f39ca73022605c5132a304e89d7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060201-33.gif)
By mera 普段はまじめに仕事をしている各種サイトが4月1日になると全力全開で事前に仕込んでおいたネタをこのときとばかりに爆発させ、一体何がホントウで何がウソでどこまでがネタなのかという線引きが曖昧になっていくおそるべき24時間、毎度おなじみエイプリルフールが今年も始まりました、ぱんぱかぱん! ◆エイプリルフール記事が更新される度に通知されるGIGAZINE公式アカウント というわけで、GIGAZINE編集部はエイプリルフールに便乗していろいろと仕込みまくっている各サイトを4月1日(水)0時~24時まで、文字通り24時間ネットにはりついてリアルタイムで更新し、この記事にまとめ続けます。記事は時間の経過とともにどんどん記事末尾に追加され、信じられないボリュームになっていく仕組みとなっています。「いちいちページを更新していられない!」という場合は、GIGAZINEのTwitter公式アカウ
こんにちは、デザイナーのモモコです。 スマートフォンの普及率は2021年時点で80%*を超えており(総務省「情報通信白書令和3年度版」)、今やスマートフォンに対応したWebサイト制作は必須と言えます。 そこで今回は、スマートフォンサイトをデザインする際に参考になるギャラリーサイトや、スマートフォンサイトをデザインするときの注意点を紹介します。 海外のトレンドや人気のあるサイトをまとめてチェックできるので、ぜひ最後までご覧ください。 デザインの世界に飛び込んでみませんか? 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。 LIGが運営するWebクリエイタースクール「デジタルハリウッドSTUDIO by LIG」では、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴! ぜひ一度詳細をチェ
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ?」とか「この要素だけにスタイルを適応するCSS3は何だっけ…?」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました! CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
皆さんは、デッサンをして色塗りの法則を見つけているかと思います。 今回は、ちょっと違った視点で色塗りの法則を見つけて頂こうと思います。 最近では、ゲームCGが凄くリアルになりつつあります。 なぜ綺麗になってきているかというと、 昔のゲームはゲーム機の処理速度が遅いためフェイク(嘘)をついて それっぽくしていました。 ファイナルファンタジー7より 最近では、ゲーム機の処理速度が速くなったため 現実にある法則に基づき物理的に処理をする 物理ベースレンダリング が採用されるようになったからです。 ※とはいえフェイクもありますが、近づきつつあります。 ファイナルファンタジー15より さて、そんな物理ベースレンダリングが採用された ゲームCGの原理(処理)を勉強することで リアルよりな色の出し方(描き方)の理屈が学べると思いますので記事にしました。 あくまでも、知識として持っておくことで 次の塗りか
TL;DR 2014/12/01:続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 1.キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
自分用にまとめのまとめみたいな感じです。 同じフォントでも、等幅、プロポーショナル、太さの種類が複数ある等々のものは、どれも同種としてカウントしたつもりです。ただ、漢字部分は同じで、ひらがなカタカナ部分だけ違うとか、英数字部分だけ違うとか、微妙な違いのフォントがあるので、似たようなのがカウントされてたりするかもしれない。 それでも、かなり古いものから、定番もの、最近リリースされたもの、最近更新されたものまで、まともに使えないのもあるけど、単純にリストの数かぞえたら、番外編抜いても242種類もありました。多すぎて整理できてないのはあれですが。 自分なりに注釈付けてますけど、間違いがあるかもしれないんで、(特に商用)利用する前には、必ず規約やライセンス、付属のテキストをよく確認して下さい。また、ライセンス上無保証であるものも多いので、いずれも自己責任での利用をお願いします。 2012/02/1
無料でダウンロードできる、漢字が使える手書き(風)の日本語フォント一覧。 ここでの「フリーフォント」とは、「無料でダウンロードできるフォント」という意味です。 必ず各フォントの利用規約をご確認の上、規約を守ってご利用ください。 当サイト掲載時からバージョンアップして、字形が異なる場合があります。 縦長のページで画像が多いため、PC での閲覧推奨です。 JavaScript で画像を読み込んでいます。 リファラが当サイトの URL でない場合(リファラ偽装・隠匿の場合)、画像は表示されません。 ある程度、ページを読み込んでからスクロールすれば、画像がきちんと表示されると思います。 『全ウエイト』はマウスオーバー(オンマウス)で表示されます。 ブラウザのウィンドウサイズ(表示領域)が小さいと、ポップアップの内容が全て表示されません。 → 人気のフォント配布サイト(当サイト調べ)。 メイリオ レ
twitter facebook hatena google pocket いまさらな気もしますが、パララックスなサイトを簡単に実現するためのjQueryプラグインを紹介します。 sponsors #1 Nikebetterworld Parallax Effect Demo | Ian Lunn 老舗な感じのところですね。 jQuery localscrollとか、jQuery scrollToを駆使しています。 URL:http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ demo:http://ianlunn.co.uk/plugins/jquery-parallax/ #2 JoelBesada/scrollpath GitHub 見えないパスにそってスクロールしていって気持ちいい感じです。 こんな記述が必
こんにちは。学生ライターの池澤章太です。 Webで記事を書くときや資料を作るときに、フリー写真素材をよく使うと思います。しかし、イメージに合う写真や素材を見つけるってなかなか大変です。場合によっては商用利用できるか調べるなければいけませんし。 そんなときに、商用利用ができて、無料で使える素材サイトがまとめてあると便利ですよね。 ちなみに動画素材については送別会、結婚式に!映像制作に使える無料動画素材サイトまとめをご覧ください。 今回は、23個ほど素材サイトをまとめました。この記事をブックマークしておけば素材に困ったときに役立つはず! 【こちらもおすすめ】 無料で商用利用OKのサイト特集 商用利用できるフリー写真素材サイトまとめ23選 ここでひとつ注意を。「フリー」という単語は、なにかと誤解を招きやすいですが、著作権がフリーだったり、クレジット表記が不要だったりする意味ではありません。各素材
星の数ほどあるたくさんのjQueryのプラグインから、目的にあったものを探すのはなかなか大変ですよね。そんな時に役立つ便利なサイトをまとめました。 まずは手前ミソで自分がまとめたものから。 これは本当に多大な労力と実際の動作確認もしているので自信をもってオススメできます。 jQueryのプラグイン100選 -2013年総集編 日々チェックしているスクリプトから厳選して一年単位でjQueryのプラグインをカテゴリごとに選出しています。プラグインの半分近くは個別に記事も書いてあります。 jQueryのプラグイン100選 -2012年総集編 jQueryのプラグイン100選 -2011年総集編 jQueryのプラグイン100選 -2010年総集編 jQueryのプラグイン100選 -2009年総集編 jQueryのプラグイン100選 -2008年総集編
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く