こんにちは、ナカムラです。 前回はスクロール量を計測して、ページの最下部までスクロールしたかを判定する処理をご紹介しました。今回は方法を変えて、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など様々なテクニックが使われてきま…