:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
WordPress(wp)の子テーマの作り方とfunctions.phpの注意点 | 【MsReDesign】スタバの新作・カスタマイズ記事・Wordpressネタなど
WordPress(wp)の子テーマの作り方とfunctions.phpの注意点 2016-11-16 2017-01-23 WordPressテーマ WordPressでホームページを作成するにはテンプレートテーマを使用することが多いですが、テーマ内にあるファイルをそのままいじってしまうと、テーマをアップデートする際に全て上書きされてしまい、カスタマイズしたものは全て消えてしまいます。 そうならないように、子テーマを作りアップデートの上書きを避けましょう。 セキュリティの向上であったりWordpressのバージョンに合わせるようにアップデートされることがあるので、テーマのアップデートはできるだけ行いましょう。 子テーマの作成方法 子テーマの作成はいたって簡単です。 準備するものは、 子テーマとわかる名称のフォルダの作成 style.cssの作成 functions.phpの作成 この３つ
WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね！今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。 ページを表示する為に使っているテンプレート
子テーマを作ってWordPressの既存テーマをカスタマイズする方法
2017年5月1日 Wordpress いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存のテーマも豊富に配布されています。今回はそんな既存のWordPressテーマを使うメリットや、子テーマを作成してカスタマイズする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ WordPressの既存テーマを利用するメリット ちょっと検索すればたくさんのWordPressの既存テーマが見つけられます。既存テーマを利用すると、どんなメリットがあるのでしょうか？ 制作時間を短縮できる こういった配布されているテーマを使うメリットは、なんといっても制作時間の短縮。豊富なテーマの中には、自分の思い通りのレイアウトのものも見つけら
www が付いたものと付いていない URL がサイト内に混在しています。統一するべきですか？
［質問］wwwが付いたものと付いていないURLがサイト内に混在しています。統一するべきですか？「wwwあり・なし」問題は昔から頻繁に取上げられるSEOの話題だ。たとえば筆者が勤めるアイレップのウェブサイトは“http://www.irep.co.jp/”またはwwwを省略した“http://irep.co.jp/”どちらでもアクセス可能でブラウザにも全く同じウェブサイトが表示がされる。しかし検索エンジン相手となると少々事情が異なる。 検索エンジンはページに張られたリンクの数や質などを総合的に判断して点数を付けるわけだが、wwwありとwwwなしのURLを「別のページ」として取り扱う。つまり、先の例でいえば、検索エンジンにとって“www.irep.co.jp”と“irep.co.jp”は別のサイトと認識するのだ。このため、URLが統一されていないと「外部リンクの分散」が生じてSEOの効果が低下
インタフェースデザインの心理学 まとめ
1. All Copyrights reserved by akihiro_0228, 2015 インタフェースデザインの心理学 2015/03/26 - 社内勉強会 @akihiro_0228 100 Things Every Designer Needs to Know About People
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
これからIllustratorを始めてみようという人のための基本操作とかいろいろ
Illustrator を使い始めるにあたっての、予備知識や基本操作をまとめてみました。Illustrator って簡単ではないと思うんですけど、Webデザイナーなら使いこなしたいソフトウェアのひとつですよね。これからWebデザインで Illustrator を使ってみようという人が、少しでも Illustrator に親しんでくれればいいなーと思って書きました。 私はいつも Web制作の時には、Photoshop と Illustrator を使っています。ずっと前、Webデザインを勉強しはじめた頃、私は Illustrator より先に、まず Photoshop から使い始めました。そしてそのあと初めて Illustrator に触ったとき、Photoshop よりもとっても難しく感じて、基本操作もなかなか覚えられなかった想い出があります。 もちろん ベジェ曲線 や パス など、Ill
【初心者向け】PHPとは？PHPでできることや基本的な書き方を紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ひろゆきです。 僕はWebサービスをつくりたくてエンジニアになったのですが、プログラミング言語は数が多く仕様もさまざま。「プログラミングには興味があるけど、どの言語から手をつけるべきか分からない」という方も、多いのではないでしょうか？ 今回プログラミング言語の中でもPHPをご紹介するのは、初心者でも比較的とっつきやすく、前知識がほとんどなくてもブラウザ上で動かすことができるので、エンジニア入門に適しているからです。 プログラミングでモノ作りをしたいと考えている方は、PHPから始めることをおすすめします。 今回は「無料PHPスクール」を運営している「株式会社ドリーム・シアター」の中田さんの情報提供の元、LIGブログでのif文やwhile文の事例など、PHPを勉強する前に知っておきたい基礎知識をまとめてみました。 中田斉道（なかた せいどう）さん PHP／Javaを中心としたWeb
CSSのtable-cellでmarginが効かないので代わりに隙間を空ける方法 - ディレイマニア
以前にtable-cellを使ってfloatを使わずに要素を横に並べる方法をご紹介しました。 この方法便利なんですが、marginを使って隙間を空けることができないんですよね。 というわけで、margin以外の方法で隙間を作る方法をご紹介します。
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshop VIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP