CSS

1/111ページ

連続したCSSアニメーションの実装

はじめに keyframesを使ったcssでのアニメーションは、gif画像の埋め込みと比べると読み込み速度も早く、パフォーマンスも良く、動きも滑らかです。 gif のようにどのようなアニメーションでも表現できるわけではありませんが、 1. 出現時のみ強調されたアニメーションが表示される 2. 以降、別のアニメーションがループして表示される といったようなカスタマイズが可能なので、その実装方法を紹介 […]

WordPress 初心者 オリジナルテーマ作り【1】

HTMLとCSSが問題なく出来るようになってきたのでPHPのコーディングを進めていたのですが、 エラーを連発してしまい、自分で解決出来なくなってしまいました。。 もう1度初めから、1個1個の過程を理解しながら進める為にもブログに記録していきます。 ※ここでは作りたいページのHTML・CSSが完成しているところから進めます 1.wordpressがどのように構成されているのか HTML・CSS・PH […]

メモ帳をつくる – 文字を装飾するボタンをつくる方法

はじめに この記事では、HTMLの文字要素を装飾するボタンを作成する方法を紹介します。 execCommandを使用するため、コード量も少なく簡単です。 HTML要素を編集可能にする方法、編集したHTML要素をlocalStorageに保存する方法と組み合わせれば、Evernoteのようなメモアプリを作成することができます。 事前準備 GIFのサンプルでは、わかりやすい見た目にするため、CSSファ […]

[ページ遷移しないWebシステム] JavaScriptによるURLの操作と、ページ遷移しないプログラム

 ページ遷移しないWebシステムを作成する場合、いくつかの問題点に遭遇します。今回はその一つである、ブラウザの戻るボタン問題について解決していきます。 以前の内容 [ページ遷移しないWebシステム] JavaScriptによるWindow Framework https://qiita.com/SoraKumo/items/18197b5b61cf8061ae5d [ページ遷移しないWebシステム […]

CSS Grid Layoutで作るレスポンシブな表組み3パターン

アイレット株式会社デザインセクションでマークアップエンジニアとして働いているくどうです。CSS Advent Calendarに参加するのは初めてですがどうぞよろしくお願いします。 概要 CSS Grid Layoutを使っていますか? たしかに最初はとっつきにくいし、1frってなんだよ…と言いたくなる気持ちもわかります。 しかし、こういった新機能は我々の新しい武器です。少々癖が強い武器ですが、忍 […]

Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった(2017年〜2018年)

CSS Gridは便利なレイアウト手法ですが、IE 11にも対応する場合はベンダープレフィックスの付与や古い記法への対応が必要です。ベンダープレフィックスの付与や古い記法への対応を自動で行うのがAutoprefixerなのですが、2017年から2018年にかけてIE 11向けのGrid対応が大きく向上したことをご存知でしょうか? 最近のAutoprefixerを使えば、次のようなメリットがあります […]

[ページ遷移しないWebシステム] JavaScriptによるWindow Framework

 Webアプリケーションを構築するにあたって、ユーザインタフェイスの作成は苦労する部分です。現在の一般的な開発手法においては、サーバサイドからHTMLデータを送信することによって、表示部分の書き換えを行っています。そのたびにページ遷移が起こり、ユーザの体験を著しく損なっているのが現状です。  それを回避手段はJavaScriptによってクライアント側でページの書き換えを行うことです。しかしサーバサ […]

1 111