意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
コードがはっきりと見やすく使いやすい！Sublime TextとAtomとVim対応のテーマ -DuoTone Themes
DuoTone Themes DuoTone Dark -GitHub コードがはっきりと見やすいカラー DuoTone Themesの5つのテーマ DuoTone Themesのダウンロードとインストール コードがはっきりと見やすいカラー DuoToneは2つの色相をベースに色調を変化させた7つのカラーで構成されています。 コードで重要な部分には強調したカラー、それほど重要ではない部分には和らいだカラーが適用され、はっきりとした見やすいテーマになっています。 DuoToneは5種類あり、Darkのベースカラーはパープルとゴールドです。 ↓縮小してますが、見やすくないですか？ Colorscheme DuoTones - Dark 対応言語は下記の通り。これからも増えていくそうです。 C Clojure CoffeeScript C# CSS GF Markdown Go Haskell
[コードエディタ] Bracketsが正式リリース
Brackets が正式リリースされた。 アップデートついでに色々とまとめてみた。 Bracketsとは Brackets は、Web アプリ開発向けのオープンソースコードエディタ(Adobe が一枚噛んでる)。「Adobe Edge Code」のベースになってるっぽい。 Sublime Text ほど人気はないけれど、個人的には Sublime Text より使いやすくて使っている。ここ最近はかなり使いやすくなっている。 特徴 クロスプラットフォーム(Mac, Windows, Linux) 日本語を標準サポート HTML/CSS/JavaScript/SCSS/LESSを標準サポート クイックドキュメント タグやスタイルに関するヘルプ表示 クイック編集 タグを装飾するスタイルをインライン編集できるようにする(CSSファイルを開かずに済む) 構文チェック(JSLint) ライブプレビュー
![[コードエディタ] Bracketsが正式リリース](https://cdn-ak-scissors.b.st-hatena.com/image/square/2be83a2701b2800d58c01eba2ec89e207c47fd91/height=288;version=1;width=512/https%3A%2F%2Fb.0218.jp%2Fimages%2Fogp%2F20141105125846.png%3Fts%3D58764a758bbba0f0eef35e10c56db3a3ab18e735)
使用中のSublime Text 2のプラグインをまとめてみた | CodePlus
基本的には今使ってるもの中心ですが、僕のメインエディタであるSublime Text 2のプラグインをまとめてみました。 ※細かい設定は省いています。 コーディング関連 Emmet Zen Codingの次期バージョン。主にHTMLを書く際に Hayaku Emmet(Zen-Coding)を上回るCSSの展開 例)bdrds→border-radiusなど Dummy Image Generator Dynamic Dummy Image Generatorで使えるダミー画像の埋め込み BracketHighlighter タグやクォーテーションマークなどのハイライト表示 SCSS SCSSの補完 Compass Compassの補完 jQuery jQueryの補完 CSScomb CSSのプロパティの自動整列 WordPress WordPressの補完 SublimeLinter
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
Webシステムのフロントエンド高速化で最初にやるべきこと - かみやんの技術者ブログ
前回のエントリーで、Dartの次は、TypeScriptを検証する。と書いたけど、なぜか自分のPCでは、VisualStudio for WebにTypeScriptのプラグインがインストールできなかったので、TypeScriptを使うことを諦めました。コマンドラインでコンパイルはできたけど、それでは型付け言語のメリットであるIDEによる補完や参照検索やリネームリファクタリングが効かないので。ちなみにプログラマのPCではあっさりインストールできたとのこと。がっくり。 というわけで、Dartを実戦投入することを決定してDartで開発をしています。 フロントエンド高速化のExpiresヘッダ さて、今日の本題。Webシステムのフロントエンド高速化のお話です。Webシステムの速度の大きなボトルネックとしてDB負荷がありますが、ブラウザ側のレンダリングを高速化する話としてフロントエンド高速化があり
短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ | らふらく ^^
最近、スマホの普及と共に、プログラミングを学習したい人が増えてきているようです。 私の周りでも、プログラミングに興味があり、webサービスをつくってみたいという人が大勢います。 ということで、プログラミングをやった事がない人（または初級者）のために、 プログラミングで何を学べばいいか、 どうやって勉強したらいいかというノウハウを紹介したいと思います。 何を学ぶべきか プログラミングにはいろんな言語があるため、どの言語をやればいいかわからないという声を耳にします。 そこで、初級者でも学びやすい言語を厳選し紹介したいと思います。 1. 何はともあれ「HTML」 こちらは、Webサービスをつくる上で書かせない言語で、 今見ているページ（見た目の部分）はすべてHTMLで書かれています。 HTMLを学ぶ上では以下のサイトが参考になります。 HTMLの基本 HTML入門 ドットインスト
誠 Biz.ID：3分LifeHacking：マルチディスプレイを快適にする無料ソフト7選
液晶ディスプレイの低価格化や、USBディスプレイアダプターの普及もあり、数年前に比べるとぐっと導入しやすくなったマルチディスプレイ。デスクトップの表示面積が広がり、複数のウィンドウを並べて表示できることから作業の効率化に大いに貢献する。マルチディスプレイなしでは日々の作業がおぼつかないという人も少なくないだろう。 今回は、そんなマルチディスプレイ環境下での作業効率をアップしてくれるWindows用のフリーソフト7本をまとめて紹介する。マルチディスプレイに関連したソフトには「Multi Monitor Extension」のような統合タイプのユーティリティも多いが、今回は単機能のタイプに絞り、他とは違う特徴を持った機能を中心にお送りする。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
