勉強会で発表するちょっとしたスライドを用意するのに、慣れないパワポを使うのは面倒くさい。そこで、HTMLでかっこいいプレゼンテーションをつくるWebSlidesの出番です。 プレゼンテーションは聴衆に情報を伝える最適な方法です。短く簡潔に、コンパクトで噛み砕いた言い方をすることで、聴衆を引き込み、理解させることができます。表、グラフ、図形、イラスト、画像、動画、効果音、地図、リストなど、プレゼンテ…

Copyright © 2017, Ivaylo Gerchev All Rights Reserved.

Ivaylo Gerchev

Ivaylo Gerchev

独学のWeb開発者兼デザイナーです。HTML、CSS、jQuery、PHP、WordPress、PhotoshopやIllustratorで遊ぶのが大好きで座右の銘は「最小限の努力で最大限の結果を得る」です。

Loading...

フォーム要素の見た目が異なるのは置換要素だから? HTMLコーダーでも意外と誤解しがちな置換要素の定義を深堀してみました。 HTML要素の中には、iframes、アプレット、埋め込みオブジェクト、フォームといった、フロントエンド開発者を悩ませる要素があります。ブラウザーやOSによって表示結果が異なるので、完全な調整が難しいのです。 jQureryUIからBootstrapまで、さまざまなライブラリ…

Copyright © 2017, Adrian Sandu All Rights Reserved.

Adrian Sandu

Adrian Sandu

UI指向のフロントエンド開発者でUXをが好きです。ネットサーフィン以外は、ゲームをしたり、旅行で知らない場所を訪れたり、写真の腕前を磨いたりして過ごします。

Loading...

CSSの初学者が最初につまづくのが「継承」ではないでしょうか。無駄なコードや無効なコードを書かないように、CSSの継承をしっかり理解しましょう。 両親の背が高ければ子どもも背が高くなるという具合に、「継承」は現実の世界でも見られます。CSSも同じことが言えます。 包含ブロックに緑色を指定すれば、色が上書きされない限り内側のブロックもすべて緑色になります。特定のプロパティ値が親要素から子要素にそのま…

Copyright © 2017, Asha Laxmi All Rights Reserved.

Asha Laxmi

Asha Laxmi

フロントエンドの開発者でありインストラクターです。新しく興味深いJavaScriptライブラリーに取り組むことを楽しんでいます。余暇は旅行に行ったり、大量の本を読んだりして過ごしています。

Loading...

Web制作ですっかり定番となったメディアクエリを使ったレスポンシブ Webデザイン。JavaScriptで実装している機能をメディアクエリと連携させるためのちょっとしたテクニックを紹介します。 テーブルタグがCSSに変わり、レスポンシブデザインは心躍るコンセプトの1つです。レスポンシブデザインはメディアクエリで閲覧中の機器の画面幅、高さ、向き、解像度、アスペクト比、色深度などを把握し、応じたスタイ…

Copyright © 2017, Craig Buckler All Rights Reserved.

Craig Buckler

Craig Buckler

イギリス人のWebコンサルタントで、1995年にIE2.0向けにはじめてのWebサイトを製作。それ以降、Webの標準化とアクセシビリティ向上、HTML5の優れた事例を紹介・提唱してきました。SitePointでは1,000以上の記事を書いています。Twitterのアカウントは@craigbuckler

Loading...

複数の画像を切り替えて表示するカルーセルパネルといえば、どんなサイトでも使われる定番の表現方法。ちょっと工夫して、CSSとJavaScriptで魅力的な3Dカルーセルを実装する方法を解説します。 Smashing Magazineの記事など、伝統的な2Dカルーセルの使い方についての記事はたくさんあります。「カルーセルを使うべきか」という問いに対して単純にイエスかノーでは答えられないでしょう。答えは…

Copyright © 2017, Giulio Mainardi All Rights Reserved.

 Giulio Mainardi

Giulio Mainardi

フロントエンド開発について勉強中です。

Loading...

