CSS SANS
CSS SANS は、WEB上でデザイン・文字組をするためのプログラミング言語 CSS でつくられたフォント。 WEBの歴史・進化を映し出し、時代に合わせて形を変える、これまでにないフォントです。 CSS SANS is the font created by CSS, the programming language for web designing and typesetting. It is an unprecedented font that reflects history and evolution of the Web, and even changes its own shape. フォントの成り立ちHow the font is madeCSS でできることは、WEBページのレイアウトを整えたり、文字組・文字間の調整をしたりなど、様々。 ただひとつ、「文字自体をデザイン
プレゼン資料の「色」に悩んだ時に使いたい！便利なカラー配色ツール10選 | クラウド資料作成代行サービスのSKET（スケット）
今回は、プレゼン資料の作成において重要な「配色」について取り上げました。 以前の記事「心理学から読み解く！資料作成で知っておくべき”色”の使い分け」（https://sket.asia/magazine/kotsu/color/）でも記載した通り、資料において色が与える効果というのは非常に大きいものがあります。 一方で、多くの人が資料作成の際に配色について悩んでいるのも事実。 「コーポレートカラーに合う色ってどんな色だろう？」 「今回の提案に沿ったカラーパターンを試したい」 そんな疑問を解決する優れたサイトをご紹介します！上手く活用し、資料のビジュアルを向上させてみてください！
タグにマッチさせる正規表現
HTMLタグ文字列にマッチさせる正規表現を書いてみた。 //html var rtag = /<\w+(?:\s+\w+(?:\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)?(?:\s?\/)?>|<\/\w+>/g; //(x)html var rxtag = /<\w+(?::\w+)?(?:\s+\w+(?:\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)?(?:\s?\/)?>|<\/\w+(?::\w+)?>/g; 何かこんなに書かなくても良いように思う。(-_-;) とりあえず、簡単にテスト。 var tagStr = [ "<br/>", "<br />", "<p>abc<br>abc<br>abc</p>", "<h1></h1>", '<div style="vertical-align:bottom;"><span>foo
Google Web Designer - Home
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
Panic Blog
Yes, it’s time for an announcement! The best SSH app for iOS now includes a Mac companion. Prompt 3 is here and ready to work. Way back at the beginning of 2011, we introduced Prompt: a nice, clean SSH terminal client for the iPad and iPhone. People loved it. Then, four years later came Prompt 2, which became the premier terminal client for iOS and iPadOS. Prompt 2 was a stable, reliable workhorse
HTML5 and CSS3 Slider Showcase | HTML5 & CSS3 | Graphic Design Blog
If you are looking for a slider that is completely customizable, lightweight, works cross-device/browser and built with modern standards in mind? Then HTML5 and CSS3 sliders are very good option. There are lots of free HTML5 and CSS3 Slider which can displaying any HTML content (images, videos, text..) inside a slider interface and comes with awesome features. HTML5 slider and CSS3 Slider is mob
A Simple Device Diagram for Responsive Design Planning
Artificial Intelligence A Simple Device Diagram for Responsive Design Planning Updated for 2015! Check out Analytics-driven responsive web design planning Updated for 2015! Check out Analytics-driven responsive web design planning At Metal Toad we're big fans of responsive design, but a common snag in the responsive planning process comes when choosing what device widths to design to. Just yesterd
短期間でプログラミング言語を学習してWebサービスをつくるための基礎知識と方法まとめ | らふらく^^ ~ブログで飯を食う~
こんな感じです。 ＞＞JavaScript を使って作る追尾サンプル iPhoneアプリやAndoroidアプリをつくれるこの他にも、JSを覚えれば、iPhoneアプリやAndoroidアプリをつくる事もできるのです！ ＞＞初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 「Titanium Mobileでアプリを試しにつくってみる」というのを担当していました。 JavaScriptはあまり使ったことがないですし、そもそもMacもほとんど触ったことがなかったので苦戦するかと思いましたが、２週間ほどでとりあえず形になるところまでできました。Titanium Mobileすごいです。 超おすすめ＞＞未経験からプログラマーとして上場企業に就職できたぼくが「内定をもらうための秘訣」と「大事なこと」を教えるよ 学習する上で参考になるサイトはこちらJavaScr
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
CSSだけで組み立てられたアイコンを公開しているサイト『One div』
CSSだけで組み立てられたアイコンを公開しているサイト『One div』 『One div』は純粋にCSSだけで組み立てられたさまざまのアイコンを公開しているサイト。 各アイコンの下にあるボタンをクリックすると、アイコンを表示させるためのHTMLやCSSの内容が表示され、これらのデータをファイルとしてダウンロードすることも可能です。 実際、下のアイコンは画像ではなく空の<div>を下のCSSでアイコンとして描画しています。 .fish { width: 2.1em; height: 2.1em; position: relative; border-radius: 1.5em 0em 1.5em 0em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);
CSScomb - MOL
うららかに晴れた秋の日、みなさんいかがお過ごしか？こんちわ@t32kだ。 今日はCSScombってツールの紹介だよ。タネマキであったこもりさんのSublime Text2勉強会のときに知ったんだけど、 まぁCSSプロパティを綺麗にソートしてくれるって代物だ。大まかな機能はこんな感じ。 CSSプロパティのソート ソート順は設定可能 style要素、style属性もパース スタイルシートのフォーマットは変更しない CSS2,3,4も完全にサポート オンラインからでも使えるし、Sublime Textだけじゃなくてメジャーなテキストエディタだったら、たいていのプラグインは用意されているんだ。 便利なものがあるなーと思ったけども、Sassファイルでこのツールを実行すると、その時はバグっていて、単純にプロパティ順を綺麗にさせるためだけなのに、そんな致命的なバグの危険性（CSSが壊れる）とかマジ勘弁！
最適な文字サイズとコンテンツエリア幅を計算してくれる『Golden Ratio Typography Calculator』
最適な文字サイズとコンテンツエリア幅を計算してくれる『Golden Ratio Typography Calculator』 Golden Ratio Typography Calculatorはフォントサイズとコンテンツエリアの幅との互いの最適な数値を導き出す計算機。 同サイトの作者が可読性の高い文字組を考える上で数学的に算出した『黄金比』のアルゴリズムを基にして、もっともバランスの良い見た目の数値が得られるというものです。 左側の入力欄にフォントサイズまたはコンテンツエリアの幅のどちらか、或いはその両方を入力します。 すると、そのフォントサイズに最適なコンテンツエリアの幅、或いはその逆、そしてそれに最適なline-heightと一行あたりのだいたいの文字数が計算され表示されるというわけです。 また、表示フォントがいくつか選べるのでフォントを変えながらチェックすることもできます。 例えば
5分でわかる！ ここが変わったHTML5 レイアウト要素編｜クロノドライブ
様々な要素が追加・削除され、HTML4以前とは大きく環境が変化すると話題のHTML5。そこで、HTML5とHTML4を比較し、変更される点などをこれから数回に分けてご紹介していきたいと思います。今回はレイアウト要素編です。 header要素、footer要素 一般的なレイアウト手法に従ってレイアウトされたサイトには、ヘッダとフッタと呼ばれる本文とは別の部分が存在します。ヘッダはサイト上部に位置し、主にロゴや内容紹介といったイントロダクション要素、またメニューなどのナビゲーション要素が配置される部分であり、一方のフッタはサイトの下部に位置し、コピーライトや、関連ドキュメントへのリンクなどが配置される部分となります。 HTML4以前では、これらが公式に区別されたり、サポートされるということはありませんでした。つまり、ヘッダやフッタを作成するにしても、
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using R Markdown – RStudio Support
ブラウザにやさしいHTML/CSS
Google Creative Sandbox Guidebook
The Good Man
3分動画でマスターするプログラミング学習サイト - ドットインストール
IDEA * IDEA
