Web Designing Portal

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

Column
Clips: 65

プログラミング

ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめ

Date : 2017.07.06

ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。

ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめ
open in a new window

【保存版】Font Awesomeの使い方まとめ:Webアイコンフォントを使おう

Date : 2017.06.27

今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。

【保存版】Font Awesomeの使い方まとめ:Webアイコンフォントを使おう
open in a new window

jQuery不要!センスのいいナビゲーションをJSでサクッと実装する方法

Date : 2017.06.19

WPJでも使っているアニメーション付きのスティッキーナビゲーションメニュー。いまならjQueryや専用ライブラリーに頼らなくても、たった数行のJavaScriptで実装できます。

jQuery不要!センスのいいナビゲーションをJSでサクッと実装する方法
open in a new window

2017年要注目!モバイルアプリに必要なスクリーン画面のサンプル実例15個まとめ

Date : 2017.06.14

スマートフォンの登場によって、私たちの生活に欠かせないアイテムのひとつとなっています。さまざまなアプリケーションによって、よりライフスタイルを楽に、そして快適にしてくれます。 デザイナーの仕事は、ユーザーのニーズを満たすUIデザインを作成し、快適で満足のいくユーザー体験を作り出すことです。効果的なUIデザインを構築するためには、モバイルアプリケーションの特徴をきちんと理解し、構成している要素や機能を学ぶ必要があります。

2017年要注目!モバイルアプリに必要なスクリーン画面のサンプル実例15個まとめ
open in a new window

CSSでプログラミング?圧倒的にデザインが便利になる「CSSカスタムプロパティ」入門

Date : 2017.06.06

SassのようなCSSプリプロセッサーが登場してもう5年以上が経過しました。 SassやLESSは関数や変数などを使うことができるので非常に便利です。 関数や変数を使えるようになるだけで、大量のコードをコピーアンドペーストするという作業を省くことができ、サクサクと開発を進めることができるようになります。

CSSでプログラミング?圧倒的にデザインが便利になる「CSSカスタムプロパティ」入門
open in a new window

アニメーションをWebサイトに導入するためのテクニック

Date : 2017.06.04

機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の1つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。

アニメーションをWebサイトに導入するためのテクニック
open in a new window

【iPhone】このwebサイトから自動的に電話をかけることは禁止されています。

Date : 2017.06.02

ウェブサイトの動作確認を iPhone を使って行なっていたところ、意図せず『このwebサイトから自動的に電話をかけることは禁止されています。』というポップアップが表示されました。 このwebサイトから自動的に電話をかけることは禁止されています。 電話番号をクリックすると表示されるこのダイアログ。 HTMLの 内にメタタグ「format-detection」を記載しているのが原因かと思い、以下の記述を削除してみましたが、それでも解決せず......。

【iPhone】このwebサイトから自動的に電話をかけることは禁止されています。
open in a new window

【jQuery】YouTubeをモーダル表示させるなら「Magnific Popup」[IE9対応]

Date : 2017.06.01

YouTubeをモーダルウィンドウで表示させたいときは、jQueryプラグイン Magnific Popup が便利です。

【jQuery】YouTubeをモーダル表示させるなら「Magnific Popup」[IE9対応]
open in a new window

SEO効果のあるHTMLタグを全面的に修正するチェックリスト

Date : 2017.05.30

ホームページにおけるHTMLタグを人間の身体に例えるならば、人体を構成する細胞のようなものだと言えます。 基本となる細胞が崩れてしまっていては、細胞から構成される体組織、各種器官、ひいては身体全体も崩れてしまいます。

SEO効果のあるHTMLタグを全面的に修正するチェックリスト
open in a new window

ウェブデザインにおけるハンバーガーボタンについて考える「Analyzing the Hamburger Menu in Web Design」

Date : 2017.05.29

スマートフォンのメニューデザインの定番と言っても過言ではないハンバーガーボタン。当たり前のように利用されていますが、今回はそんなハンバーガーボタンに関して分析をした考察「Analyzing the Hamburger Menu in Web Design」をご紹介したいと思います。

ウェブデザインにおけるハンバーガーボタンについて考える「Analyzing the Hamburger Menu in Web Design」
open in a new window

なぜWebブラウザの文字組みは汚いのか?元エディトリアルデザイナーが解決策を提案します!

Date : 2017.05.25

こんにちは。入社以前はエディトリアルデザイナー(新聞・雑誌・書籍などの出版物のデザイナー)として書籍の装丁などもしていました。フロントエンドエンジニアのほりでーです。 今回は紙のデザインとWebデザインにある大きな違いのひとつ、「文字組みアキ量」というものについてお話しします。日本語組版のルールにも詳しく触れていくため、Webの経験しかない方も是非読んでみてくださいね!

なぜWebブラウザの文字組みは汚いのか?元エディトリアルデザイナーが解決策を提案します!
open in a new window

インスピレーションが湧き出る!芸術的なフランス発のホームページ7選

Date : 2017.05.24

フランスの首都パリは、19世紀以降、「芸術の都」と呼ばれることがあります。 一説によれば、ナポレオン時代に、国王の居住がヴェルサイユに移ったこどで荒れ果てたルーブル宮殿が整備され、当時国王や王族のコレクションだった美術品を展示して一般市民にも解放し、芸術に触れる機会が増えたからだと言われています。 さらには、ナポレオン3世時代に設計士オスマンを中心にパリの再開発が行われたことも理由だと言われています。

インスピレーションが湧き出る!芸術的なフランス発のホームページ7選
open in a new window

Advanced Custom Fieldsの関連が便利すぎてヤバい

Date : 2017.05.22

WordPressのカスタムフィールドプラグインは沢山ありますが、当サイトではAdvanced Custom Fieldsをつかっています。フィールドタイプの「関連」機能が便利すぎるからです!

Advanced Custom Fieldsの関連が便利すぎてヤバい
open in a new window

クオリティーが凄い!最近話題になったウェブデザイン40個まとめ 2017年5月度

Date : 2017.05.18

さまざまな想いやメッセージを伝えるウェブサイトは、クリエイティブなアイデアの宝庫です。まるで思いつかないようなユニークなアイデアが使われていたり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイトなど、参考したいポイントがたくさんあります。 この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。

クオリティーが凄い!最近話題になったウェブデザイン40個まとめ 2017年5月度
open in a new window

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

Category

Page top