女子高生社長の椎木里佳さんがパクリ謝罪。リリースしたiOSアプリ「ミルピク」のcssが、はてな社のcssをパクっていたらしい
今話題の女子高生社長の椎木里佳さんが女の子向け究極の暇つぶしのiOSアプリ「ミルピク（milkpic）』をリリースされたらしいのですが、これにパクり疑惑。 というわけで、本当にパクリなのかどうか、ちょっと検証してみました。 「ミルピク（milkpic）』のcssが、はてな社のアプリ「Presso」のcssをパクっている？ 疑惑の発端となったツイート twitterで、oqunoさんという方が、こんな発見をされていました。 女子高生社長を売りにしてる株式会社AMFが満を持してリリースしたアプリのサイト https://t.co/70B9KGnMwl がはてなのPressoのサイト https://t.co/w8bnIxpJUb からCSSとかパクってると俺の中で話題に — oquno (@oquno) 2016, 2月 9 cssとは？ cssとはスタイルシートのことで、webページのデザイ
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
[CSS]テキストの天地に美しいグラデーションのボーダーと背景を適用するスタイルシート
p要素などで実装したテキストの天地に、美しいグラデーションのボーダーと背景を適用するスタイルシートのデモを紹介します。 カルピスもちはおやつにもらったのがおいしかっただけで、スタイルシートには何の関係もありません。 上記は当方でテキストやサイズを変更したもので、デモは下記にあります。 Gradient Borders 実装はシンプルなので、他にも応用がききそうですね。 HTML p要素をdivで内包します。 <div class='backbox'> <p>This is the future.<br>Live it & love it.</p> </div> CSS まずは、Webフォントと背景カラーの設定です。 @import url(http://fonts.googleapis.com/css?family=Josefin+Slab); html { background-colo
擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話
私のように趣味でWebサイト作成をしていると基礎が抜け落ちていたりするので復習を兼ねて擬似要素と擬似クラスの違いについて考えてみました。 擬似クラス（Pseudo-classes） 擬似クラスには次のようなものがあります。何気なく使っていますが、擬似クラスという名称を知らない方も多いのではないでしょうか。 :link :visited :hover :active で、擬似クラスはCSS3で大幅に追加されました。 E:nth-child(n) ･･･ n番目の子要素に適用 E:nth-of-type(n) ･･･ n番目にあるE要素に適用 E:first-of-type ･･･ 兄弟関係にあるE要素で最初のものに適用 この他にもまだまだあります。これらの詳しい内容については「保存版！CSS3セレクタの説明書｜Webpark」をご参考に。 なぜ擬似クラスという名称なのか 例えば、以下のような
サイトのデザイン変更が反映されない時のスーパリロードとキャッシュさせない方法
先週の金曜にGunosyを見ていると「サイトのデザイン変更が反映されない時の対策 | monopocket.jp」という記事が表示されていました。2012年7月19日の記事ということで10ヶ月も前の記事なのに表示されるんだと思いながらも、よさげなブログを知ることができたので、これもGunosyの魅力なのかなと思ったりしました。 で、記事の内容ですが、HTMLやCSSを変更してもブラウザで見たときに変更が反映されていない、というときの対応法について紹介されています。 HTMLやCSSを変更しても、ブラウザが以前にキャッシュした変更前のファイルを読み込む場合があります。その場合、当然変更した内容は反映されませんので、保存されていたキャッシュを削除ようというものです。 ただ、キャッシュ自体はブラウジング高速化のために役立ってくれていますし、すべてのキャッシュを削除してしまうのももったいないと思い
今どんなボタンが好きかCSSプロパティごとに検討してみた
下のボタンCSS3を駆使して色々しているのは分かりますが、最近フラットなデザインが流行っていることもあり、何となくあか抜けない気がします。 なぜでしょうか。 ということで、どのようなボタンが好きかプロパティごとで考えてみます。 ボタンの色（background-color） まずはどのような色がよいか考えてみます。背景色によってどの色がよいかは違ってくると思いますが、今回は白い背景色で考えます。 最初に青いボタンです。 色がきつすぎてあまり好きではないです。同じ青系でも薄くてさわやかな色の方が好きです。 緑系も同じです。 濃い緑より薄い緑の方が好きです。 オレンジも同じです。 ということで薄めで明るい感じの色が好きです。 テキストの色（color） 続いてテキストの色について考えます。まずは白。 これが一番いい気しますが、一応いくつかやってみます。では黒。 なんかきつすぎる。次は背景と対極
[CSS]パネルをくるっと気持ちよく回転させるスタイルシート6種 -Fun with CSS
デモはCSS3アニメーションを使用しているので、最新のモダンブラウザでご覧ください。 各パネルをマウスでホバーすると、くるっとします。 Fun with CSS 回転のアニメーションは、左上から順に。 垂直：下方向 垂直：上方向 水平：右方向 水平：左方向 垂直：下方向：半回転 斜め パネルはべた塗りだけでなく、写真画像でももちろん動作します。 Fun with CSS：ネコの画像でもくるっと回転 HTMLはシンプルで、各パネルはdiv要素です。 <div class="front"> <h2>Front</h2> This is on front. </div> スタイルシートはちょっと長いので、下記ページをご覧ください。 Fun with CSSのコード
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
[CSS]スタイルシートで実装する気持ちいいリズムで弾むローディングのアニメーション
昨日、Facebookで紹介した「クラゲ」もCSSアニメーションとは思えない美しさでした。 こちらもなかなか楽しい、軽快なリズムで弾むローディングのアニメーションを実装するスタイルシートを紹介します。 デモページ 実装はHTML+CSSです。 もちろん、JavaScriptもFlashも使用されていません。 HTML spanを増やすと玉が増えます。増やした分のディレイをCSSで設定します。 <div class="loader"> <span></span> <span></span> <span></span> </div> CSS Webkit用とFirefox用の2種類が記述されているので長くみえますが、スタイルシートは非常にシンプルです。 .loader { text-align: center; } .loader span { display: inline-block; v
Add Icon Fonts to Text Links
2013年3月25日 CSS CSS3を使ったアイコンフォントで、テキストリンクをもう少し華やかに！画像を使うと案外手間がかかるテキスト横のアイコンを、Webフォントを使って簡単に表示させましょう。今回はリンク先や拡張子で異なるアイコンを表示する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ アイコンフォントとは？ アルファベット1文字に1つのアイコンが設定されているフォントの総称です。サーバー上にあるフォントファイルを読み込んでフォントを表示する「Webフォント」の応用として使われ始めました。今までのような画像を使ったアイコンとは違い、フォントはベクターファイルなので、サイズを大きくしてもギザギザに見えることはありません。つまりiPhoneやiPadといった高解像度のディスプレイでも、劣化することなくきれいに表示されます。 ただし！何らかの原因でフォントファイルがダウンロー
CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー
最近丸いデザインが流行っているらしいので、丸いボタンが並んだメニューを作ってみました。CSS3のtransitionでスムーズに拡大します。円の中心を基準に拡大するところが今回のポイントです。 そもそもこいうのはメニューと呼ばないのかな。検索エンジンのことを考えると色々キーワードを入れたいけど、入れすぎると何をいっているのか分からなくなる。ほんとタイトルって難しい。。 ということで、今回もサンプルを用意していますのでこちら見ていただければと思います。 ではHTMLから解説していきます。 HTML まずはHTMLから。リンク先のURLは省略しています。 <div id="box"> <div class="boxin"> <a href="#" id="circle1">CSS</a> </div> <div class="boxin"> <a href="#" id="circle2">C
Change Text Link Hover Effect Using CSS3
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート
このレトロ風の凝ったデザインのリボン、HTMLはh1要素だけで実装されています。 余分なspan, div要素もなく、もちろん画像は一切使用されていません。 Single Element Pure CSS3 Double Fold Ribbon CSSはそれなりのボリュームになりますが、スタイルシートだけでデザインする見出しのバリエーションとしてストックしておきたいですね。 HTML HTMLは非常にシンプルです。 「contenteditable」はコンテンツの編集許可で、見出しのテキストを編集できます。 <h1>Single Element - Pure CSS3 - Type here...</h1> 外部スクリプト スタイルシートのベンダープレフィックスを自動で付与するために、外部スクリプトを使用します。 CSS スタイルシートにベンダープレフィックスを記述すれば上記のスクリプトは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBSITE.WS - Your Internet Address For Life™
マークアップのいまいちな箇所を指摘してくれるブックマークレット -DiagnostiCSS
【CSS初心者向け】ブログで良く見かけるシンプルな見出しの作り方 - ディレイマニア
CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ
Windows8風デザインのソーシャルアイコン９６個セット「Simple Icons」:phpspot開発日誌
NameBright - Coming Soon