新年明けましておめでとうございます！ユアサです。 今年もarms inc. Engineer's Blogをどうぞよろしくお願いします。 今回は今までを振り返って、コーディングで自分も最初の頃はよくつまづいていたCSSの基本や解決策の例などを改めて書きまとめてみようと…

こんにちは、ユアサです。 アームズに入社してからCSSでのスタイル調整はだいぶ慣れてきました。ですが、以前CSSファイルを触っているときに、冒頭に「@」が付いている見慣れないものを発見し、見つけた当時は何のための記述なのか全然理解していませんでし…

こんにちは、中村です。 SVGについて、あまり勉強してこなかったので、 今回は気になっていた写真の切り抜きとアニメーションを試したいと思います。 DEMO 作ったのはこちら。 See the Pen SVGの画像の切り抜きとsnap.svgを使ったアニメーション/a> by Nakam…

こんにちは、中村です。 みなさん、IEはまだ標準対応をしているでしょうか。 オプション対応にされているところも増えてきたと思いますが、なかなか切り離せないのが現状です。 使いたいのに、IEのことを考えるとまだ使えない。でも、使いたい！ そんなCSSプ…

こんにちは、ユアサです。 The State of CSS 2020で比較的認知度が低かったCSSのscroll-snapプロパティについて気になったので、今回はこの内容について書きまとめていこうと思います。 scroll-snapって？ scroll-snapプロパティは、画面をスクロールさせた…

こんにちは、ユアサです。 少し前の話になりますが、The State of CSS 2020でCSSプロパティがいくつか話題になっていました。 その中でも、今回はobject-fitプロパティについて紹介していこうと思います。 object-fitプロパティの認知度について The State o…

こんにちは、ナカムラです。 前回はスクロール量を計測して、ページの最下部までスクロールしたかを判定する処理をご紹介しました。今回は方法を変えて、Intersection Observer APIを使った場合の処理について書いていきたいと思います。 前回の記事はこちら…

こんにちは、ユアサです。 いよいよ梅雨入りしてジメジメした日が続きますね。 さて今回は、昨年にCSSのトレンドになるのではと話題になっていた「ニューモーフィズム」について紹介していきます。 ニューモーフィズムについて ニューモーフィズムは、「New…

こんにちは、ユアサです。 アームズでフロントエンドの見習いとして活動し始めて1ヶ月ほどが経ちます。まだまだ勉強することは多いですが、一つひとつを焦らず段階を踏んで学んでいけたらと思っています。 今回は、自分が勉強していく中で知ったCSSのフレッ…

こんにちは、ナカムラです。 レスポンシブなページではユーザーの環境によって表示される幅が様々です。 スマホのような幅の狭い画面には縦並びに、PCのような幅が広い画面では横並びにするなど、ユーザーに最適なレイアウトに調整していきます。 レイアウト…

こんにちは、ナカムラです。 今回はスマホサイトではお馴染みのハンバーガーメニューの作り方をご紹介します。 タイトルに「階層の深い」と書きました。 ページ数の多いサイトでは、第2階層、第3階層とメニューが深くなっていきます。 階層が深くなるとメニ…

こんにちは、中村です。 少し前の話になりますが、Edgeがchromiumベースに更新されましたね。 以前のEdgeで固定表示した要素がスクロールした時にがたつく現象がありました。 javascriptを使ってブラウザのスムーススクロール機能をオフにし、 スクロールの…

こんにちは、中村です。 今回はCSSの擬似クラス「:only-child」についてご紹介しようと思います。 擬似クラスとは？ セレクタ要素の特定の状態に対してスタイルを当てるためのクラスです。 ユーザーの操作に反応したり、要素の状態によって見た目を変えるこ…

こんにちは、中村です。 以前コリスさんの記事で紹介されていたscroll-snapのscroll-paddingを使った「ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック」が気になっていたので、今どうなっているのか確認してみました。 記事の時…

こんにちは、中村です。 今回はWebサイトから少し離れて、HTMLメールについてです。 HTMLメールはあまり作る機会がなく、数年前に作ったきりだったので作り方の注意点が変わっていないか確認していきたいと思います。 主な注意点 ・WEBブラウザ以上に仕様が…

先日の台風、凄まじかったですね。 被害に遭われた皆様に、謹んで心よりお見舞い申し上げます。 『備え』について、改めて考えさせられたハヤマです、こんにちは。 今回はデザインデータで設定されている「行送り」「トラッキング」をCSSで指定する際の計算…

こんにちは、ナカムラです。 前回はレスポンシブページを作る時の工夫していることをご紹介しました。 今回は動的なページを組む時の工夫についてご紹介します。 動的なページとは、プログラムによってテキストなどの要素が出力されるページです。 このブロ…

突然ですが、先週スマホアプリ「DQウォーク」がリリースされましたね。 通勤時や帰宅後にゆるく遊んでいますが、位置情報の揺れのおかげ（？）で、ほぼウォークをせずにモンスターを150匹ほどやっつけていました。そんな自分に引き気味のハヤマです、こんに…

こんにちは、ナカムラです。 今回はHTML・CSSを組む際に工夫しているところを紹介しようと思います。 コンテンツ幅を一定にするならデザインと同じようにできていれば問題ありません。 レスポンシブの場合はウィンドウサイズの異なるデバイスに対応するため…

ついに梅雨が明けました！ とともに、いよいよ本格的な夏のはじまりですね。 先日、会社からほど近くの薬局でガリガリ君が1本48円で販売していてひっそりテンションが上がったハヤマです、こんにちは。 今回は、デザインデータを参照してテキストを実装する…

今年からアームズに入りました。ナカムラです。 フロントエンドを担当しています、よろしくお願いします。 今回はCSSのお話をしようと思います。 レイアウトの組み方はテーブルレイアウトから始まり、float、inline-blockなど様々なテクニックが使われてきま…