floatレイアウトはすでに過去のもの。Webサイトの要素の位置を操作するならFlexboxが定番となりました。出遅れたWeb制作者のために基本を解説します。 テーブルタグが唯一のWebページをレイアウトする手法だった頃を覚えていますか? 表形式のデータを表示するための機能をレイアウトに無理やり使っていたので、タグ名の意味と用途が異なるひどい状態でした。新しい「道具」が必要になり、「正しい」レイア…

Copyright © 2017, Christian Krammer All Rights Reserved.

Christian Krammer

Christian Krammer

10年以上の経験を持つWebデザイナーで、現在は小さな広告代理店を営んでいます。CSS3の詳細ガイドcss3files.comの所有者です。既婚者で、6歳の息子の父親であり、映画愛好家。彼の作品はchriskrammer.comで見られます。

Loading...

進化するCSSの機能を駆使して、CSSだけでクロスワードパズルを作りました。JavaScriptは一切使っていません! JavaScriptを使わずにCSSグリッドで動くCSSオンリーのクロスワードパズルを作成したところ、CodePenで話題になりました。執筆時点でハートマークが350、ページビューは24,000を超えました。 チュートリアルCSS Grid Gardenに触発され、グリッドレイア…

Copyright © 2017, Adrian Roworth All Rights Reserved.

Adrian Roworth

Adrian Roworth

スコットランドで活動するフロントエンドWeb開発者で、CSSとJavaScriptを独創的かつ革新的な方法で駆使してきた経歴があります。コーディングをしていないときはギターやドラムを演奏して過ごしています。

Loading...

WPJが提携するWeb開発者向けメディア「SitePoint」ではCSS開発者を対象にした大規模なアンケート調査を実施しました。その結果から、いま何を学ぶべきかが見えてきました。 CSS開発の現場で実践されている習慣、CSSに関する知識の量、理解度などの情報を集める目的で実施した「究極のCSS調査」には、6週間で1600名以上からの回答が寄せられました。このほど集計が完了したので、結果を発表します…

Copyright © 2017, Louis Lazaris All Rights Reserved.

Louis Lazaris

Louis Lazaris

2000年からWeb開発業界に従事しているSitePointのHTML/CSSコンテンツの共編者です。Impressive Websでブログを執筆しています。また、ツール中心のフロントエンド開発者向けニュースレター、Web Tools Weeklyのキュレーションを担当しています。

Loading...

進化し続けるCSSの仕様の中でも使い勝手がいいのが、CSS変数。キーカラーやサイズなど、あとから修正するのが面倒な要素はCSS変数を使って工数を減らし、ストレスを軽減しましょう。 SassやLessなどのプリプロセッサーは、CSSのコードベースを、メンテナンスしやすい整った状態にするのに役立ちます。変数、mixin(ミックスイン)、loop(ループ)などCSSコーディングに動的な機能を追加すると、…

Maria Antonietta Perna

Maria Antonietta Perna

SitePointのHTML/CSSチャンネルの共同編集者・フロントエンドWeb開発者です。CSSでいろんな手法を試すことを楽しんでいます。フロントエンドのプログラミング指導方法にも興味を持ち、WebのコーディングやWeb関連の執筆をしていないときは、哲学書や散歩、おいしいものを楽しんでいます。

Loading...

もっとわくわくするような Webサイトに! 海外の有名サイトをお手本に気持ちいい演出方法を学びましょう。 Webは大きく様変わりしています。テキストだけのシンプルなWebサイトから、サイトで情報を伝達するだけでなく、モダンで快適に閲覧できてワクワクするユーザーエクスペリエンスが求められています。 フォントの組み合わせから、インパクトの強いアニメーションやディープなインタラクションまで、視覚的におも…

Copyright © 2017, Simon Codrington All Rights Reserved.

Simon Codrington

Simon Codrington

フルスタック開発者で、Webが大好きです。Webやデザインに興味があり、驚くべきWebサイトを作ることに情熱を注いでいます。WordPressにフォーカスしながら、シドニーでThe White Agencyのチームとテーマ、プラグイン、特注のソリューションを開発しています。

Loading...