「みんなの翻訳」は、世界中の文書をみんなで協力して翻訳するサイトです。

みんなの翻訳ロゴ
ブクタブ
翻訳サイト

カテゴリ一覧

このサイトについて 新規登録はこちら お試し翻訳

一覧

2017/07/28

メンテナンス終了のお知らせ

2017/7/25-2017/7/28に実施したメンテナンスは、2017/7/28/14:20に終了いたしました。 ご協力をいただき、ありが…

List

Hnoss

English⇒Japanese

shikimi

English⇒Japanese

sysInfo

English⇒Japanese

tkkobe

English⇒Japanese

ホーム > 翻訳記事

翻訳記事

ウェブデザイン・テンプレート | オープンソースなボイラープレート3つ紹介 | from opensource.com

 ウェブデザインの世界にも、「テンプレート」というものが存在します。
 これを使えば、先進的なコードベースを設計することも、難しくはありません。
 あなたのウェブページを1段階グレードアップするのにお役立てください。

2017年4月13日 投稿

Jason Baker (Red Hat)
イメージ画像: Jason Baker for Opensource.com. 
 

  かつて、ウェブサイトは0から1つ1つ作り上げていくものでしたが、現在はちがいます。

  HTMLの基本と、CSSの知識が少しあれば、ちょっとの手間で機能的なウェブページを作成することは十分に可能です。
  あなたのウェブサーバーをさらにパワーアップする、そんなソフトのうち「おすすめ」を3つご紹介ます。

<html>
 <
head>
  <
title>My awesome webpage</title>
 </
head>
 <
body>
  <
h1>This site is awesome!</h1>
  <
p>And I coded it from scratch.</p>
</
body>

  ウェブページのコードといえば、勿論こんな感じですよね。でも、「ここからちょっと脱出したい」というのが今回のテーマです。

  インターネットを使う側にとっては、「もっと速く」「ブラウザに関わらず、コンテンツが充実していてほしい」というのが本音です。
  ですが、その願いに反するかのように、サイトのサイズは肥大化し、複雑さは増していくばかり。
  普通にHTMLとCSSを使ってサイトを作るには、熟達した技術と経験が求められます。そのうえに、ちょっとした追加機能を維持するだけでも、デザインツールやコードエディタなどが必要です。
 

  なので、今日ではそのような方法でウェブページを作成している人は逆にいません。大抵の場合、プレビルド・テンプレートや、コンテンツ・マネジメント・システムをどこからか工面しています。
  ましてウェブアプリ開発などは、そのほとんどをテンプレート・ライブラリに依存しています。
 

  ですが、
 
