ChromeでHTMLを編集しよう！ - Qiita
ChromeデベロッパーツールがHTMLエディターとして使えると聞いたので試してみました。 忙しい人のための概略 HTMLファイルをChromeで開く デベロッパーツールを出す HTMLファイルが入っているフォルダをデベロッパーツール上にドラッグする ローカルファイルへのフルリクエストを許可する HTMLファイルを右クリックしてMap to file system resource...を選択 対応するファイル名を選択 デベロッパーツールを再起動する 編集開始！ 図解 1. HTMLファイルをChromeで開く HTMLファイルをChromeで普通に開きます。この例ではD:\Projects\HelloWorldがプロジェクトフォルダです。 2. デベロッパーツールを出す F12を押してデベロッパーツールを表示します。そしてSourcesをクリックします。 3. HTMLファイルが入ってい
手を動かして学習しよう！コードチャレンジ HTML/CSS 初級編
2020年2月13日 CSS, HTML, Webサイト制作 Web制作初心者の方向けに教える仕事をちょこちょこしているのですが、その時よく思うのが、本を眺めるだけでは覚えられないな…という点。やはりコーディングに関しては実際に手を動かしてみないと自分のスキルとしてしっかりと定着しません。そこで今回は私が教える中でよく使っている簡単な「コードチャレンジ」を紹介します。Web制作を勉強中の方や、同じく初心者向けに教えているという方の学習のヒントになればと思います。 ↑私が10年以上利用している会計ソフト！ コードチャレンジの進め方 私が教える際によく使うツールはCodePen。実際に書いたコードがその場で表示されるので、生徒側も「これを書いたらこう変化する」というのが実感しやすいようです。 この記事に埋め込まれているCodePenの画面の右上「EDIT ON CODEPEN」をクリックすると
HTML5 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説
2016年11月1日に、HTML 5.1が勧告されました。HTML 5から新しく加えられた点、削除された点、変更された点がいろいろあります。 その中から、ページのアウトラインを組み立てる上で重要なsection要素の使い方、header要素とfooter要素のネストについて具体的な事例を添えて紹介します。 Document Outlines in HTML 5.1 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は以前、HTMLのページにvalidなアウトラインを持つ重要性について説明しました。 先日、HTML 5.1が公式にリリースされました。 興味深い変更が数多くあり、そのうちの2つはvalidなアウトラインに関係しています。 削除 アウトラインを作成するh1要素を入れ、ネストされたsection要素の使用。 変更 hea
Google スプレッドシートの関数でWebからデータを取得する - プログラマでありたい
Excel買うのはちょっと高いなぁと思っている時に重宝するのが、Google スプレッドシートです。ブラウザがあればどこでも使えて嬉しく、あのデータあのパソコンに入ってるのにとか、そういったことから開放されます。さらに他の人との共有も簡単なので、使い所沢山あります。 そんなGoogle スプレッドシートですが、Googleならではというような機能もあります。その1つがImport系のセル関数です。幾つかあるのですが、Webからデータを収拾できるものが幾つかあります。地味だけど便利なので、簡単に紹介してみます。 Import関数 関数名 概要 IMPORTXML XML, HTML, CSV, TSV,RSS/Atom XMLフィードなど、構造化データからデータをインポート IMPORTHTML HTML ページ内の表やリストからデータをインポート IMPORTFEED RSS, Atom
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
[CSS]ヘッダをホバーするとナビゲーションがスライド表示されるスタイルシート（スクリプト無し）
スクリプトを使わずに、ヘッダをホバーすると非表示だったナビゲーションがアニメーションで表示させるスタイルシートのテクニックを紹介します。 デモページのアニメーション 通常時は細めのヘッダとコンテンツがあるだけで、ヘッダをホバーすると、非表示だったナビゲーションがアニメーションでスライドして表示されます。 デモのようなナビゲーションだけでなく、他のコンテンツを設置することももちろん可能です。 実装 Step 1: HTML ヘッダ部分は最初に表示されている要素、非表示の要素の2つが配置されています。 <div id="topbar"><a href="http://designshack.net">Back to Design Shack</a> <div id="tophiddenbar"> Other Links: <a href="http://designshack.net/cate
CSSだけで簡単に吹き出しを作成する方法4つ！
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapper { padding: 30px; position: relative; } .box { position: relative; background: #ccc; height: 50px; width: 100px; margin-bottom: 20px; } .box:after { content: ''; position: absolute; border-top: 10px solid #ccc; border-right: 5px solid transparent; border-left: 5px solid tran
HTMLコードを貼り付けるだけ！1分で作れる無料メールフォーム「STAR-FORM」
新サービスへの移行のお知らせ STAR-FORMは、2014年6月13日をもってサービスを終了し、新サービスへ移行しました。 現在は Lisket（リスケット） というサービス上で、さらに高機能になったメールフォームを引き続き完全無料にてご提供しております。 Lisketの無料メールフォーム簡単作成ツールでは、リスティング広告などで使用するコンバージョン測定機能なども追加されており、複数のフォーム設定を管理することもできるようになっています。 加えて、Lisketではメールフォーム作成機能だけでなく、Webマーケティングに便利な機能を多数提供しております。 競合の広告文のチェックツール SEOチェックツール（内部分析、順位チェック） リスティング広告の入稿補助ツール リスティング広告のレポート作成ツール などが公開中で、今後もWebマーケティングに便利なツールを随時追加予定です。 有料のツ
jQueryでFacebookページのウォールを自分のサイトに表示する方法（簡易バージョン）
Posted: 2012.08.21 / Category: javascript / Tag: jQuery FacebookページのウォールはFeedを出力しています。 これをGoogle AJAX Feedを利用してjsonpへ変換してjQueryで表示する方法をご紹介します。 FacebookページのID確認方法 FacebookページのURLを設定していない場合、URLの末尾がIDになります。 もしURLの設定をしている場合、IDはURLではわかりませんので「graph.facebook.com」にアクセスすると簡単に確認することができます。 たとえば「Nike Japan」だったら、Facebookページは下記ですね。 http://www.facebook.com/nikejapan そのままドメイン名を「graph.facebook.com」にしてアクセスします。 http
Treehouse: HTML, CSS, PHP, JS, and Python Development Courses
Welcome to the Treehouse Library This is a sample catalog of all the courses we offer. Browse by topic or difficulty. Sign up today and get access to our entire library. Treehouse students get access to workshops, bonus content, conferences, and more. Ready to start learning? Treehouse offers a 7 day free trial for new students. Get access to 1000s of hours of content. Learn to code, land your dre
CSS3対応のCSSセレクタ一覧 - CSSデザインノート
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
【Dreamweaver】最近の head 周りでよく使うコードスニペット | バシャログ。
パンダ、ペンギン･･･次はシマウマかな？と予想する Latin です。 英語だからゼブラアップデートって所でしょうか？ さて今回ですが、最近のコーディング周りで使う機会の多い OGP や js 系のソースのスニペット化についてです。 今回はヘッダー周り限定なので、コピペすりゃすぐ解決しそうな気もしますが、スニペット化すればいろんな応用ができますよという意味も含めてお届けしたいと思います。 →Dreamweaver のスニペット登録についての記事はこちら 今回の前提条件ですが HTML5、CSS3、modernizr.jsを使う前提のフォーマットです。 記述やファイルの階層などは独自のモノですので、自分の環境に合うように改変してください。 目次 [Dreamweaver]最近の head 周りでよく使うコードスニペット html 要素に modernizr.js 向け記述とソーシャル向け x
Google
世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
higty.xyz
#noscript
JavaScript ウインドウを開く（サイズ・位置・各バーの表示設定 width,height, top,left）
ゼロから始めるガラケーコーディング DOCTYPEとCSS編｜クロノドライブ
