CodeZine(コードジン)

特集ページ一覧

HTML5/CSS3に関する記事とニュース

73件中21~40件を表示
  • 8350_thumb.gif
    2015/01/05

    Bootstrapで画像をアルバムみたいにカッコよく表示しよう

     本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってかっこいい画面を作成する方法をご紹介します。前回は、モーダルダイアログ、ドロップダウン、プログレスバーや、ユーザの可視性を高めるためのパンくずリスト/ラベル/バッジなどを説明しました。今回は、アルバムなどでよく使われている、画像を左右にスライドさせて表示するカルーセルパネルや、モーダルダイアログなどをご紹介します。

  • 8270_thumb.gif
    2014/12/02

    Bootstrapのモーダルダイアログやプログレスバーを使ってユーザーにやさしいWebアプリにしよう

     本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってかっこいい画面を作成する方法をご紹介します。前回の記事では、雑多になりがちな業務アプリケーションのコンテンツを分かりやすく伝えるためのリスト/パネル/タブを説明しました。今回は、モーダルダイアログ、ドロップダウン、プログレスバーや、ユーザの可視性を高めるためのパンくずリスト/ラベル/バッジなどを説明します。

  • 8239_thumb.gif
    2014/11/19

    デザインサンプルで学ぶCSSによるスタイリング~「floatプロパティによるレイアウト」編

     本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。本記事では、実務でよく使われるテクニックとして、floatプロパティによるレイアウト方法を紹介します。

  • 8223_thumb.gif
    2014/11/05

    Bootstrapでリスト/パネル/タブ使って情報をすっきり整理しよう

     本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってかっこいい画面を作成する方法をご紹介します。前回は、業務アプリケーションのメニュー作成にかかせないナビゲーションバーを説明しました。メニューを作ることで、業務アプリケーションがもつ機能を一目瞭然で整理できるため、ユーザの操作ミスや分かりにくさを減らすことができたと思います。業務アプリケーションは機能だけでなく、表示する情報も多く複雑で、雑多になりがちです。今回は...

  • 8182_thumb.gif
    2014/10/21

    Bootstrapでカッコいいナビゲーションバーを表示しよう

     本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってカッコいい画面を作成する方法をご紹介します。前回は、業務アプリケーションで表示するさまざまな情報やデータをわかりやすく表示するための文字/テーブル/ページネーション/アラートなどのUIコントロールについて説明しました。今回は、複数ページにわたる業務アプリケーションを作るうえで欠かせないナビゲーションバーを説明します。

  • 8145_thumb.gif
    2014/10/06

    Bootstrapホスティングサービス「Bootstrap CDN」の使い方と、Webサイトの基本パーツの実装

     CSSフレームワーク「Bootstrap」のホスティングサービス「Bootstrap CDN」を使えば、ファイル一式をダウンロードすることなく、すぐにカッコイイWebサイトを作ることができます。本記事では、「Bootstrap CDN」を利用したWebサイト制作と、Webサイトを見やすくするためのタブ表示、アコーディオン表示、ポップオーバー表示の実装方法をご紹介します。

  • 8098_t.gif
    2014/10/03

    デザインサンプルで学ぶCSSによるスタイリング~「フォーム(お問い合わせフォーム)」編

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

  • 8018_t.gif
    2014/09/29

    WebRTC(PeerJS)で遠隔作業支援システムを作る(実装編2)

     本連載ではTIS株式会社が提供している技術ブログ「Tech-Sketch」から「コレは!」というテーマをピックアップし、加筆修正して皆様にお届けしております。今回はPeerJSを用いた「ブラウザ上で動作する遠隔作業支援システム」の後半部分(スマートグラスと監視端末のブラウザ間をP2P接続し、映像や音声、データを双方向に交換する部分)を取り上げます。

  • 8017_t.gif
    2014/09/26

    WebRTC(PeerJS)で遠隔作業支援システムを作る(実装編1)

     本連載ではTIS株式会社が提供している技術ブログ「Tech-Sketch」から「コレは!」というテーマをピックアップし、加筆修正して皆様にお届けしております。今回はPeerJSを用いた「ブラウザ上で動作する遠隔作業支援システム」の前半部分(モジュールの全体構成と初期化処理)を、実装編1として取り上げます。

  • 8016_t.gif
    2014/09/25

    WebRTC(PeerJS)で遠隔作業支援システムを作る(基礎知識編)

     本連載ではTIS株式会社が提供している技術ブログ「Tech-Sketch」から「コレは!」というテーマをピックアップし、加筆修正して皆様にお届けしております。今回は「ブラウザ上で動作する遠隔作業支援システム」の構築を念頭に、WebRTCの基礎知識とPeerJSを利用するための環境準備について取り上げます。

  • 8072_t.gif
    2014/09/24

    Bootstrapで文字や表などをカッコよく表示しよう

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

  • 7972_t.gif
    2014/08/22

    デザインサンプルで学ぶCSSによるスタイリング~「フォーム(ラジオボタン・チェックボックス・セレクトフォーム)」編

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

  • 7954_t.gif
    2014/08/08

    Bootstrapで業務Webアプリのカッコいい入力フォームを作る

     本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってカッコいい画面を作成する方法をご紹介します。前回は、CSSフレームワークであるBootstrapの概要についてご紹介しました。また、WebアプリでさまざまなUIコントロールを配置するためのグリッドシステムについて説明しました。今回は、業務アプリケーションに欠かせない、データ登録画面や一覧表示画面など使う入力フォームやボタン/テーブルなどのUIコントロールについて...

  • 7888_t.gif
    2014/07/28

    デザインサンプルで学ぶCSSによるスタイリング~「フォーム(検索ボックス)」編

     本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。本記事では、HTML5で追加されるフォーム関連の機能を一部抜粋して紹介し、それらをスタイリングするコツを紹介します。今回は検索ボックスのサンプルを3つ紹介します。

  • 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でリストをスタイリングする方法を紹介します。リストマーカーのスタイリングをはじめ、リストを横並びに配置する方法など、実務でよく使われるテクニックを中心に紹介します。

73件中21~40件を表示
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5