「CSS」に関連する技術ブログ
企業やコミュニティが発信する「CSS」に関連する技術ブログの一覧です。
全390件中 361 - 375件目
AMPを導入する時の検討事項
2017/09/28
ブックマーク
LIFULL FinTechの島田です。 LIFULL FinTechで運用する LIFULL保険相談サイト の一部ページにAMP（アンプ）を導入しました。 その際に検討した内容とリリース後しばらく運用してみて得られたAMPに関する知見を共有いたします。 AMP（Accelerated Mobile Pages） AMPはGoogle社とtwitter社が共同で推進しているプロジェクトです。 もともとはネットワーク環境や端末のハードウェアリソースが
コーポレートサイトをリニューアルしました
2017/07/28
ブックマーク
こんにちは、フロントエンドエンジニアの権守です。 既にお気づきの方も多いと思われますが、こちらのテックブログは今月から装いを新たにしています。これは 先日行った弊社コーポレートサイトのリニューアル に合わせたものです。 この記事では、今回行ったコーポレートサイトリニューアルについて実装面から紹介します。 特徴 今回のリニューアルの特徴は以
IcoMoonを使ってSVGからアイコンフォントを作る方法
2017/06/21
ブックマーク
こんにちは！制作部 デザイナーの森本です。 最近は、スマートフォンなどの端末の解像度が上がってきているため、アイコンであっても大きな画像が必要になりますが、多用するとページの描画速度の低下にも繋がってしまいます。 そこで、画像を多用せずとも高解像に対応できる「アイコンフォント」を簡単に作る方法をご紹介いたします。 今回は最近使ってみて一
Fashion Tech meetup vol.4を開催しました
2017/06/09
ブックマーク
2017年6月7日、第4回目となるFashion Tech meetupを開催しました。今回はVASILYが主催となり、バックエンドチーム、フロントエンドチーム、データチームが業務で行っている開発・運用のノウハウを発表しました。 本記事で弊社の登壇資料を公開しますので、ご参加できなかった方、Fashion Tech meetupを初めて知った方、是非ご一読ください。 メインセッション VASILY流CSSコーディ
AMP対応のススメ
2017/05/30
ブックマーク
エニグモ でWEBエンジニアをやっております、大宮です。 今回は、先日英語版 BUYMA で行った、AMP対応についてまとめた記事をお届けしたいと思います。 そもそもAMPとは？ Acceralated Mobile Pages の略です。 その名称が示す通り、モバイル端末で高速なWebページを表示させるためのプロジェクト、またはそのための フレームワーク (AMP HTML)の事です。 フレームワーク は Google と
HTML5における画像のレスポンシブ対応方法まとめ
2017/05/25
ブックマーク
こんにちは、Webフロントエンドエンジニアの権守です。 弊社では200以上の提携ECサイトから集めた大量の商品写真を取り扱っています。そのサービスの性質上、画像配信の最適化は非常に重要な課題の1つです。今回は最適化の一環として画像のレスポンシブ対応を導入しましたので、その際に調査した内容やハマったポイントなどを紹介します。 はじめに Retinaディスプ
Google Optimize導入とA/Bテスト実施のポイント
2017/04/19
ブックマーク
フロントエンジニアの苅部です。 medibaシステム本部では一部サービスのA/BテストをGoogle Optimize(以下Optimize)で実施しております。 先日Optimizeの一般利用が可能になったようですので、これから初めてA/Bテストを実施する方に向けて、使用感を共有できたらと思います。 Optimizeの特徴 1. 無償版でも十分使える 無償版でもほとんどの機能が利用できるため、予算のないプロジ
二次元的なレイアウトが可能になる次世代のCSSレイアウト、Grid Layout Moduleについて
2017/04/07
ブックマーク
こんにちは、制作部 松本です。 私はこれまでCSSレイアウトで display プロパティ用いる際、 inline-block や table 、 最近では flexbox を使用してきました。 今でも float を多用している方はあまりいないのではないかと思います。 本記事では、よりフレキシブルなレイアウトが実現できる grid について紹介します。 grid は複雑なため、まだ体系的に全ての機能を説明できるほど
デザインデータに忠実にCSSコーディングするためのテクニック
2017/02/03
ブックマーク
こんにちは、Webフロントエンドエンジニアの権守です。 フロントエンドエンジニアの皆さんは、リリース前の社内QAにてデザイナーにピクセルのずれを指摘されて修正したという経験があるのではないでしょうか。今回はiQONのPC・スマホサイトを構築する上で、デザインデータに忠実なCSSコーディングをどのように実現しているかを紹介します。 ツールの利用 PerfectPixel
CSSコーディング規約を導入して1年半運用した話
2016/12/15
ブックマーク
フロントエンジニアの茨木です。 皆様はCSSを書く際にコーディング規約を意識しているでしょうか。かつて、弊社にはCSSのコーディング規約が存在せず、CSSファイルの肥大化・クラス命名規則の不統一が発生していました。メンテナンスが難しくなってきた為、1年半ほど前にCSSコーディング規約を設けました。若干のルール追加を伴いながら、現在まで問題なく運用でき
JavaScriptで商品画像の拡大プレビュー機能の実装
2016/10/21
ブックマーク
こんにちは、Webフロントエンドエンジニアの権守です。今回は弊社で開発中のサービスで実装した商品画像の拡大プレビュー機能の実装について紹介します。 概要 新サービスの商品詳細ページに次の動画のような拡大プレビュー機能を実装しました。 このように拡大プレビュー機能があることで、デザインの細部や生地感がわかり、ユーザにとってよりよい体験を与え
デザイナー・コーダー向けちょっと便利なiPhoneアプリ４選
2016/09/26
ブックマーク
こんにちは。 新卒2年目デザイナーのshinoです。 制作職、特にデザイナー・コーダーのみなさんは、通勤時間などのスキマ時間にスマホでウェブサイトを見て、「あ！このデザインいいな！」「この配色ステキだなあ」「このサイト、どうやってコーディングしているんだろう？」と思ったことがあるのではないでしょうか。 ただ、そういうときほど、PCを利用できな
iQONのviewportを一気に書き換えた話
2016/09/02
ブックマーク
フロントエンドエンジニアのnibaです。 先日、iQONのスマホページでviewportの改善を行いました。 その際の技術選定や工夫について述べていきたいと思います。 viewportについて まず初めにviewportに関して説明します。 viewportはHTMLメタ要素の一つです。これを指定することにより、スマホ/タブレットで表示される際の描画領域幅やスケールを決定できます。 viewportは以下のよ
ブログ開設1年を振り返って
2016/09/02
ブックマーク
こんにちは。制作部の西野です。 このmediba Creator × Engineer ブログの立ち上げ担当をしておりました。 9月でブログの開設から1年になりますので、少し早いですが振り返りをしようと思います。 ブログ立ち上げの背景 このブログは、medibaのエンジニア、デザイナーが最近経験したこと、興味があって調べたこと、学んだことを投稿しているブログです。 medibaの開発のこと
ブラウザのウォーターフォール図でサイトのパフォーマンスを知る
2016/07/29
ブックマーク
こんにちは。初めまして！メディア開発本部 エンジニアの東です。2年目のサーバサイドのエンジニアで、サイトのパフォーマンスチューニングをやっています。本日はWebページのパフォーマンスを知る一つの手段である、ページの表示完了までのウォーターフォール図についてその見方を紹介したいと思います。 Webページが表示されるまで Webページは、ブラウザから