PCサイトコーディング入門 -スライドするヒーローイメージ-｜オンライン動画授業・講座のSchoo（スクー）
「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学んでいきます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」「A-2 WebデザインのためのCSS入門」をご受講済みの方、または同程度のレベルの方に合わせてあります。 第6回「スライドするヒーローイメージ」では、1〜5回で成型してきたサイトにjQueryプラグインを用いてヒーローイメージをスライドさせる手法を学びます。ここでは、通常使われる、HTMLのimgタグに設置されたヒーローイメージをスライドさせるのではなく、cssを使って背景に読み込ませた画像にjQueryを当ててスライドさせます。 ■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。 またHT
フリーランサーのためのシングルページ デザインの制作法（後編）｜オンライン動画授業・講座のSchoo（スクー）
フリーランサーのための最新Webデザイン講座 ２回シリーズの前編は、フリーランサーが自分の“武器”とするための「シングルページ・デザイン」のキホンをわかりやすく説明する回です。今回のこの後半では、「シングルページ・デザイン」の実装法を実演します。「シングルページ・デザイン」では、「インブラウザ・デザイン（designing in the Browser）」の手法で制作を進めます。最初にブラウザ上で動くHTML5で出来た「プロトタイプ」を作り、これをブラッシュアップすることで完成・公開までもっていきます。つまり、「プロトタイプ」を作る前の雛形の準備と設計が今まで以上に大事になるということ。この授業では、その勘所とコツについても詳しくお話します。 ◎特にこんな方は要チェック １．自分の強みを持ちたいフリーランサーのＷｅｂデザイナー、ディレクター ２．「シングルページ・デザイン」「ワンページ・デ
PCサイトコーディング -お問い合わせフォームの作成-｜オンライン動画授業・講座のSchoo（スクー）
このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。 「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。しかしながら、基礎があやふやだと応用がききません。まずは基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。 第6回はお問い合わせフォームを作成します。入力しやすいお問い合わせフォームのためのHTMLとCSSの書き方を覚えましょう。 授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。
スマホサイトコーディング入門 -ユーザーが操作するUIを作る:メニューなど-｜オンライン動画授業・講座のSchoo（スクー）
この授業ではスマホサイトの特性と振る舞いを学び、完成予想図通りにHTMLとCSSでコーディングして完成させるまでを学んでいきます。 Googleアルゴリズムがスマホ対応サイトを優先するようになり、ますますWebサイトはスマホUIが重要になってきました。コーディングは初めてという方はもちろん、PCサイトは作ったことがあるがスマホサイトは未経験という方にオススメの授業です。 今回のアジェンダアジェンダ ・メニュー部分のコーディング ・タップで開閉するドロワーメニューの作成 ■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。またHTML／CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。 WebデザインのためのHTML入門 WebデザインのためのCSS入門
プロデザイナーが実践するHTML＆CSSスキル向上トレーニングvol.4｜オンライン動画授業・講座のSchoo（スクー）
「HTMLとCSSの基礎知識はあるけど、その知識をどう応用したらいいのかわからない」 「実際にWebページをコーディングしようとすると指が動かない」 この授業は、こんな悩みを抱えている方におすすめです。 私が本格的にHTMLとCSSを学び始めたのは、2013年の4月から。冒頭に書いた悩みは、初めてWebページを作成しようとした時に私も抱いていました。 そこで、HTMLとCSSスキルを向上させるために始めたのが、今回ご紹介する「HTMLスケッチ」です。 本授業では、実在するWebページをHTMLとCSSを使って自らの手で再現するこの手法を実際に授業で行います。ライブコーディングを見ることでページの構造や成り立ちを理解でき、より実践的な知識に進歩させる一助になるのではないかと考えております。 授業では、Webサイトを題材にしてコーディングのポイントを解説する他、私が実際に使っているショートカッ
挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】｜オンライン動画授業・講座のSchoo（スクー）
※録画授業を受講いただく前にご確認ください 授業内で使用するWordPressプラグインのURLが下記に変更になりました。授業中にスクー教務課が投稿しているプラグインは、現在有料のものになりますので、下記をご利用くださいませ。 ▼本授業で使用するWordPressプラグイン https://github.com/gilbitron/Nivo-Lightbox また、授業内で配布している演習用素材のURLが開けない、という方はインターネットのセキュリティレベルを変更されるか、こちらのストレージからダウンロードしてください ▼演習用素材 http://bit.ly/13XJPtE html+cssを挫折した全ての人に贈るシリーズ 全5回 このシリーズは1回で完結していますが、 1回から5回まで同じサイトがどんどん完成して行く形になっています。 1回づつ完結した出来上がり見本付きの演習ファイルが
今日から使えるHTML5/CSS3/JSのシンプルテクニック15選｜オンライン動画授業・講座のSchoo（スクー）
この授業は、下記スキルの方が対象です。 XHTML,CSS2：必須 HTML5,CSS3,Sass,jQuery：推奨（いずれも基礎レベル） ■HTML・CSS３・JavaScriptをまとめてスキルアップ スピーディーで完璧なコーディングをするために覚えておきたい以下１５個の"ワザ"が身につきます。 ① 今どきの要素を上下中央寄せにするワザ その1 ② 今どきの要素を上下中央寄せにするワザ その2 ③ 今どきの要素を上下中央寄せにするワザ その3 ④ text-indent:-9999pxの上位互換的なワザ ⑤ PCサイトをタブレットやスマホで閲覧した時にちょい綺麗に見せるワザ ⑥ デバイズごとに快適な閲覧をしてもらうために設定すべきviewportのワザ ⑦ Windowsでweb-fontをちょっとマシに見せるワザ ⑧ CSSプロパティ”filter”で画像を加工するワザ ⑨ tra
WordPressで画像配置の基本と横並びにする方法
WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。 画像のサイズと配置 まず最初に確認しておくのはWordPressの設定です。管理画面から「設定」⇒「メディア」と進み、自分が設定している画像のサイズを確認しておきましょう。 これがデフォルトの設定だと思います。「サムネイルのサイズ」「中サイズ」「大サイズ」の3種類がありますよね。画像をアップロードするとここで設定した3種類のサイズと「オリジナルサイズ」の画像がWordPressにアップロードされます。 つまり1枚の画像をアップロードすると４枚の画像がアップロードされる事になります。まずはここを覚えておきます。 それとサムネイルサイズの下の「サムネイルを実寸法にトリミングする」にはチェックを入れておくとサムネイルが全部均一
CSSや画像の命名規則について - kojika17
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説 | コリス
floatを使うと思った通りにならず、下に落ちてしまう、幅に収まらないなど、CSS初心者がつまづきやすい問題を解決するポイントを解説したチュートリアルを紹介します。 How Floating Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 floatのルール 1. フロート要素を親要素から見るとどうなるか 2. 左や右にフロートさせる 3. フロート要素が押し下げられてしまう原因 4. フロート要素の配置の順番 5. フロート要素の配置の優先順位 6. フロート要素で親要素を広げない フロートのクリア clearfix floatのルール floatプロパティには、4つの値があります。 .foo { float: left | right | inherit | none } この4つの値はそれぞれ、要素を親要素の中でどの
【CSS】Flexboxのプロパティ（justify-content、align-items、align-self、align-content）を紹介します
【CSS】Flexboxのプロパティ（justify-content、align-items、align-self、align-content）を紹介します こんにちは、WEBマーケティング部の杉尾です。 前回、前々回に引き続き、Flexboxのプロパティを紹介します。 前々回はコチラ ⇒【CSS】Flexboxのプロパティ（flex-direction、flex-wrap、flex-flow、order）を紹介します 前回はコチラ ⇒【CSS】Flexboxのプロパティ（flex-grow、flex-shrink、flex-basis、flex）を紹介します はじめに ※FlexboxはIE9以下に対応していません。 ※IE10への対応はこの記事では割愛します。 ※PC版safari(バージョン6.1以降)対応用にベンダープレフィックスを使用しています。 flexコンテナ、flexアイテ
CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
CSS「position:relative」と「position:absolute」で画像や文字を重ねる方法 - Naifix
CSS の position プロパティの使い方を覚えると、画像と画像を重ねる、画像と文字を重ねる、というのが簡単にできるようになります。 画像編集ツールで加工してもよいのですが、CSS で表現すると画像の上に表示されているテキストを検索エンジンが認識してくれるので SEO 効果が期待できる、というメリットがありますね。 それでは position:relative と position:absolute の使い方を見ていきましょう。 position プロパティの使い方基本 positon プロパティで聞いたことがあるのは「相対配置」と「絶対配置」という言葉だと思います。 何となくイメージはできるものの、検索して解説を読んでもイマイチわからず…という状態ではないでしょうか。 position プロパティで使える値をおさらいしておきましょう。 static
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
【CSS】CSS3 のメディアクエリをざっと紹介します IE8の対応法もアリ
こんにちは、WEBマーケティング部の杉尾です。 今回は、レスポンシブデザインのサイトを作るのに欠かせないCSS3 メディアクエリ（Media Queries）のお話です。 Bootstrapなどのフレームワークを使った場合は、当たり前のようにレスポンシブデザインになりますが、そういうものを使わずにレスポンシブなサイトを作る場合は必ず必要となってくる知識です。 また、それらを使う場合でも、ちょっとした改修やデザイン変更時に触ることがあるかもしれません。 是非とも覚えて、積極的に活用しましょう。 メディアクエリとは？ CSS3から導入された仕様の一つです。 よく使う指定として、「ウェブページの表示サイズがこれ以上の幅ならこういうスタイルを適用する」という指定ができます。 それ以外にも、 『表示サイズ、高さ』(height) 『画面の幅、高さ』(device-width、device-heigh
Google カレンダーの予定リマインダ ボタンの作成手順 － Google カレンダー
インタラクティブなカレンダーをウェブサイトに追加したり、ウェブサイトの訪問者がカレンダーの予定を保存するためのボタンを追加したりできます。 カレンダーをウェブサイトに埋め込む パソコンで Google カレンダーを開きます。ウェブサイトに埋め込むコードはパソコンでのみ生成できます。Google カレンダー アプリでは生成できません。 右上にある設定アイコン [設定] の順にクリックします。 画面左側で、埋め込むカレンダーの名前をクリックします。 [カレンダーの統合] セクションに表示されている iframe コードをコピーします。 埋め込みコードの下で、[カスタマイズ] をクリックします。 設定をカスタマイズしてから、表示されている HTML コードをコピーします。 埋め込んだカレンダーは、そのカレンダーを共有しているユーザーにのみ表示されます。すべての訪問者がカレンダーを閲覧できるよ
人気のHTML/CSSコードサンプル25＋おまけ2 from CodePen | co-jin
CodePenはHTML,CSS,JSのコードサンプル配布サイトです。 紹介されているコードの種類・クオリティがとても高く、参考にするには最適なサイトです。 今回はそんなCodePenの中から特に人気のあるコードサンプルをご紹介します。 「こんなのしてみたかった」というサンプルがあると思うので、参考にしてみてください。 また、ここで紹介しているサンプル以外にも、本家のサイトに行けば、新しい発見があると思いますよ。 見ているだけで純粋に楽しいです。 CSS3だけでパララックス効果を表現した Parallax Landscape CSS3だけでパララックス効果を表現しています。 Parallax Landscape ページ遷移がなめらかな CSS-Only Responsive Layout with Smooth Transitions ページ遷移がなめらかなで、しかもレスポンシブ。 CSS
clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix
米Yahoo!のフロントエンド エンジニア: Thierry Koblentz氏から、シンプルなスタイルシートで書かれたモダンブラウザ用のclearfix最新版を紹介します。 The very latest clearfix reloaded clearfixとは おさらい: micro clerafix(IE6+) モダンブラウザ用のclearfix最新版 clearfixとは 「clearfix」とはフロートした要素が親要素からはみ出してしまう、親要素の背景が表示されないなどを回避するもので、当サイトでもいくつか紹介してきました。 おさらい: micro clerafix(IE6+) まずは、おさらい。 micro clearfixは、normalize.cssのNicolas Gallagher氏によるもので、2011年にリリースされました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ideahacker.net/2014/02/18/7744/
CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture