ブログ

社員が発信するブログ。

「Swiper.js」で自動で切り替わるカバーフロースライダーをつくる

「Swiper.js」で自動で切り替わるカバーフロースライダーをつくる

先日JavaScriptのライブラリ「Swiper」を使ってスライダーの実装を行いました。 初めて「Swiper」を使ったのですが、これが使っていておもしろかったので、今回は「Swiper」で自動で切り替わるカバーフロースライダーをつくる方法をご紹介したいと思います。 「Swiper」とは Swiperとは、jQueryを使わずにスライダーが作れるJavaScriptのライブラリです。 レスポンシブの設定など多くのパラメータが用意されています。 公式のデモも豊富で、いろいろなカスタマイズをすることができるようです。...

CSS「display: grid;」で画像をグリッドレイアウトで表示する方法

CSS「display: grid;」で画像をグリッドレイアウトで表示する方法

CSS「display: grid;」で画像をグリッドレイアウトで表示する方法をご紹介します。 グリッドレイアウトで表示される画像の完成イメージ 5枚の画像をグリッドレイアウトで表示するページです。 ウィンドウ幅によって何列で表示するかを切り替えます。 サンプルコード 画像を隙間なく配置するために余白をリセットしています。 「grid-template-columns: repeat(x, 1fr);」で列を指定しています。 「grid-column-start」や「grid-row-start」が画像のサイズです。...

Outlookから送られて来たメール、添付ファイルが読めないんだけど…

Outlookから送られて来たメール、添付ファイルが読めないんだけど…

お客様から届いたメールを開いてみると… お客様からは、Word文書とPDF文書を添付したって聞いてたんだけどなあ。 この「winmail.dat」をダブルクリックしても こんな画面が出てアプリで開くことも出来ません。 Winmail.dat ってなに? これは、マイクロソフト社製のメールアプリである「Outlook」が使っている独特なメッセージ形式の影響です。 メールのメッセージ形式が Outlook のインターネット メールのメッセージに与える影響 Microsoft Outlook と Microsoft Exchange...

WordPressテーマ「Divi」で画像をグリッドレイアウトで表示する方法

WordPressテーマ「Divi」で画像をグリッドレイアウトで表示する方法

WordPressテーマ「Divi」で画像をグリッドレイアウトで表示する方法をご紹介します。 実際に作成するグリッドレイアウトのイメージ 画面を覆うように画像を表示し、各画像の右下にテキストを配置します。 スマートフォンでも同様に表示します。 Diviの設定内容 次のようなレイヤーを構成し、各「列」の背景に画像を設定します。 グリッドレイアウト作成の流れ Divi Builderを起動して、「最初から構築」を選択します。 2列構成の行を挿入します。 左の列にテキストモジュールを挿入します。...

CSS「position: sticky;」でサイドバーを固定しスクロール追従させる方法

CSS「position: sticky;」でサイドバーを固定しスクロール追従させる方法

CSS「position: sticky;」でサイドバーを固定しスクロール追従させる方法をご紹介します。 スクロール追従する固定サイドバーの完成イメージ CSSで画面をスクロールしても位置が固定されているサイドバーを持つ、2カラムレイアウトのページです。 ピンク色の部分がスクロール追従する固定サイドバーでに位置します。 サンプルコード 「position: sticky;」で上から50pxの場所に.side_contentを固定しています。 2カラムレイアウトは「display: grid;」で3:1にしました。...

WordPressテーマ「Divi」でサイドバーを固定しスクロール追従させる方法

WordPressテーマ「Divi」でサイドバーを固定しスクロール追従させる方法

WordPressテーマ「Divi」でサイドバーを固定しスクロール追従させる方法をご紹介します。 また、こちらではCSS「position: sticky;」を使い固定サイドバーを作る方法をご紹介しています。 https://www.kaname-gh.co.jp/web_design/css_sticky_sidebar/ スクロール追従する固定サイドバーの完成イメージ 画面をスクロールしても位置が固定されているサイドバーを持つ、2カラムレイアウトのページです。 Diviの設定内容...

パソコンの電源は落としていますか?

パソコンの電源は落としていますか?

