Find the visual center of your images. Upload your logos and images and find the visual center.
Find the visual center of your images. Upload your logos and images and find the visual center.
Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y
スマホサイトのメニューによくある、左から開くコンテンツ。 Drawer Slide Menu で作りました。 Drawer Slide Menu こちらの「Download」からダウンロードして、 「jquery.mobile-menu.js」をheaderに記述(JQueryとともに)。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="jquery.mobile-menu.js"></script> bodyにボタンと、左側の中身を記述 <!-- トリガーボタン --> <div id="slide_btn"></div> <!-- 開閉メニューの中身 --> <div id="sllide_menu"> <nav> <ul> <li><a hr
世界で最も多く、エンジニアやデザイナーなどプレイヤーの海外進出をサポートする企業、それがFrogです。プレイヤーとして海外で活動してきた私達にしか出来ない、モノ作りをする人間として現実的な海外就職プランを皆様にご提供しています。 「日本でしか活躍出来ない」から「世界でも通用する」へ、様々なステージの皆様へ、過去500名の海外就労事例からご提案しております。 Frogが選ばれる5つの理由 留学から就職、帰国後のキャリアまで何でもご相談ください 「ただの留学がしたいわけじゃない」「今後の自分のキャリアが心配」など、一度Frogまでお問い合わせください。 私達は、海外を視野にいれたトータルキャリアプランをご提案します。 まずは説明会に参加
ブラウザの高さいっぱいに表示した写真画像とベタ塗り背景のコンテンツを交互に配置した縦長ページをスクロールした際、写真画像の背景を固定表示させ、カーテンをあげるようなスクロールエフェクトを実装するスタイルシートのテクニックを紹介します。 スクリプト無しなのでスクロールのもっさり感がなく、非常にさくさく動作します。 Alternate Fixed & Scroll Backgrounds デモ 実装 ファイルのダウンロード デモ デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは9+でご覧ください。 エフェクトにスクリプトを使用していないので、スクロールも快適です! 少しスクロールしたところ 写真画像の背景は固定表示で、コンテンツとベタ塗りだけがスクロールします。 実装 HTML HTMLはシンプルで、main要素をラッパーに、div要素で写真画像と
ヘッダー部分のグローバルナビゲーションを、スマホビューの縦持ちの時だけドロワーメニュー(ハンバーガーメニュー)にしたくて、プラグインや既存ライブラリなどを使わない、ごくシンプルな作り方を調べました。 jQuery の「.toggleClass」を使えば、あとは CSS だけで簡単に作れることがわかったので、メモっておきます。 デモを作りました。(画像クリックで別ウィンドウで開きます) スマホで見るならこちらから→ 本日のINDEX クラスを付与・解除できる jQueryの「.toggleClass」 ドロワーメニューの動作の原理 ドロワーメニューの作り方 ハンバーガー部分のCSS参考サイト クラス名を付与・解除できる jQueryの「.toggleClass」 ヘッダー部分のグローバルナビゲーションは、<nav>要素の中に <ul>を仕込んで作ります。 これを、PCビューの時は表示させて、
プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイのフェードイン・フェードアウトなどを、すべてCSSで作るよりも、jQueryで指定したほうがオールドブラウザでも開けますし、何と言っても簡単です。 モーダルウィンドウのコンテンツもHTMLソースなので、画像も動画も貼れるし、モーダルウィンドウ内からのリンクも可能です。 こちらが jsソースをゲットさせていただいたサイト「jQuery.lab」さんです。 jQueryでモーダルウィンドウを作る方法 | jQuery.lab ソースコードに初心者でもわかる丁寧なコメントを付けてくださっていてとっても親切。 ありがとうございます! jsは、こちら↑から完全コピペさせていただいて、デモページを作りました。 デモのHTMLの構成と、CSSの必須
対応ブラウザはコチラをごらんください→Can I use... Support tables for HTML5, CSS3, etc モダンブラウザはだいたい対応しているようです。IEは9から、Android Browser は4.4から対応。 ビューポートってなんだろう? vw, vh, vmin, vmax のそれぞれの冒頭の「v」は「Viewport」の頭文字。 ビューポートとは、ブラウザの表示領域のことです。 PC用のブラウザならウィンドウサイズ。 タブレットやスマホは、デバイスごとに決められた表示領域があって、機種によって表示領域が違うので「Viewport」という概念が必要になったんでしょうね。 vw や vh の範囲はどんなもんかを調べていたら、有益なコンテンツを見つけました。 [CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位... | コ
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるCodepen。その中でも、2015年のあいだに特に人気の高かったコードを、ランキング形式でまとめた The Most Hearted of 2015 が発表されていたので、今回はその中でも特に印象的だった、クリエイティブな作品をいくつかピックアップしてご紹介します。 やはり話題性の高い、最先端テクニックを駆使した投稿が中心にまとめられています。HTML/CSSやJSなどのコードを確認することができるので、今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 コード共有サイト Codepen で2015年に話題となった投稿ベスト100 ページの読み込みに時間がかかる恐れがあります。しばらくしてからスクロールすることをオススメします。 100位 Calendar Widget HTML/CSSのみで作成された、
グループを作れば、無料で誰でもイベントページが作成できます。情報発信や交流のためのイベントをTECH PLAY で公開してみませんか?
今回のソリューション:【Qiita:Team/キータチーム】 「組織文化をもっと良くしたい」そう思った人は、どのように行動すればいいのだろうか。 株式会社nanapiは、生活の知恵が集まる情報サイトnanapiを運営する企業だ。同社にデザイナーとして2014年に入社した上谷 真之さんは、社内のデザインカルチャーをより良いものにするため、入社直後から孤軍奮闘の毎日を送ったという。 そんな上谷さんは、「本当に組織のカルチャーや方向性を変えたかったら、超泥臭いことをしなくては何も変わらない」と語る。 そしてその「泥臭い」取り組みの際に活用したのは、チームや組織での情報共有を助ける「Qiita:Team(キータチーム)」。デザインに対する共通言語を作るため、入社以来、同ツール上に地道にナレッジを投稿し続けた。 結果として*社内のデザインに対する意識は変わり*、以前は行っていなかったユーザーリサーチ
みなさんはチーム内で情報共有するときどうやって共有していますか? 今日は、 Qiita Teamをご利用いただき円滑に情報共有・開発している 株式会社nanapiさんの事例を皆さんにご紹介します:) 現在Qiita Teamは無料トライアルを実施中なので、この機会にお試しください! 下記フォームにご記入ください。(約30秒) 会社名 任意 お名前 必須 仕事用メールアドレス 必須 解決したい課題 必須 利用規約 ・ プライバシーポリシーに同意する 情報共有についてお悩みの方向けにお役立ち資料もご用意しています。ぜひご覧ください。 フォームの入力欄が表示されない方はこちらのフォームよりお問い合わせください。 サマリーポイントをまとめると投稿のおかげで透明性が増し、各エンジニア達が何をやっているのかわかるようなって、作業効率もアップ投稿に対して敷居が低いのでアウトプットの場として非常に良い目次
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く