Visual Studio Code でフロントエンドの開発環境を構築してデバッグする - Qiita
Webフロントエンドの開発を行ったことがない人向けに、Visual Studio Code でフロントエンドの開発環境構築からデバッグまでを説明します。 また、Google Chrome の デベロッパー ツール(Chrome DevTools) の使い方についても一部のパネルの説明をします。 開発環境の準備 フロントエンド開発で必要な開発環境の準備を行います。 使用するOSは Windows でも Mac でも構いません。 開発ツールのインストール フロントエンド開発なので、Webブラウザが必要となり、この記事では Google Chrome を使って説明します。 また、ファイルを記述するためのテキストエディタが必要となり、この記事では Visual Studio Code を使って説明します。 ソフト名 用途 バージョン ※
PyCon JP 2018: Webアプリケーションの仕組み - 清水川のScrapbox
Python 3.6.6 (v3.6.6:4cf1f54eb7, Jun 26 2018, 19:50:54)
レスポンシブデザインで気をつけたい、電話番号の扱い - Qiita
レスポンシブデザインでWebページを制作する際、電話番号の扱いにいつも迷うのでまとめてみました。 電話番号の自動リンク機能を無効化する iPhoneやiPadに搭載されているsafariでは、ページ内の電話番号を自動でリンクに変換し、タップすることで電話をかけることができる機能が用意されています。 しかし、この機能は注文番号やIPアドレス、そのほか電話番号らしき数字で構成された文字列をすべてリンクしてしまうという問題があるほか、Android端末やChromeにはこの機能がないため、ユーザの混乱を避けるためにも無効化しておくのがベターです。 電話番号の自動リンク機能を無効化するには、head部に以下のように追記します。 <!DOCTYPE html> <html> <head> <!-- 電話番号の自動リンク機能を無効化 --> <meta name="format-detection"
W3C、「HTML 5.2」勧告。同時にHTML 5.3のファーストドラフトを公開
Web技術の標準化団体であるW3Cは、HTML 5のマイナーバージョンアップである「HTML 5.2」の策定を完了し、勧告としました。 HTML 5.2ではいくつかの機能追加、削除、バグフィクスなどが行われています。 機能追加の例では、ダイアログボックスを表示する＜dialog＞要素が追加されました。下記は＜dialog＞要素を用いたサンプルです。 ... <body> <div> <!-- body content --> </div> <dialog> <h1>Add to Wallet</h1> <label for="num">How many gold coins do you want to add to your wallet?</label> <div><input name=amt id="num" type=number min=0 step=0.01 value=10
【保存版】検索上位の800万ページに見る「HTMLの各要素」利用状況のすべて
#概要 このHTML利用データはGoogle検索結果上位２０位のページから収集された800万のインデックスページを参照しています。 検索順位上位のWebページは平均して２５の異なる要素型を使用していることがよく分かります。 以下はそれらの検索順位上位のWebページのほとんどのページで使用されている２５個の要素です。 #Doctype doctypeはHTML文書の冒頭に記載され、ページが利用している(X)HTMLのバージョンを示しています。 #基本要素とメタデータ htmlはルート要素としても知られており、doctype宣言のすぐ後に記載されWebページのコンテンツをラップします。メタデータはスタイルやスクリプト、データなどのページ情報を含んでおり、検索エンジンまたはブラウザーがページを利用・レンダリングするのに役立ちます。 #コンテンツセクショニング コンテンツセクショニング要素を使えば
[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js
オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。 実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。 「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="iconate.min.css"> </head> <body> ... コンテンツ ... <script type="text/javascript" src="iconate.min.js"> </body> Step 2: HTML アイコンを配置します。 デモではFont Awesomeのアイ
![[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e52b762682773fbeb81c27963f72395fbbf5fea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052611.png)
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
簡単で便利！Webページのパフォーマンスをヒートマップで視覚化するブックマークレット -Perfmap
1クリックで、Webページのパフォーマンスが最適化がどうかヒートマップを使って視覚的に分かりやすく表示してくれるブックマークレットを紹介します。 表示されている時間は二つあり、一つ目はユーザーが画像を見るために要する時間、二つ目はブラウザがロードするのに要した時間です。 ヒートマップはグリーンに近いほど早く、レッドに近いほど遅いということです。 下部のバーはページ全体のパフォーマンスで、「First Paint」はページの表示が始まった時間、「Fully Loaded」はページ全てのローディングを終えた時間です。 Bookmarklet PerfMapの使い方は簡単で、下記をChromeのブックマークに加えます。 ※対応ブラウザは現在、Chromeのみです。 javascript:(function(){var el=document.createElement('script');el.
Project Parfaitで尋常じゃない速さでpsdファイルからウェブサイトを組み立てる - 素人がプログラミングを勉強していたブログ
Project Parfaitとは、adobeが開発してるβ版の、ウェブサイト作成支援のサービス。これを使うと、.psdのデザインファイルからHTMLを書き起こすのが異常に高速になるので、オススメしておこうと思う。 具体的には、psdファイルをアップロードすると、psdファイルの要素がレイヤー別に選択できるようになる。わかりやすいように画像で実例を出すと（一部塗りつぶしてあるが） このようになる。 あとは、Copy Textをクリックするとクリップボードに文字が選択されるので、HTMLファイルを書きながら <li><a href="#">{テキストをペーストする}</a></li> のように書いて、その後、Copy CSSをクリックし li { /*CSSをペーストする*/ } のように、貼り付けて上記の画像の場合はfont-weightがおかしいのでboldに手動で直して、widthやh
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP