CodeZine(コードジン)

特集ページ一覧

「HTML5/CSS3」に関する記事

79件中41~60件を表示
  • 7876_t.gif
    2014/07/22

    Webアプリをあっという間にカッコよく! BootstrapによるレスポンシブWebレイアウト

     本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってかっこいい画面を作成する方法をご紹介します。「プログラミングは好きだけど、デザインセンスに自信がない……」や「スマートフォンやタブレットでもきちんとレイアウトされたアプリを簡単に作りたい!」などを実現してくれる便利なBootstrapの使い方を、サンプルコードを交えて説明します。

  • 7844_t.gif
    2014/07/17

    デザインサンプルで学ぶCSSによるスタイリング~「テーブル(ハイライト表示/縦列のスタイリング)」編

     本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。今回は、前回に引き続き、テーブルをCSSでスタイリングする方法を紹介します。

  • iOS8.png
    2014/06/23

    ハイブリッドアプリの動作性能を飛躍的にアップさせるiOS 8の新ブラウザエンジンを検証する

     毎年この時期は、米アップルが開催する年次イベント「WWDC」の話題一色になります。今年はMac OS Xの新バージョン「Yosemite」が、同時に発表された「iOS 8」よりも大きな話題をさらっている印象ですが、実はiOS 8の中に、HTML5でネイティブアプリを開発する、いわゆる「ハイブリッドアプリ」の実行速度を飛躍的に高める取り組みが行われています。本記事では、NDAに抵触しない範囲で、その詳細を説明したいと思います。

  • 7789_t.gif
    2014/06/04

    デザインサンプルで学ぶCSSによるスタイリング~「テーブル(セルのボーダーの表示形式によるスタイリング)」編

     本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。今回は、テーブルをCSSでスタイリングする方法を紹介します。

  • 7772_t.gif
    2014/05/27

    CSSフレームワーク「Compass」の基礎

     本連載では、CSSの拡張言語であるSassの導入と、Sassを利用したメジャーなCSSフレームワークの一つであるCompassの導入をサンプルを交えて紹介し、最終的には実際にオイシックスで利用しているCSSをSassで書き直した際の実例をご紹介します。第3回目はCompassの基礎部分を紹介します。

  • 7722_t.gif
    2014/05/07

    デザインサンプルで学ぶCSSによるスタイリング~「リスト」編

     本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。今回は、CSSでリストをスタイリングする方法を紹介します。リストマーカーのスタイリングをはじめ、リストを横並びに配置する方法など、実務でよく使われるテクニックを中心に紹介します。

  • 2014/04/07

    CSSを効率よく記述する「Sass」の主な機能

     CompassはSassを拡張したツール集で、CSSのフレームワークといわれています。大手企業でも導入されていて、オイシックスでもデザイナーを中心に導入したいという声が上がっていました。本連載ではSassの導入から始めて、Compassの実践までご紹介します。第2回目はSassの実践部分を解説します。

  • 7681_t.gif
    2014/04/03

    デザインサンプルで学ぶCSSによるスタイリング~「見出し」編

     本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。

  • 7522_t.gif
    2013/12/12

    CSS拡張メタ言語「Sass」の概要と導入手順

     本連載では、CSSの拡張言語であるSassの導入と、Sassを利用したメジャーなCSSフレームワークの1つであるCompassの導入をサンプルを交えて紹介し、最終的には実際にオイシックスで利用しているCSSをSassで書き直した際の実例をご紹介します。

  • 7361_t.gif
    2013/09/05

    HTML5対応チャートコンポーネントを利用したデータ視覚化入門 その2 - さまざまな機能を使って利用者にわかりやすくデータを提示しよう

     前回は、HTML5、jQueryを利用し実現するigDataChartにデータを表示させました。今回は追加の機能を利用し、よりユーザーにとっての使い勝手やデータの視認性を高めるように設定しましょう。

  • 7320_t.gif
    2013/08/22

    HTML5対応チャートコンポーネントを利用したデータ視覚化入門 その1 - チャートを表示させよう

     データを分かりやすく視覚化するポピュラーな手段として、最も利用される方法の一つにチャートがあります。膨大な数字の羅列では相関関係が分かりにくい場合でも、領域やバーの高さで素早く判断を行うことが可能で、報告や説明といった業務では特に多く利用されています。今回は、HTML5対応コンポーネントスイートであるIgnite UIに含まれているigDataChartを利用し表示する方法を紹介します。

  • 7210_t.gif
    2013/06/25

    「three.js」でつくるお手軽3Dマンガ作成ソフト - 後編

     「HTML5」+「JavaScript」+「WebGL」で作成した、お手軽マンガ作成Webアプリ「箱人形マンガ(Box Comic)」の開発で利用した「three.js」の使い方と、マンガ作成ソフトでの使用例を、コードを元に紹介していきます。今回は、集中線やフキダシや箱人形の作成、そしてそれらをまとめて、オブジェクトや部品をマウスで操作するサンプルを作成して解説します。

  • 7209_t.gif
    2013/06/24

    「three.js」でつくるお手軽3Dマンガ作成ソフト - 中編

     「HTML5」+「JavaScript」+「WebGL」で作成した、お手軽マンガ作成Webアプリ「箱人形マンガ(Box Comic)」の開発で利用した「three.js」の使い方と、マンガ作成ソフトでの使用例を、コードを元に紹介していきます。今回は、3Dオブジェクトをマウスで操作する方法について触れていきます。

  • 7208_t.gif
    2013/06/21

    「three.js」でつくるお手軽3Dマンガ作成ソフト - 前編

     「HTML5」+「JavaScript」+「WebGL」で作成した、お手軽マンガ作成Webアプリ「箱人形マンガ(Box Comic)」の開発で利用した「three.js」の使い方と、マンガ作成ソフトでの使用例を、コードを元に紹介していきます。今回は、立方体と板ポリゴンの表示、そして画像や「Canvas」をテクスチャとして利用する方法を紹介します。

  • 6949_t.gif
    2013/01/23

    CSS Filter Effectsを編集できるブラウザベースのツール「CSS FilterLab」

     2011年10月、アドビは、Webに映画のようなエフェクトを実現するための方法としてCSS Shadersを提案しました。彩度、ガンマ、焼き込み、フォールド、カールから、ディゾルブやエクスプロードなどのエフェクトを、CSSによって通常のHTML要素に適用することができるというものでした。この提案が進化しました。オープンな議論、更新が行われ、CSS Filter Effects仕様に融合されました。現在、一般的なブラウザーで使用できるようにするための作業が進められています。CSS Shaders...

  • 6875_t.gif
    2012/11/26

    Adobe Edge Animateを触ってみよう!

     Adobe Edge Animateは、初心者でもこれまでFlashやAfter Effectsを扱っていた人でも使いやすいソフトウェアです。その機能の紹介と、具体的な作り方について解説します。

  • 6861_t.jpg
    2012/11/15

    【ADC MEETUP 06】Webとアドビの切っても切れない関係

     『ADC MEETUP Round 06「CREATE THE WEB TOUR』は、9/24のサンフランシスコ開催を皮切りに行われているワールドツアーの一環として東京で開催されました。CREATE THE WEB TOURではWeb技術に関連するアドビ システムズの新しいツールとサービスが紹介されています。ここではその基調講演の様子をレポートします。

  • title.gif
    2012/07/06

    Facebookモバイルアプリの開発方法

     本連載では、広告・マーケティング業界で、「iPhone・Androidのネイティブアプリの次にくるデジタルトレンド」として注目を集める分野「Facebookモバイルアプリ」について紹介します。第3回の本記事では、いよいよFacebookモバイルアプリの開発手順について解説していきます。

  • title.gif
    2012/05/31

    Facebookモバイルアプリの企画方法

     本連載では、広告・マーケティング業界でiPhone・Androidのネイティブアプリの次にくるデジタルトレンドとして注目を集めている「Facebookモバイルアプリ」について紹介します。今回は、Facebookモバイルアプリの「企画方法」に着目します。

  • title.gif
    2012/05/16

    サンプルで学ぶDreamweaver CS6!「レスポンシブWebデザイン」に挑戦してみよう

     バージョン5以降より、HTML5、CSS3、スマートフォンをはじめとする最近のサイト制作に必要な新しいスキルの支援機能に力を入れているDreamweaver。最新のDreamweaver CS6では、デバイスやブラウザウィンドウの横幅に応じてレイアウトが変更されるレスポンシブWebデザインを実現する「可変グリッドレイアウト」機能が目玉です。本稿では「可変グリッドレイアウト」「CSSトランジション」など、Dreamweaver CS6の新機能を使うワークフローを、サンプルを作成しながら紹介してい...

79件中41~60件を表示
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5