新しいテンプレートをコンテンツ・マネジメント・システムや静的サイト・ジェネレータにビルドしたい
シングルランディングページを使ってもっと単純なサイトを作りたい
変更の必要がめったになく、ページ数もあまりいらない静的サイトを作る予定なのだが…
作成したJavaScriptアプリケーションに、どうにも必要のないフレームワークやライブラリが、最終アウトプットの時にビルドされている…

  などのように、そのテンプレートでも、完璧に対応できているとは言い難い状況もあります。

 テンプレートに融通が利かないばっかりに、ウェブページのロード時間が長引いたり、開発に要らない手間がかかっていませんか。
 きれいなフォントを入れるのを、いつの間にかあきらめてはいませんか。
 これから需要が伸びそうな obese の導入に二の足を踏んでいませんか。
 jQueryや Vanilla JSを部分的に使いたくても、使えていますか。
 SVGに軽く苦手意識を持っていませんか。
 

  これはHTMLだけに限った話ではありません。
 ウェブの外観を指定するために、何度も同じcss設定を行っている人もまだいらっしゃるでしょう。
 ページごとに違うデザインが必要なら、いっそ SassLess を使った方が合理的って、わかっちゃいても実際に使えていますか。
 

  ですが、「テンプレート」そのものが悪いわけではありません。
  要は「どんなテンプレート」を選ぶかが大切なのです。

  そこで、紹介しますのは、「HTMLボイラープレート」というテンプレートです。
  これはいろいろと良いとこ取りをしたようなフレームワークなのです。
  開発の手法をある程度統一し、レイアウトの設定を簡略化できます。
  ウェブページにちょっと凝った機能を載せることもできるのに、
  実際に使っていて物凄い煩雑さというものを感じさせません。
 

  あなたの明日のウェブプロジェクトのために、
  今すぐにでも使える「HTML5 テンプレート」を3つご紹介しましょう。
 

 Bootstrap

   これはツイッターが開発を手掛けていることでも有名なテンプレートです。ボイラープレートではもっとも有名なうちに入るでしょう。
  カスタマイズされていない処理を徹底管理することで、首尾一貫したシンプルさを確保しています。これにより、大幅に効率化したウェブプロジェクトもたくさんあります。

  しかし、使いすぎは禁物です。それどころか、かえって不便になったという声もあります。
  Bootstrapは様々な機能をすぐさま載せられるというところが強みです。たとえば、アイコンをスタイルとしてインプットしたり、一般的なページ要素(パンくずリストなど)を入れることが簡単です。
  テーマのプリセットも大量に用意されていて、サイトのデザインを一から作り出す必要がありません。

   MIT licenseのもとにGitHubで公開されています。
 

 HTML5 Boilerplate

  筆者は、個人的にはこれが好みですね。
 というのも、分析が細やかで、デフォルトのCSSやJavaScriptテンプレートが効率的。そして何といっても様々なアイコンサイズが選べることろがいい。
  自分のやってみたいところが何でも入っていました。
 

  なおかつ、とても軽量で、これといってプロジェクトの構成を気にしなくても、作業をどんどんと進められました。
  ミニマリストだけど、機能的なのも大好きという人に、HTML5 Boilerplateはぴったりかもしれません。

  これも MIT licenseのもとに GitHubで公開されています。
 

  Skeleton

  Skeletonは、bunchが提供している最も軽量なフレームワークです。400行前後のコードで、十分な機能を果たすのだから驚き。
  これまでのウェブ・フレームワークはあまりにも膨大になるか、さもなくば機能が切られ過ぎていたところを、Skeletonはほんとうに適切な骨組みを作ってくれます。
  シンプルなグリッド、良質な書式付き形式、リスト、テーブル、タイポグラフィ、基本的な構成要素、クロスブラウザを満たした開発を行えます。使いこなせば素晴らしい味方になるでしょう。

  これも MIT licenseのもとにGitHubで公開されています。
 

  さて、どれを選びましょう?

  私は、全部比較してみることをお勧めします。なにせ、次のプロジェクトがかかっていることですから。
  いくつか機能を試してみて、自分のニーズに最も合ったものを選びましょう。3つのうちどれも気に入らなかったとしたら…こちらのページに他の選択肢が書いてあります。
  もし、ウェブページの作成に何やら時間がかかり過ぎているようなら、今使っているテンプレートを疑ってみてください。
  シンプルなフロントエンドをビルドしたいなら、古典的であってもきちんとした情報ページを作りたいのなら、ウェブアプリをちょっとでも軽量化したいのなら、JavaScript フレームワークは必需品です。
 

  Initializrもぜひチェックしてください。これはHTML5ボイラープレートをプレ・コンフィギュアできるオープンソース・ウェブアプリです。クラシックなページ、レスポンシブなページ、Bootstrapに対応しています。

  みなさんは、どんなテンプレートやフレームワークがお好きですか?  ウェブデザインも切り口を変えれば、案外とすごいものができるかもしれません。
  皆さんのコメントをお待ちしています。(原文サイト)



[ みんなの翻訳内 ]
もっと「おすすめ オープンソース・ソフトウェア」を見る

 

PDF
更新日:2017-07-29 13:59:43 Hnoss 0  del.icio.usに追加   はてなブックマークに追加   twitterに投稿   facebookでshare
[ 原文 ] https://opensource.com/article/17/4/boilerplate-web-design-templates Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス
翻訳者ページをみる

この記事の翻訳者

Hnoss さんの翻訳記事

【GitLab Pages 公式 を訳してみた】GitLab Pages 説明書 

GitLab Documentation > User documentation > Projects >GitLab Pages 説明書  GitLabには「GitLab Pages」という機能があります。  GitLab…2017-09-23 12:10:55

SSGを知る②:最近の静的サイト・ジェネレータ事情 | from about GitLab.com

 引き続き、静的サイト・ジェネレータ特集です。  前回は、「静的サイトとは何か」というような内容で終わってしまいましたが、いよいよ本題です。  静的サイト・ジェネレータって…2017-09-23 11:58:35

SSGを知る①:静的 vs 動的 ウェブサイト | about GitLab.com

 ウェブサイトは静的なものと、動的なもの2つに分かれますが、それらにはどのような違いがあって、どのような長所があるのでしょう。  GitLab Pagesで扱えるのはどっちだろう?  静…2017-09-23 11:23:00

【GitLab Pages 公式 を訳してみた】GitLab Pages のこと全部教えます!①

GitLab Documentation > User documentation > Projects > GitLab Pages 説明書 >GitLab Pages のこと全部教えます!① 記事の 種類 : 取扱説明書 || 対象 : 初心者 || …2017-09-23 11:17:34