第1回 今どきのWebサイト制作にはBootstrapがおすすめ！ | gihyo.jp
本連載では、HTML5やCSSの基礎を理解している方へ向けて、Bootstrapの特徴や実際の使い方を解説していきます。レスポンシブデザインは聞いたことがあるけれども「実務採用したことがない」「仕方がわからない！」という方。そんな「あなた」が1つ上のステージへ進むためのパスポートです。Bootstrapを使うことで簡単にレスポンシブサイトを制作できるようになります。 「スマホ専用サイトは使いづらい！予算が掛かる」は古い 昨年頃からスマホ専用サイトの「必要説」が揺らいでいます。その背景には、従来のPCサイト用のデータから必要最低限のデータを抽出した形で、全く別サイトとしてスマホ専用サイトが設計されているため、「UIが変わりすぎてわからない」「情報量が少ないなどの欠点が目立ちユーザーに受け入れらない」といった状況があるからです。 参考資料： 8割以上が「スマートフォン専用サイト不要」と回
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
Bootstrap
BootstrapBootstrap v5.3 (switch to other versions) v5 releases Latest (5.3.x) v5.2.3 v5.1.3 v5.0.2 Previous releases v4.6.x v3.4.1 v2.3.2 All versions Get Security Updates for Bootstrap 3 & 4 Build fast, responsive sites with Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life w
トップページ
クレイはwebシステムの会社です。「お客様も含めたみんなで考え、みんなで作り、みんなで価値を生み出す」ことを大切にしています。 そんなクレイの3つの強みについてご紹介します。
Yumemi 狐 | とある大学生のWebポートフォリオ
こちらは、とある情報系大学生によるWebポートフォリオになります。個人または学校の授業で制作したデジタル作品、徒然なるままに思いついたことを綴るブログなどを順次掲載していきます。このサイトについて こちらは、とある情報系大学生によるWebポートフォリオになります。個人または学校の授業で制作したデジタル作品、徒然なるままに思いついたことを綴るブログなどを順次掲載していきます。 私について デザインやプログラミングを中心に勉強しています。好きな食べ物は、プレーンヨーグルト、漬け物、ラーメン、つけ麺などなど。カフェでのんびりするのが嗜好。 勉強中のスキル HTML5 / CSS3 / jQuery / JavaScript / PHP / WordPress / Photoshop CC / Illustrator CC / Flash CC / Dreamweaver CC / Coda
手になじむブログ環境を作った - 俺式4.0 Blog
手になじむブログ環境を作った いまさらブログ構築 中くらいのアウトプット を書き留める場所が必要だった。 すでに僕は 自分のサイト を持っていたが、こいつは自分のポートフォリオとして機能するように、 ある程度完成したものしか置きたくなかった。 ちょっと思い立って、でも刹那とは言えない程度には考えたことを書き留めておけるように、 僕はこのブログを作った。Twitter や Tumblr では僕の要件を満たさなかったから。 プログラマ特化の心地よさ このブログは Markdown で本文を書いて、事前にサイト全体を生成したものを公開している。 僕はプログラマだが、プログラマが自分好みのブログの制作環境を整えるってのは、 少し前から密かに流行っているように思う。 大抵はテキストファイルに Markdown 記法で文章を書いて、ジェネレータでサイト全体を生成する。 ジェネレータは、Jekyll や
Hamlで開発効率アップ｜Sublime text 2でビルドしてみました。 | DevelopersIO
先日、弊社で開催ししている勉強会:【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」のスピーカーを務めさせていただきました。 人生初のスピーカーということで、緊張して時間を10分巻いてしまいました。。。 さて今回はHaml with Sublime text 2と題しまして、ご紹介できればと思います。 アジェンダ Hamlとは？ Hamlの書き方 Sublime text 2でビルド(ファイル出力) おまけ Hamlとは？ XHTML Abstraction Markup Languageの略称です。 と言われましてもなんのことだ？？ってなるかと思います。 日本Hamlの会というユーザーグループで以下のように、説明しれくれてます。 HamlはHTML/XHTMLを生成するためのマークアップ言語です。インデントや簡略構文によって簡潔な記述
[ Middleman で超速プロトタイピング ] #00 Haml 再入門 | DevelopersIO
Web アプリケーション開発の初期段階においては、そのアプリのモックアップをよく作ったりします。いわゆるプロトタイピングというヤツですね。本実装となるともちろんサーバーサイドは Java や PHP などで実装し、それに伴ってフロントエンドもそれらのプログラミング言語によるテンプレートエンジンをベースに HTML で作り上げる訳です。しかしプロトタイピングの段階ではそういったプログラミング言語に頼ることなく、HTML だけで一通りの静的な Web ページを作ることになります。 実はこのモックアップ作成という名のプロトタイピング、HTML だけで作るという理由からかなりの重労働だったりします。画面数の少ない小規模な Web アプリケーションであればどうってことないですが、業務系の Web アプリケーションとなると10画面、20画面は当たり前。時には40画面以上にも及ぶことも少なくありません。
マークアッパー的 Haml入門21の手引き - Web学び
2012年 4月 11日 HamlはHTMLを効率的に生成するための記法です。 むずかしいと思っている方も多そうなので、かいつまんでシンプルにまとめてみました。 Hamlを使えるようにする Macの場合は アプリケーション＞ユーティリティ＞ターミナルを開きます。 開いてすぐの位置に次の一行を入力します。 gem install haml 処理が数分ほどかかります。ターミナルはそのままにしてください。 HamlファイルをHTMLに変換する まずは書いたコードがどのようにHTMLとなるのか確認できるようにしましょう。 試しにデスクトップにtest.hamlというファイルを作ります。 HamlをHTMLにするため、先ほどのターミナルを開きます。ファイルを置いた階層までcdで移動します。 cd desktop これを入力しEnter(return)キーを押して haml test.haml tes
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
スタイルシートリファレンス（目的別）
font …… フォントに関する指定をまとめて行う font-style …… フォントをイタリック体・斜体にする font-variant …… フォントをスモールキャップにする font-weight …… フォントの太さを指定する font-size …… フォントのサイズを指定する font-family …… フォントの種類を指定する font-size-adjust …… フォントのサイズを調整する font-stretch …… フォントを縦長・横長にする line-height …… 行の高さを指定する text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する text-justify …… 均等割付の形式を指定する vertical-align …… 縦方向の揃え位置を指定する text-decoration …… テキストの線・色・スタイルをまと
CSS3リファレンス
背景 background-clip …… 背景の適用範囲を指定する background-origin …… 背景の基準位置を指定する background-size …… 背景画像のサイズを指定する 角丸 border-radius …… 角丸をまとめて指定する border-top-left-radius …… 左上の角丸を指定する border-top-right-radius …… 右上の角丸を指定する border-bottom-left-radius …… 左下の角丸を指定する border-bottom-right-radius …… 右下の角丸を指定する 画像ボーダー border-image …… 画像ボーダーを指定する border-image-source …… 画像ボーダーに使用する画像ファイルを指定する border-image-slice …… ボーダー画像の
図解DTP用語辞典
その位置で強制改行していることを表すコード。画面上にはなどのマークとして現れる。文字コードのひとつとして入っている。MacとWindowsマシンでは改行コードが異なる。MacではCRコードが、Windows（MS-DOS）ではCRコードとLFコードが2個1組で、改行を表している。さらにUNIXではLFのみで強制改行を実行する。CR（Carriage Return）とはタイプライターやプリンターのヘッドを左端に戻す動作で、LF（Line Feed）は紙を1行分送る動作のことだった。現在では単なる制御コードにすぎない。 改行コードの違い 日本語組版でいう改行は、行を改めて次の行の初めから文字を組み始めることである。しかし欧文組版では、タイプライターの操作メカニズムの制約から日本語の改行に当たる操作は２段階に分かれ、コンピュータの制御文字でも同様の概念を使っている。 日本語でふつうに「改行」
Strikingly - あなただけのウェブサイトを制作するための、最高のウェブビルダー
数分でウェブサイトを制作する ブランドを確立。世界を制覇。 コードはなし 、デザインのスキルも必要ありません。
Twitter Bootstrap 3 でアイコンを使う方法 | 餃子マナー
とすれば Home という感じでアイコン付きボタンを表示することができます。 Bootstrap 3 ではこの書き方ではアイコンが表示されなくなったようです。現在 Bootstrap 3 は RC2 というバージョンですが、RC = Release Candidate（リリース候補）なのできっと正式版でもこの仕様は変わらないんじゃないでしょうか。 Bootstrap 3 でアイコンを使う すでに Bootstrap 3 をダウンロードしてある前提で進めます。 Bootstrap 3 をダウンロードすると下図のようにいろいろなファイルが入っていますが、使うときに必要なのは dist フォルダの中の css と js フォルダだけです。 アイコンリソースの準備 ドキュメントに書いてある部分を引用すると、 Glyphicons With the launch of Bootstrap 3, ic
Web制作会社だからできる技術的SEO
検索エンジンに強いWebサイトを作ることがとても大事だ、ということを否定する制作会社はないと思いますが、実際にWebサイトを作っている（デザイナーやプログラマーといった）人たちの大半は、SEOを自分の仕事だと思っていませんw。 それどころか、どちらかというとSEOという言葉にネガティブな印象さえ持っています。多分その人は、正しいhtmlを書く、ちゃんとしたマークアップエンジニアでしょう。そう、きっと仕事ができるいい人です。じゃなんでそうなっちゃったのか。思うに、 一つ、制作現場がやるSEO対策（いわゆる内部施策）は小手先のチップスが多く、いびつなリンク一覧の設置やら隠しテキストやら大量のキーワードの埋め込みやらで、とても正しい事とは思えないから正直やりたくない。 もう一つ、モノを作る事が得意な人とモノを売る事が得意な人の脳みそは明らかに違っていて、「良くしたい」という思いは同じでも、大事に
レスポンシブWebデザインにおけるコーダーの役割 World of granshe.
先日、Twitterで 『レスポンシブWebデザインをする際に、ナビゲーションなどをPC用とSP用の2種類、HTML内に書いて、出し分けることがあるようだ』 というようなことをつぶやいたのですが、自分では思ってもいないところでリツイートされました。 自分はちょっとした愚痴のつもりで書いたのですが、これはもうちょっと深く考えるべき問題なのかもしれない。と感じ、 自分なりにもうちょっと考察して、人と話して、自分なりの答えが見つかったので書いてみます。 私の周辺では、レスポンシブWebデザイン（以下、RWD）の案件をやるとき、「PC用」「スマホ用」2種類のデザインをお客さんに提出し、それをベースにコーディングすることが多いです。 PCサイトとスマートフォン最適化サイトを両方作るのと同じような手法です。 いわゆる「スマートフォン最適化」では、PCとスマホ用のHTMLは別で作れますので、デザイン上の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
トラブルシューティングメモ | Timeline - 俺式4.0 tkDocs
Home - 俺式4.0 Blog
ダウンロードページ