※ Jekyllの最新内容を知りたい場合は 本家サイト(jekyllrb.com) を参照してください。翻訳に関する質問/要望は本家ではなく jekyllrb-jaのIssues へお願いします。
![Jekyll • シンプルで、ブログのような、静的サイト](https://cdn-ak-scissors.b.st-hatena.com/image/square/b1effcd3c2350b516d6cac1de0c3f0e7b782e317/height=288;version=1;width=512/http%3A%2F%2Fjekyllrb-ja.github.io%2Fimg%2Fjekyll-og.png)
用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。 MVP.css MVP.css -GitHub MVP.cssの特徴 MVP.cssのデモ MVP.cssの使い方 MVP.cssの特徴 MVP.cssはHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。 用意するのは、HTMLだけ MVP.cssはHTMLの各要素にス
2017年のウェブデザイントレンドをうまく反映したかっこいいウェブサイトや、アニメーションなど素敵なエフェクトを採用したランディングページなど、HTML5/CSS3で制作された無料テンプレート素材をまとめてご紹介します。 デザインの現場でも人気の高いBootstrapフレームワークをベースとしたテンプレートも多く、自由にそして手軽にHTMLテンプレートのカスタマイズを行うことができる素材が揃います。どれもスクリーン画面サイズに関係なく表示できるレスポンシブデザインを採用しており、さくっとウェブページを作成したいときの参考にもどうぞ。 Bootstrap 対応!2017年最新の無料HTMLテンプレート上半期まとめ レスポンシブ対応で無料!ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Wired
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
What is Brick? Brick is a bundle of reusable UI components created with x-tags to enable rapid development of cross-browser and mobile-friendly HTML5 web applications. Brick adds custom HTML tags- allowing developers to express the structure of an application in a clearer, more concise manner. What are Web Components? Web Components is a series of emerging W3C standards that allow developers to de
どうも。 書くのが遅くなりすぎてもう半月ほども前のことになってすごく今更感があるのですが、書いておくべきことを書きそびれると、その後出てくる他の書きたい小ネタがどんどん書けなくなっていってドンづまるパターンになるので、やはり書いておきますね。。 先日、第一回 プログラマ向けデザイン勉強会というイベントで下記のスライド発表させていただきました。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck 反響の大きさに驚き!ありがとうございました。 実はあんまり発表自体は、盛り上がったという手応えがあまりなくて、一方で他の2人の発表が素晴らしすぎて、割としょんぼりしながら帰ってきたんですが、スライドをアップロードしたらあれよあれよという間に2000ブクマ超え…驚きました。読んで下さった皆様、ありがとうございました。何が原因だったのか考えてみたのですが、デザイン
webにあるHTML5の情報は英語のものが多い 当然のことですが、HTML5の情報は殆どが英語です。W3Cのサイトだって英語で書かれていますし、大抵の情報は英語さえ分かればアクセスできますね。 まあとはいえ、HTML5を勉強しようと考えるいきなり誰もが英語を読めなければならないとなるとちょっと難しいですよね。最初は先輩方の翻訳または日本語で書かれたオリジナルの文書から学びたい。そして情報の速度や判断の尺度のずれが気になってきてから、それから国外の情報で勉強しても遅くはないはずです。…そう思いたいですw HTML5に関する国内のサイトや情報源をまとめました と言う訳で、今回はwebcre8が認識しているHTML5に関する情報源やリソースサイト、参考になった記事、調べてたら出てきたものをざっくりとまとめてみます。サイト、ブログ記事、リファレンス、ツール等です。せっかくなので、知っているものは英
CSS Nite LP, Disk 23「表示速度最適化」 2012年6月30日、ベルサール九段下で「CSS Nite LP, Disk 23」が開催されました。CSS NiteはWeb制作に関わる方のためのセミナーイベントで、マークアップエンジニアやデザイナーの方が多く参加しています。今回のテーマは「表示速度最適化」でした。 パフォーマンス計測の方法、画像の最適化、モバイル向け最適化、そしてフロントエンドからバックエンドまでを考慮した設計段階からの最適化と、幅広いながらとても密度の濃い内容でした。 自己満足で終わらないためのパフォーマンス計測 サイバーエージェントの石本 光司(@t32k)さんから「Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 - 」というタイトルで、サイトの最適化を行う上で重要なパフォーマンスの計測手段や分析方法に
こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭
ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。 結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的にはfloatで解決すれば良いと思いますが、floatを使うと都合が悪くなる場合などもあると思うので(width指定とか、センタリングとか)、そんなときのためにどうぞ。 個人的にメモしておいたものを、WEBにUPして管理しておきたいという意味もあり、今回記事にしています。 元となるソース HTML <ul> <li>バナナ</li> <li>リンゴ</li> <li>ミカン</li> </ul> CSS ul { margin:0; padding:0; list-style:none; } ul li { display: inli
同社では、以前よりキャンペーンサイトや商品紹介サイトの開発を多く手掛けているが、近年ではそのサイト制作自体が、以前に比べて「動きのある、ゲーム的なWebアプリを作るような感じにシフトしている」という。またクライアントから「Flashを使わないで制作してほしい」という要望も増えつつあり、状況は大きく変わってきているとした。 比留間氏は、同社が手がけた事例としてグリコポッキーのゲームサイトである「Pocky GP」、アーバンリサーチのクリスマスキャンペーン、HTML5で作成した「ソイカラ時計」、日産リーフのキャンペーンサイトなどを紹介した。いずれも、インタラクティブな要素が前面に出された作りとなっている。 「広告」と「Webアプリ」の親和性が高いと考えられる理由について、比留間氏は「インストール不要」「クロスブラウザ対応」「アップデートが容易」「Twitterなどの口コミをベースに共有されやす
「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい 「Meteor」は、Webアプリケーションを開発するためのフレームワークと実行環境を提供しています。アプリケーションはすべてJavaScript、HTML、CSSで記述できるため、サーバ側でRubyやPerlやJavaなどのプログラミングをする必要はありません。 TechCrunchの記事では、JavaScript/HTML/CSSだけでWebアプリケーションが開発できる点にフォーカスが当たり話題になりましたが、公開されたデモンストレーションのスクリーンキャストを見たところ、Meteorにはそれ以上に新しい仕掛けが盛り込まれていました(スクリーンキャストはこの記事の末尾に埋め込んであります)。 それは「リアルタイムなWebアプリケーションを構築す
htmlとcssは分かるけど、プログラムに関しては素人の私、副長がいかにwebサービスを公開するに至ったかのまとめです。 この日記、もちろん(http://anond.hatelabo.jp/20101203150748)に触発されてます。 もともとwikiで作っていたサイトがあり、それを作り直し今月リリースしました。 2010年10月時点でのスキルセット html:5年くらい。 css:5年くらい。 Javascript(jquery):2年くらい。 IA:3年くらい。 元マークアップエンジニアの現在webディレクターです。 リニューアル前のサイト 海外ドラマの情報サイト pukiwikiで構築 html、css、デザイン全て一人 api利用(yahoo、bing、楽天、amazon、WikipediaAPI)で自動取得できる情報は取得しまくった(全てJavaScript利用) サーバー
アニメやゲームのキャラクター情報をまとめてるサイトがないから作りたいなぁって 思ってたんだけどhtmlは初歩しか分からないしプログラミングもできないので構想するだけで作れなかった。 ゼロから4ヶ月でWEBサービスをリリースした人の記事を見つけて「自分にもできるかな!」なんて思い挑戦してみたけど理解できず挫折・・・orz WEBサービスを個人で作ってる人達が羨ましいです。 それでもWEBサイトを作りたかったので制作会社に発注してみようと思い立った。 ただのキャラクターのデータベースだけではつまらないのでコミュニティ要素なども付けて ネットで見つけた制作会社に見積もってもらうと下記のようになった。 合計1,483,125円 以前、SNS「ウェブカレ」のサイト制作費が1千万円で安く仕上がった(潰れたけど・・・)という話があったから なんとなく3~400万くらいかかるんじゃないかなと不安だったんだ
どうも、@OZPA です。 先月、当ブログのテーマをWordPressにて自作した私。 しかしながら、実はそれまでWordPressの知識どころかhtmlすらろくすっぽきちんと理解していない人間だったのです。 今回はそんな私がWordpressのテーマを一から自作するまでにやったことを備忘録がわりに纏め上げておこうかと思います。 ひとりじゃ出来なかった 今回、テーマを作り始めたのが2011年の12月29日、そしてテーマが完成したのが年が開けて1月の12日。 だいたい2週間弱で自作テーマ発表まで漕ぎ着けたわけなんですが、そこにはそうそうたる方々によります手助けがありました。 そんな方々に敬意を払いつつ、テーマ自作までにやったことと手順を備忘録として残しておこうかと。 WordPressのテーマ作成の手順 さて、WordPressのテーマを作成するためには、 0.WordPressをローカルに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く