最近パソコンの動作が遅くなったとか不安定になってきてませんか?   よくあるのがテレワーク等で使用しているリモ-トパソコンを数週間の間、一度も再起動しないで使用している間にWindows Updateなどが理由で再起動を待っている状態となっている事があります。 このような場合、多くは改めて再起動してあげる事でその動作が復旧します。 多くの会社ではシステム管理者がPCの使用者に対してオフィス内のリモートパソコンを定期的に再起動を行うよう推奨しています。 リモートパソコンとして使用しているPCも同様、Windows...

【すべり性能、超進化!】スマホガラス用コーティング剤「iガラコ スマートフォン 2.0」

【すべり性能、超進化!】スマホガラス用コーティング剤「iガラコ スマートフォン 2.0」

スマートフォンやタブレットの画面が指紋や皮脂汚れでベタベタ! 画面操作する時にフリックやスワイプなどの指滑りが良くない!! などという事はありませんか? そこで、スマートフォン・タブレット端末のガラス面用コーティング剤「iガラコ スマートフォン 2.0」をご紹介します。 スマートフォンの指紋・皮脂汚れ対策用コーティング剤「iガラコ スマートフォン 2.0」 「iガラコ スマートフォン 2.0」とは...

最新版Microsoft Edgeの新機能が秀逸です

最新版Microsoft Edgeの新機能が秀逸です

旧型が強制的に削除されるなどなにかと動きがあったMicrosoft Edgeですが、最新版がリリースされ、その磨きがかかった新機能についてご紹介します。 垂直タブ ウィンドウの左上にあるタブアイコンをクリックすることで水平/垂直を切り替えらます。垂直表示ではアイコンだけとページ概要も表示する2通りを選べます。初期設定ではアイコンだけですが、カーソルを置くと表示されるピンのアイコンをクリックすると概要も表示されます。この状態では多くのタブを表示しても概要が表示されたままになるので、タブが探しやすくなっています。...

【清潔で快適なマスク生活を全面サポート!】マスク除菌ケース「typeA+C MDK-M03」

【清潔で快適なマスク生活を全面サポート!】マスク除菌ケース「typeA+C MDK-M03」

  マスクが日常生活において必需品となった現在、マスクの長時間使用による不快感や洗濯に弱いマスクの除菌に困ったりする事はありませんか? そこで、マスクを清潔で快適に使いたいというニーズに応えたマスク除菌ケース「ULTRAWAVE マスク除菌ケース TypeA+C(MDK-M03)」のご紹介です。 クラウドファンディング支援者数No.1になった「ULTRAWAVE マスク除菌ケースver.2」が、さらにレベルアップして登場! 「ULTRAWAVE マスク除菌ケース...

【リモートワークをバーチャルでより円滑に!】オンラインワークスペース「Oasis(オアシス)」

【リモートワークをバーチャルでより円滑に!】オンラインワークスペース「Oasis(オアシス)」

リモートワークをしていると、「上司、同僚とのコミュニケーションが不足する」「勤務時間とそれ以外の時間の区別がつけづらい」などのデメリットを感じることはありませんか? そのような課題をバーチャル空間で解決する、オンラインワークスペース「Oasis(オアシス)」の紹介です。   オンライン上で“みんなと気軽に意思疎通しながら仕事ができる”オンラインワークスペース「Oasis(オアシス)」 リモートワーク・プラットフォーム「Oasis(オアシス)」とは?...

【工事不要・月額0円から導入可能!】ネットワークカメラ「ieCame(イエカメ)」

【工事不要・月額0円から導入可能!】ネットワークカメラ「ieCame(イエカメ)」

コロナ禍で無人化・省人化が進む小規模オフィスや店舗をスマホでいつでもどこからでも見守ることができる、Wi-Fi対応のネットワークカメラ「ieCame(イエカメ)」の紹介です。   工事不要、クラウドプラン月額0円からと手軽に導入でき、人が映ったら検知してお知らせする機能も備えています。 また、手頃な料金でクラウドへの連続録画や顔識別機能を追加できます。   小規模オフィスや店舗、個人ユーザー向けのWi-Fi接続型カメラ「ieCame」   ネットワークカメラ「ieCame」を設置する効果 1....

人気の投稿

最新の投稿

カテゴリー

タグ

アーカイブ