「爆速すぎて笑う」 表示速度が“異常な”Webサイト「dev.to」 その仕組みは
「爆速すぎて笑う」「速すぎて逆に不安になるレベル」――「dev.to」という米国のWebサイトの表示速度が異常に速いと、ネット上で話題だ。なぜ速いのか、サイト創設者のベン・ハルパーンさんがサイト内の記事で説明している。 2016年にオープンしたdev.toは、プログラマーが情報を交換したり、議論したりできるコミュニティーサイト。トップページにはユーザーが投稿したブログ記事のタイトルやコメントが、SNSのタイムラインのように並んでいる。このトップページの表示にかかる時間、各記事をクリックしたときのページ遷移が“一瞬”なのだ。 なぜ速いのか。ハルパーンさんが17年2月に投稿したブログ記事によれば、米Fastlyが提供するCDN（Content Delivery Network）を活用している。CDNは世界中にキャッシュサーバを分散配置し、ユーザーごとに最も（ネットワーク的に）近いサーバにキャッ
あなたなら何を絞り込む？絞り込み検索に挑戦しよう！ | コラム | Web制作 株式会社ワンゴジュウゴ WAN55 （東京・千代田区）
なぜ、WEB業界30年目の会社が「音楽エンタメ業界」特化の転職支援・人材育成を行うのか。 ワンゴジュウゴ×SNS×音楽エンタメ業界 「ワンゴジュウゴが、なぜ音楽エンタメ業界に特化した転職支援・人材育成を行っているのか」という質問をよくいただきます。 きっかけは、元大手音楽エンタメ企業に20年ほど勤めていたスタッフが参画したことで... その他ビジネスマーケティングライフハック人材育成・研修・人材紹介雑学・時事ネタ 2024年06月24日 【初めてのGA4導入】GA4の初期設定と簡単な使い方を丁寧に解説します！ GA4はすでに導入されていますか？本記事ではクライアントからよくご相談いただくGA4の初期設定について解説しており、最後まで読むとGA4の初期設定だけでなく基本的な内容も理解できるようになります。GA4の導入はしたけど、初期設定が完了してい... Webサービスビジネス 2024年0
カードデザインのポイントと実装方法
2018年5月18日 CSS, Webデザイン Pinterestがカードスタイルのデザインを取り入れてから、TwitterやFacebookをはじめ、多くのWebサイトで採用されているカードスタイルのデザイン。今回はそんなカードデザインの特徴やデザインのポイント、実装方法などをまとめてみます！ ↑私が10年以上利用している会計ソフト！ カードデザインとは 名前のとおり、カードのような四角形を並べたスタイルのデザインです。多くの場合、ひとつの項目に対して画像やテキスト、ボタン等、様々な要素が含まれています。ECサイトやコンテンツの多いWebサイトでよく見かけるスタイルですね。 Etsyは手作りの商品を販売できるECサイト。商品の画像を大きく打ち出し、その商品に関する情報が掲載されています。ログインしていれば、詳細サイトにいかなくてもお気に入り登録などが可能。ページ移動をしなくてもなにかしら
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
960.gsでCSSが苦手な人でも簡単段組みデザイン : エクスギア Blog
開発者にとって大変なこととは開発をすることよりも大変だと思うことがあります。それはデザインに関する部分です。 たとえば、私にとって3段組みのモックのHTMLを主要ブラウザできちんと表示されるCSSで奇麗に何の資料も見ずに作成することはとても至難です。 知識はありますが、全てを正しく記憶しているわけではないので時間が掛かります。 デザイナーさんに頼めば済むといえばそれまでですが、ちょっとしたアプリケーションを作ってみたいなど開発できる人がCSSを使えるメリットは大きいと思います。 というわけで、CSSを簡単に利用できるCSSフレームワークは数多くあるのですが、私が個人的に気に入っているCSSフレームワークである960 Grid System(960.gs)について紹介したいと思います。 960.gsとは 最小限のブロックとなる要素の幅を決めて、そのブロックの倍数でデザインしていくグリ
CSS3を使ったアニメーションを70種類以上ダウンロードできるサイト「AniCollection」 | ライフハッカー・ジャパン
ヘッドライトの黄ばみがサッとキレイに! メッキ・ホイール・シートにも使えるマルチ過ぎなお手軽クリーナー「ウルトライト」
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
これが決定版？フォルダを監視してCSS/JavaScript/HTMLを生成·Fire.app MOONGIFT
Fire.appはフォルダを監視してSass/Compass/CoffeeScriptを自動変換するソフトウェアです。 最近はCSS/JavaScript/HTMLをそのまま書くのではなくSassやCoffeeScript、Haml/Markdownを使ってそれぞれのフォーマットに変換するのが当たり前になってきています。そこで使ってみたいのがFire.app、自動ファイル変換ソフトウェアです。 起動します。 メニュー常駐型です。 設定画面です。 Growlを使った通知に対応しています。 Livereloadに対応しています。 履歴です。 フォルダを指定しました。 プロジェクトテンプレートを生成してくれる機能があります。 生成しました。後は修正すると自動的に別フォーマットファイルを生成してくれます。 Fire.appはSass/CompassからCSSを、Haml/ERB/Markdownか
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
デザインが整ったフリーCSSテンプレート集「20 Beautiful Free CSS Web Templates」 | DesignDevelop
TOP > Design > デザインが整ったフリーCSSテンプレート集「20 Beautiful Free CSS Web Templates」 webサイト制作に欠かせないCSSですが、度重なるバージョンアップや活用方法の多様化で、常に新しい技術の習得が必要になります。そこで今回は、デザイン性の高い整ったフリーCSSテンプレートを集めた「20 Beautiful Free CSS Web Templates」を紹介したいと思います。 （Darkness Free Website Template | Free Website Templates | OS Templates） シンプルで洗練されたCSSや機能的なCSSなど、さまざまなCSSが紹介されています。中でも気になったものをいくつかピックアップしてみましたので、下記よりご覧ください。 詳しくは以下 ■Web Templa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp
http://monosy.com/blog/6
html5-memo.com
Loading...
CSS3だけで作るボタンデザインいろいろ
[CSS]金属の質感が美しすぎる、スタイルシートで実装されたボタン
Components · Twitter Bootstrap