Build cross-platform desktop apps with JavaScript, HTML, and CSS | ElectronWeb TechnologiesElectron embeds Chromium and Node.js to enable web developers to create desktop applications. Cross PlatformCompatible with macOS, Windows, and Linux, Electron apps run on three platforms across all supported architectures.
:link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp
スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか？ 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効
Online StyleSheet Generator | OneClickCSS
What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare
10 Best Responsive HTML5 Frameworks
1. Twitter Bootstrap Bootstrap is a popular, modern front-end/UI development framework. It’s feature-packed and will have most of the things you’ll need for developing responsive sites and apps. Bootstrap has a 12-grid responsive layout, 13 custom jQuery plugins for common UIs like carousels and modal windows, a Bootstrap customizer, and more. Bootstrap is well-documented, and this open source pro
WEB Drawer
サイトの更新で、「〇〇」という単語を全部修正するみたいな作業が発生する場合があるのですがその際対象ページのURLを出したい場合の方法です。 DreamWeaverで検索してxmlとして出力する まずDreamWeaverでサイト全体を検索し...
[Tutrial] TheCodePlayer - 作例と、そのライブコーディングを見れるサイト
[Tutrial] TheCodePlayer – 作例と、そのライブコーディングを見れるサイト Pocket Tweet CSS3やHTML5を使った作例の紹介と、そのライブコーディングを見る事のできるサイト。作例を選択すると、まずは動作デモを見る事ができます。作例デモ画面内で「Play Walkthrough」を押せばライブコーディングが始まります。また「View Code」では単純にコードだけを見る事もできます。コーディングの時間の進み方は最大20倍速まで上げる事ができ、徐々に形になっていく様子を見る事ができます。これなかなか勉強になりますね。時期的に新人の教育にも使えそうです。 TheCodePlayer
Webサイトの作り方のまとめ！コーディングまで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめました。 ここで言うコーディングとは、「HTMLで文書を書いて（マークアップして）、CSSで見栄えを整える（CSSコーディングする）」ことを指します。主に「Webデザイナー」と呼ばれる人たちが担う範囲のコーディングについて書いてます。 以下は目次です。クリックするとその項目へ移動します。 コーディングの下準備 ディレクトリの構造を考える ディレクトリの設置 Web開発環境について CotEditorというテキストエディタ Zen-Codingという便利なプラグイン その他のWeb開発環境 コーディング！まずはマークアップ（HTML） index.htmlの基本設定 トップページの内容をマークアップ コーディング！レイアウトを整える（CSS） style.cssの基本設定 トップページのレイアウトを整える <heade
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです
Emmet Documentation
Emmet — the essential toolkit for web-developers Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow: <!doctype html> <html lang="en"> <head> <title>Demo</title> </head> <body> | </body> </html> ~~~ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expand Abbreviation” action to expand it into HTML ::: “Expand Abbreviati
センス良し！スマホサイトのデザインギャラリーサイト10選\ - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -
スマホサイトのデザインを考えるときに参考になりそうなサイトを10サイトご紹介します。どれも参考になりますよー！
![センス良し！スマホサイトのデザインギャラリーサイト10選\ - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -](https://cdn-ak-scissors.b.st-hatena.com/image/square/44431ef804130f3a0dd6b23915b35bd367a44002/height=288;version=1;width=512/https%3A%2F%2Fimgs.u-note.me%2Fnote%2Fcaption%2F47492699.jpg)
Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
プロダクトの品質を高める『フィードバック』
プロダクトの品質を高める『フィードバック』 デザイン⇒フィードバック⇒変更・修正のデザインプロセスをまわして、デザインが良くなっている感じがしなかったり、...
[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
授業内課題
課題作品集 過去クラスの作品 前回クラスの作品 今回クラスの作品 HTML課題 HTML課題１ HTML課題２ HTML課題３ HTML課題4 HTML課題5 HTML課題6 HTML課題7 HTML参考サイト（ウェブランサー） XHTML1.0の基本構造 HTML5の基本構造 CSS課題（初級） CSS課題１ CSS課題２ CSS課題３ CSS課題4 CSS課題5 CSS課題6 CSS課題（中級）その1 CSS課題7 CSS課題8 CSS課題9 CSS課題10 CSS課題（中級）その2 CSS課題11 CSS課題12 ・見出しデザイン練習 見出しデザイン ・縦型ナビゲーション練習 縦ナビ１ 縦ナビ２ 縦ナビ３ ・横型ナビゲーション練習 横ナビ１ 横ナビ２ ・テーブルデザイン練習 テーブルデザイン ・絶対配置(positionプロパティ)練習 絶対配置 ・定義リストデザイン練習 定義リスト
ソースコードの装飾表示方法 SyntaxHighlighter
HTML,CSS,JS,Perl,PHPなどの各ソースコードをWebサイト上に綺麗に再現。 NetyaSun ソースコード表示 ホームページ 作成、運営、管理ガイド 行番号や各行背景色で見やすい ソースコード ビュー ライブラリ SyntaxHighlighter エディタのようにWebサイト上に綺麗にソースコードを表示する方法。 ソースを書くプロ達や未来の開発者のための学びの場である HTML,CSS,JS,Perl,PHPなどのマニュアル・解説サイトなどで、 PREソースコードを行頭番号付きでカッコよく表示するソース ビューア SyntaxHighlighter SyntaxHighlighter:Download ソース上にオンマウスで の操作タブがソースの右上に表示されるようになった。 ソースを別窓ビュー表示したりクリップボードに保存や印刷も可能な優れものです。 <?xml ve
誰でもスクレイピング！DOM要素を引っこ抜くSimple HTML Dom
WEBサイトは著作権で守られています。許可無く勝手に人様のサイトから情報だけ抜き出して自分のサイト上に公開することは出来ません。この著作権の問題には十分注意してください。 スクレイピング便利クラス Simple HTML Dom スクレイピングの方法はいくつか存在するのがですが、私はSimple HTML Domを好んで使っています。色々調べた結果、個人的にはこれが一番使い易いと思いました。 サイトからダウンロードし、simplehtmldom_1_5フォルダをスクレイピングを実行したいサーバーにアップして、simple_html_dom.phpを呼び出すだけで準備は完了します。 引っこ抜きの指定が実はCSSそっくり！だからWEBデザイナーにも！ 簡単ですが、データの引っこ抜き方です。『ここを引っこ抜きたい！』という部分を指定します。 下記の赤字部分に注目。引っこ抜きたい(スクレイピングし
<input>－HTML5タグリファレンス
<input>タグは、フォーム（<form>～</form>）を構成する様々な入力部品を作成する際に使用します。 ■フォーム部品の種類を指定するtype属性 type属性は、フォーム部品の種類を指定する際に使用します。 <input>要素は、type属性にどのような値を指定するかによって、 一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、 フォーム部品の種類を指定し分けることができます。 type属性の初期値は、type="text"（一行テキストボックス）です。 ■type属性の値 type="hidden" 画面上は表示されない隠しデータを指定する type="text" 一行テキストボックスを作成する（初期値） type="search" 検索テキストの入力欄を作成する type="tel" 電話番号の入力欄を作成する type="url" URL
レスポンシブWebデザインのモックアップを簡単に作成できる「Adobe Edge Reflow」の使い方
このように@mediaを使用して出力先や解像度、サイズなどで条件分岐をしていき、必要のない要素を非表示にしたりして、見栄えを切り分けて製作していきます。 レスポンシブWebデザインのメリット・デメリット 前述のとおり、RWDでは同じCSSファイルで各デバイスのスタイルを共有します。そのため、共有しているスタイル変更の影響を受けやすく、制作をデスクトップとモバイルで分担している場合などは細かいレギュレーションを最初に決める必要があります。 とはいえ、モバイルとデスクトップをHTMLから切り分けた場合、完成後の更新の手間も二重にかかってしまいます。CSSで分岐して必要なプロパティのみ上書きしてデバイスに最適化するだけで同じ素材を共有できることは、サイト運営者にとって非常に魅力的です。 RWDのメリット デバイスごとに切り分けず1つのHTMLファイルで管理可能 スタイルを共有してテイストの統一性
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 × CSS3 × jQueryを真面目に勉強してみる | DevelopersIO
Cheat Sheet