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

こんにちは、ナカムラです。 今回は使ってみて便利だったChromeの拡張機能をご紹介します。 ナカムラは文章校正というのがとても苦手です。 ！などの記号や、（）は全角に統一するようにしているのですが、 使用しているフォントだったり、文字詰めをしてい…

こんにちは、ナカムラです。 今回はSNSシェアボタンの設置方法について書こうと思います。 （この記事は2021年1月27日時点での情報になります。2023年9月22日：Twitterの部分に追記しました。） よく設置するTwitter、Facebook、LINEについてです。 オリジナ…

こんにちは、ナカムラです。 スタティックのHTMLページを作成している中で、商品情報など、 同じレイアウトを繰り返すコンテンツがあります。 数が少なければ手作業で書き込めば良いですが、10件、20件ともなるとなかなか大変な作業になります。 そこで今回…

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

こんにちは、ナカムラです。 今回は文字数などのコンテンツ量によって表示を制限するJavaScriptを解説していきます。 jQueryを使わないネイティブでの書き方になります。 ※IEにも対応したい場合は注意点があります。詳しくは解説の中で記載しています。 作り…

こんにちは、ナカムラです。 今回はjavaScriptのプラグイン「Shuffle.js」を使って絞り込みとソートの実装をしてみたいと思います。jQueryは使用しません。 オプションがいろいろありすぎて読み解くのがなかなか辛かったので 一番シンプルな絞り込みとソート…

こんにちは、中村です。 今回はこちらの記事で紹介されている「rel="noopener”」という属性について確認していきたいと思います。 「Firefox 79」が正式リリース ～Windowsで新レンダラー「WebRender」の適用を拡大 - 窓の杜 記事の内容はFirefox79の仕様でr…

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

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

こんにちは、中村です。 今日はvue.jsを使って簡単なレコメンドを行うコンテンツを作ってみました。 概要 質問の答えに対して、おすすめしたい情報を表示します。 今回はシンプルに質問は2つ用意しました。 2つの答えの組み合わせにより、表示結果が変わりま…

こんにちは、中村です。 今回はjQueryなどを使わないネイティブJavaScriptでのタブの作り方をご紹介します。 デモ See the Pen ネイティブJavaScriptでタブを作ろう by Nakamura (@takayo-nakamura) on CodePen. 動作の解説 （1）タブメニューをクリックされ…

こんにちは、中村です。 SVGの圧縮時にviewBoxが消えてしまうことがあったので検証してみました。 起こったこと アームズの作業環境については別の記事で紹介されています。 この仕様の中で、SVGの圧縮でつまずいたところがありました。 tech.arms-soft.co.j…

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

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

遅ればせながらcanvasを勉強し始めました。 「ちょっと動きが欲しいんだけど」にサクッと応えたい。 そもそもcanvasってなんなんだ？というところからのスタートです。 単純なアニメーションならtransitionやanimationなど、CSSだけである程度は動かせますが…

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

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

こんにちは、ナカムラです。 前回の記事でVue.jsを使った簡単なゲームを作ってみました。 今回はそのゲームに一つ機能を付け加えたいと思います。 ※ゲームの概要は前回の記事をご覧ください。 tech.arms-soft.co.jp 追加する機能 【 スコアを保存して表示す…

こんにちは、ナカムラです。 今日はVue.jsを使って簡単なゲームを作ってみたのでご紹介します。 ゲームの概要 作ったのは運試しゲーム。 １・２・３と３つあるボタンのどれかをクリックするとランダムで１〜３の数字が出ます。 押したボタンの数字とランダム…

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