TechMemo

  • HOME
  • HTML
  • CSS
  • JavaScript
  • SEO
  • WordPress
  • EC-CUBE
  • WEBサービス
  • WEBチートシート
  • About
  • お問い合わせ

CSS

CSSだけで斜めの背景を実現する方法

2017/06/05
CSS
No Comments
CSSだけで斜めの背景を実現する方法

CSSだけで、以下のページのような斜めの背景を実現する方法をご紹介いたします。 Skewed background with CSS CSSだけで斜めの背景を実現する方法 CSSで斜めの背景を実装するには、transfo…

Continue reading

CSS

プレビューを確認しながらCSSアニメーションが生成できる「Animista」

2017/05/19
CSS
No Comments
プレビューを確認しながらCSSアニメーションが生成できる「Animista」

Animistaは、プレビューを見ながらCSSアニメーションを直感的に作成できるWEBサービスです。 Animistaの使い方 まずはAnimistaにアクセスして、[TRY ME!]をクリックします。 画面上部からアニ…

Continue reading

CSS, Webサービス

文字の半分で違う色を指定するCSSテクニック

2017/05/17
CSS
No Comments
文字の半分で違う色を指定するCSSテクニック

文字の半分から左と右で、違う色を指定するCSSテクニックについてご紹介いたします。 文字の半分で違う色を指定するCSSテクニック HTMLはシンプルに以下のようにします。 data-headingにh1要素と同じ内容の文…

Continue reading

CSS

プレビューを見ながらCSS Grid Layoutのコードが生成できるWEBサービス「Griddy」

2017/05/16
CSS
No Comments
プレビューを見ながらCSS Grid Layoutのコードが生成できるWEBサービス「Griddy」

Griddyは、プレビューを見ながら直感的にCSS Grid Layoutのコードが生成できるWEBサービスです。CSS Grid Layoutにあまり慣れていなくても、簡単にCSSのコードを生成することができます。 G…

Continue reading

CSS, Webサービス

CSSのみでループして流れる画像を設置する方法

2017/05/15
CSS
No Comments
CSSのみでループして流れる画像を設置する方法

CSSアニメーションを利用して、横向きに永遠と流れる画像を設置する方法についてご紹介いたします。 挙動としては、こちらのページ下部にある、右から左へと流れているイラストのような動きになります。 CSSのみでループして流れ…

Continue reading

CSS, 画像

CSSだけで一つの要素に二重の線を引く方法

2017/04/24
CSS
No Comments
CSSだけで一つの要素に二重の線を引く方法

CSSだけで要素に二重の線を引く方法を紹介いたします。 CSSだけで要素に二重の線を引く方法 HTMLはシンプルにdivのみで説明いたします。 CSSでは、borderプロパティで線を引き、追加でbox-shadowを指…

Continue reading

CSS

空の要素に対してスタイルを適用することができる疑似クラス「:empty」

2017/04/21
CSS
No Comments
空の要素に対してスタイルを適用することができる疑似クラス「:empty」

「:empty」はCSS3で追加された疑似クラスで、空の要素に対してスタイルを指定することができます。 例えば、テーブル内の空のセルだけ背景色を変えたり、非表示にしたり、といったことがCSSだけで指定できます。 :emp…

Continue reading

CSS

display:inline-block;でできた隙間(余白)をなくす3つの方法

2017/04/13
CSS
No Comments
display:inline-block;でできた隙間(余白)をなくす3つの方法

CSSで要素の横並びを実現する手法の1つとして、「display:inline-block;」を使う方法があります。 例えば、以下のようなHTMLがあったとします。 CSS側は以下のように指定すれば、簡単にリストを横並び…

Continue reading

CSS, HTML

CSSアニメーションで要素が一瞬伸縮したりちらつく場合の対処法

2017/04/03
CSS
No Comments
CSSアニメーションで要素が一瞬伸縮したりちらつく場合の対処法

transitionやtransformでCSSアニメーションを要素にかけた時に、要素の幅が一瞬だけ伸縮してしまったり、ちらついてしまう場合があります。私もよく以下のようなCSSを指定することがあるのですが、アニメーショ…

Continue reading

CSS

様々なフォームデザインとサンプルコードがまとめられている「77 CSS Forms」

2017/02/14
CSS
No Comments
様々なフォームデザインとサンプルコードがまとめられている「77 CSS Forms」

77 CSS Formsは、様々なフォームのデザインとそのデザインを実現するためのサンプルコードがまとめられているサイトです。 各フォームのデモを確認したり、HTMLとCSSのコードセットをダウンロードすることも可能です…

Continue reading

HTML, フォーム, CSS, Webサービス
  • « Previous
  • Next »

最近の投稿

  • メール送信をPHPMailerからSMTP経由に変更できるWordPressプラグイン「FluentSMTP」
    メール送信をPHPMailerからSMTP経由に変更できるWordPressプラグイン「FluentSMTP」
  • inputタグにクレジットカード番号や電話番号などのフォーマットを適用できるJavaScriptライブラリ「Cleave.js」
    inputタグにクレジットカード番号や電話番号などのフォーマットを適用できるJavaScriptライブラリ「Cleave.js」
  • reCAPTCHAの代替に!ログイン画面やお問い合わせフォームにスパム対策を導入できるWordPressプラグイン「Simple Cloudflare Turnstile」
    reCAPTCHAの代替に!ログイン画面やお問い合わせフォームにスパム対策を導入できるWordPressプラグイン「Simple Cloudflare Turnstile」
  • シンプルだけど必要な機能はしっかり揃っているWordPressのセキュリティプラグイン「XO Security」
    シンプルだけど必要な機能はしっかり揃っているWordPressのセキュリティプラグイン「XO Security」
  • WordPress開発環境をDockerで構築してメールの送信内容も確認できるようにする方法
    WordPress開発環境をDockerで構築してメールの送信内容も確認できるようにする方法

カテゴリー

  • HTML (33)
  • CSS (157)
  • JavaScript (154)
  • Wordpress (1,047)
    • テーマカスタマイズ (323)
    • Wordpressプラグイン (662)
    • Wordpressインストール (75)
  • EC-CUBE (54)
  • Drupal (17)
    • Drupalインストール (8)
    • Drupalモジュール (8)
  • Webサービス (512)
  • SEO (57)
  • Webチートシート (133)
  • ソフトウェア (106)
  • ハードウェア (14)
  • その他 (12)

タグ

Adobe CSS Drupal EC-CUBE Google HTML JavaScript jQuery li Linux Mac ol PHP rss SEO SNS ul Web Webサービス Windows WordPress インストール カメラ ギャラリー ゲーム コメント セキュリティ セレクタ ソフト テーマ フォーム ブラウザ プラグイン プログラミング モジュール 動画 基礎 画像

本日の人気記事

  • YouTubeにアップロードした動画が「一部の地域でブロック」となってしまった場合の対処法
  • テキストエディタで改行を置換する方法 テキストエディタで改行を置換する方法
  • コントローラーのスティックやボタンの不調をチェックできるWebサービス「Gamepad Tester」
  • SPFレコードの構文チェックができるWebサービス「SPF Syntax Validator」
  • トップページを静的HTMLにしてWordPressの下書きプレビューができなくなった時の対処法

アーカイブ

Copyright © 2012 TechMemo