Web Designing Portal

Webクリエイターのための、
Webデザイン・Web情報のポータルサイト

Column
Clips: 65

プログラミング

.htaccessを使ったよく使うリダイレクトまとめ

Date : 2016.12.27

Webサイト公開後、.htaccessを使って旧ページから新ページにリダイレクトをかけます。何度も同じようなことをしているのですが、やはり忘れっぽいので、よく使うリダイレクトの書き方をまとめておきます。

.htaccessを使ったよく使うリダイレクトまとめ
open in a new window

flexboxのCSSレイアウトを生成できる便利ツールflexplorer

Date : 2016.12.27

flexboxはシンプルなhtmlでレイアウトを構成できて便利ですが、プロパティが色々あって混乱することもしばしば。。 flexplorerを使えば、スタイルの切り替えを実際に見ながらレイアウトの確認が出来るので、flexboxの仕組みが直感的に理解できます。

flexboxのCSSレイアウトを生成できる便利ツールflexplorer
open in a new window

Google、モバイルファーストインデックスの導入予定を正式発表。スマホ向けページを検索の評価対象に。SEOへの影響は?

Date : 2016.12.27

Googleは、Mobile First Index(モバイル ファースト インデックス)の導入を正式にアナウンスしました。 モバイル ファースト インデックスに向けてモバイル ファースト インデックスでは、PC向けページではなく、モバイル向けページの評価に主に基づいてランキングが決定されます。 Gary Illyes(ゲイリー・イリェーシュ)氏が米ラスベガスで10月に開催されたPubCon Las Vegas 2016で発表していたGoogle検索の仕様変更です。

Google、モバイルファーストインデックスの導入予定を正式発表。スマホ向けページを検索の評価対象に。SEOへの影響は?
open in a new window

ハンバーガーメニューはもう古い!代わりに使えるモバイル用ナビメニュー5つまとめ

Date : 2016.12.27

ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。

ハンバーガーメニューはもう古い!代わりに使えるモバイル用ナビメニュー5つまとめ
open in a new window

2017年に注目しておきたい、JavaScriptのライブラリのまとめ

Date : 2016.12.27

数多くあるJavaScriptのライブラリの中で、どれを勉強すればいいか判断することはなかなか難しいものです。いくつかのライブラリは放置され衰退し、またいくつかは急速に成長し、広範囲に採用されることがあります。 jQueryやReactは多くの人が知っているでしょう。 2017年に注目しておきたい、急成長しているJavaScriptのライブラリを紹介します。

2017年に注目しておきたい、JavaScriptのライブラリのまとめ
open in a new window

モバイルの使いやすさを劇的向上!参考にしたい7つのポイントまとめ

Date : 2016.12.27

アプリはコンテンツやサービスを提供するために、信用できる主流の方法となっています。しかし、さまざまなサービスが乱立する市場では、どのようなモバイルアプリが役立ち、関連性が高く評価され、ユーザーを楽しませてくれるでしょう。

モバイルの使いやすさを劇的向上!参考にしたい7つのポイントまとめ
open in a new window

ウェブをもっと面白く!コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度

Date : 2016.12.27

思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。

ウェブをもっと面白く!コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度
open in a new window

CSS3 Writing Modesの仕様解説

Date : 2016.12.27

CSS2では、directionやunicode-bidiプロパティが定義され、横書きの複雑なレイアウトを行うアラビア語などの双方向言語(BIDI)が扱えるようになっていました。 CSS3では、テキストの進行方向に関する仕様は「Writing Modesモジュール」にまとめられ、BIDIに加えて縦書きへの対応などが追加されています。 Writing Modesモジュールでは、行の進行方向、文字の進行方向、文字の向き、などの書字方向全般の仕様が定義されています。

CSS3 Writing Modesの仕様解説
open in a new window

アナログ感のある写真を表現するPhotoshopアクション「Anaglyph Photoshop Actions」

Date : 2016.12.27

Photoshopなどもフォトレタッチツールで写真は撮影後、様々な表情を見せてくれますが、今日紹介するのはアナログ感のある写真を表現するPhotoshopアクション「Anaglyph Photoshop Actions」です。

アナログ感のある写真を表現するPhotoshopアクション「Anaglyph Photoshop Actions」
open in a new window

サイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」

Date : 2016.12.27

WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。

サイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」
open in a new window

CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール

Date : 2016.12.27

いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回はCSS3のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。

CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール
open in a new window

文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング

Date : 2016.12.27

「Webでは文字詰めはできない」と諦めていませんか? 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの一つとされています。 そんな文字詰めですが、HTMLでも実はCSSのfont-feature-settingsプロパティーを指定するだけで自動カーニングができます。ほとんどのブラウザがサポートしており、実務でも十分使えるようになってきました。今回はそんなfont-feature-settingsプロパティーの魅力と使いどころをくまなく紹介します。

文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング
open in a new window

CSSコピペで利用!話題のボタンデザイン用スニペット、サンプル30個まとめ

Date : 2016.11.01

CSSをコピペしてウェブ制作に活用できる、ボタン用スニペットサンプルを、WEBデザイナーのためのコードコミュニティサイト、Codepenよりピックアップしてまとめています。 その場でコードを確認、編集することができるので、幅広いデザインプロジェクトに応用でき、アニメーションをうまく活かした新しいスタイルを、今後のウェブサイト制作に活用してみてはいかがでしょう。

CSSコピペで利用!話題のボタンデザイン用スニペット、サンプル30個まとめ
open in a new window

文章中の全角英数字をすべて半角英数字に変換するツール「全角英数字 → 半角英数字 [FONT TYPE CHANGE]」作ってみました

Date : 2016.10.18

Webページ上で英数字を表記する際に全角文字を使用すると可読性の問題やバランスの悪さに加えて、アクセシビリティ等にも影響を与え問題が多く発生します。そんな場合などにわざわざ原稿内の全角英数字をチェックをして書き直すのも手間なので、解決策として文章中の全角英数字をすべて半角に変換するツールの制作をおこなったものが紹介されています。

文章中の全角英数字をすべて半角英数字に変換するツール「全角英数字 → 半角英数字 [FONT TYPE CHANGE]」作ってみました
open in a new window

当コンテンツは、ウェブにおける公共的な技術の向上を目的とし、著作権法第32条で定められた通り、一般に公表された著作物を出所を明示して引用しています。掲載に関するお問い合わせはこちらにご連絡ください。

Category

Page top