Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
▲目次へ戻る 2.HTML文書がシンプルに HTML5で加わった新要素のおかげで、HTML文書がシンプルに書けるようになりました。 下のようなレイアウトを想定してみます。 いままでのHTML4やXHTML1では、次のような書き方をしていました。 div要素でブロックを区切り、それぞれにid名を付け、CSSでレイアウト指定をするというやり方です。 この方法ですと、ボックスの名前はそれぞれ任意に付けられます。また、各ボックスの記述が長いです。 一方、HTML5では次のような書き方をします。 新しい要素が追加されたため、div要素を使わずに、これらの新要素で構成できます。 ナビゲーション部分はnav要素、メインコンテンツ部分はarticle要素、サブ的なコンテンツ部分はaside要素、各コンテンツ内の見出しを区切るsection要素、があります。 ヘッダ、フッタ部分は、header要素、foot
はじめに サーバーサイドプログラミングを勉強していると、自分でWebサービスを作りたいという気持ちがわいてくるものです(私はそうでした)。しかし、ここで大きな問題が立ちはだかります。どんなにすごい機能をつけても、いい感じのデザインのWebサービスでないとそもそも使ってもらえないのです。 試しに、QiitaのトップページのCSSを無効にしてみました。使える機能は変わらないはずなのに、全く使う気が起きなくなりますね。 しかしそうは言っても、フロントエンドの経験がほとんどないとどうすれば見た目をいい感じにできるかがわかりません。今回は、ちょっとでも見た目のいいWebサービスを作るために、そんな状況の私がやってみたことをまとめました。 (この記事は、あくまで私が試行錯誤した結果をまとめたものであり、その結果出来上がったサービスの見た目の良さを保証するものではありません) 書いている人のプロフィール
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
最近はプレゼンテーションのスライドもHTMLで作ることが増えてきました。余計なエフェクトや装飾を気にせず内容だけに集中できますし、コンテンツを公開すればWebクローラーフレンドリーです。 幾つかのツールがありますが、今回はTwitter社の開発したCDK(Courseware Development Kit)を紹介します。AsciiDoc記法で作るHTMLスライドツールです。 CDKの使い方 CDKのインストールはpipで行います。 pip install cdk そしてAsciiDocを引数に渡します。 cdk sample.asc そうするとHTMLファイルが生成されますので、それを開くだけです。 こんな感じに中央に大きな文字が特徴です。 日本語も使えます。コードはちょっとカードっぽく表示されます。 コマンドヘルプです。 スライド一覧。 アウトライン。 スライドジャンプも。 Ascii
と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ
初投稿です。よろしくお願いします(/・ω・)/ 新卒入社してフロントエンドエンジニアとして働き始めて早半年。 最近は、自分の書いたコードが世の中にリリースされて嬉しさを噛み締めながら楽しく社会人生活を送っています。 こんな本を読み始めました Webフロントエンド ハイパフォーマンス チューニング -久保田 光則 (著) webパフォーマンスについて...要はサイトの 速度改善 について学べる本です。 冒頭に「ウェブパフォーマンスとは何か」が書かれてます。 ウェブパフォーマンスを改善することは、ユーザが目的の達成の為に費やす時間やリソースを節約させることであり、その節約した分ユーザを豊かにしているわけです。 ウェブページ遷移時の初期ロード時のパフォーマンスだけでなく ウェブページ内でのインタラクション(ユーザが起こした操作に対しての応答)の描画のパフォーマンスが重要になってきます。 読み込み
まじな話をすると、N予備校のプログラミング入門コースやるのがオススメ。 https://www.nnn.ed.nico 一日8時間勉強時間があるなら、だいたい一ヶ月で終わる内容。 月額1000円だけどしっかり勉強すれば一ヶ月の無料期間中に終わると思う。 もともとN高等学校のノンプログラマーの生徒をWebエンジニアとして就職させるために作られたカリキュラムで講師曰く去年はこれで二人エンジニア就職を決めたらしい。 内容も相当親切に説明していて、プログラミングで何か作るだけじゃなくて、就職に必要な環境構築やセキュリティまでみっちりやる。 http://qiita.com/sifue/items/7e7c7867b64ce9742aee#%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88%E3%82%92%E3%82%82%E3%81%A8%E3%81%AB
HTTP ガイド リソースと URI ウェブ上のリソースの識別 データ URL MIME タイプ入門 よくある MIME タイプ www 付きと www なしの URL の選択 HTTP ガイド HTTP の基本 HTTP の概要 HTTP の進化 HTTP メッセージ 典型的な HTTP セッション HTTP/1.x のコネクション管理 プロトコルのアップグレードの仕組み HTTP セキュリティ Content Security Policy (CSP) HTTP Strict Transport Security (HSTS) X-Content-Type-Options X-Frame-Options X-XSS-Protection Mozilla web security guidelines Mozilla Observatory HTTP アクセス制御 (CORS) HTTP
Spring BootでファイルアップロードをするにはMultipartFileインターフェースを受け取るようにするといいみたいです。 こんなクラスを定義して package okazuki.fileupload.simple.controllers; import org.springframework.web.multipart.MultipartFile; public class FileUploadForm { private MultipartFile fileData; public MultipartFile getFileData() { return fileData; } public void setFileData(MultipartFile fileData) { this.fileData = fileData; } } こんなHTMLでもって <!DOCTY
最近、エディタをSublime TextからAtomに変えました。もともと、エディタにはそんなにこだわりはなく、変えた理由もAtomがいいという声を聞くようになったからという単純なものです。 AtomもSublime Textと同じように”パッケージ”をインストールすることで様々な機能を追加することができます。これで自分が使いやすいエディタに進化させていくわけですね。 今回はソースコードを自動で綺麗に整形してくれる”atom-beautify“というパッケージを試してみました。 対応言語はHTML、CSS、Java、Rubyなど atom-beautifyのWebサイトから引用しますが、以下に示したように多くのプログラミング言語に対応しています。一部の言語においては別のツールをあらかじめインストールしておかなければいけない場合があるそうです。 Beautify HTML, CSS, Jav
はーい、元気ですかー?ロックンロール! 今現在、SAStrutsを使い始めて2つめのプロジェクトを荒々しくコーディング中なんですが、今回はJQueryを利用したAjax処理をあちこちで採用してます。 マスタ管理とかの一覧のページングとかはAjaxだし、追加・更新もajaxでlightbox風な感じで表示してるし。 で、リクエストが正常に処理された場合はおkなんですが、入力エラーだったりセッションが切れてたり例外が出たときに、デフォルトのままエラー画面とかにforwardすると、ブラウザ側でエライことになっちまいますよね? divの中にエラー画面がloadされたり、javascriptをevalしようとしたら実はHTMLだったぜ的な。 そこで、今回はRequestのヘッダーの中身によって、Ajaxでのリクエストなのか、クライアントはHTMLを期待しているのかそれともjavascriptやjs
JSON APIのURLをIEで開くと勝手にContent-Typeをtext/htmlと推測してしまうことがある。その場合、XSS攻撃ができてしまう場合がある これの対策として JSONだけども、HTMLのエスケープをする X-Content-Type-Options: nosniffを設定する XHRを利用する時は、X-Requested-Withヘッダを設定し、設定していなければサーバ側でエラーにする などがある。 1,2は知っていたけど、3は初めて知った。 2は楽なのだけども古いIEだと対応していないという問題がある。1は古いIEでも有効なんだけども、本来エスケープしなくていいものをエスケープするのがやな感じがする。 というわけで、2と3の組合せが良さそう。 で、X-Requested-WithヘッダはjQueryやprototype.jsでは自動的に設定してくれる。ただし、クロス
解決したいこと React 初心者なので、JSX コード内で HTML にレンダリングさせたくない部分をコメントアウトする方法がわからない。 方法 {/* ... */} または {// ...} という構文でコメントアウトできる。 例 var Header = React.createClass({ displayName: 'Header', render: function () { return ( <div> {// <h1>wasshoi</h1> } <nav> <ul className="header--nav"> <li> <a href="#">hoge</a> </li> {/* <li> <a href="#">fuga</a> </li> */} </ul> </nav> </div> ); } });
Getting started by reading the documentation, which also contains an introduction and a tutorial.
HTMLの開始・終了タグの過不足などを検出する拡張機能です。エラーがある場合、数値が表示されます。JSでソースを確認するので、外部送信は行ってません。※formがあるページで挙動がおかしくなる場合は、一時的にオフにしてください。 # 概要 閲覧しているページのHTMLのタグの記述ミスなどをエラー表示してくれます。 単純に開始タグ・閉じタグが足らないなどのチェックを行うのみの拡張機能となっています。 エラー数が数値で拡張ボタン部分に表示されるので簡単にチェックができます。 # 更新履歴 ## Version 0.5.0.4 - Privacy、Permission調整 ## Version 0.4.0.3 - バグの修正 "自動チェックを有効にする" が初回時うまく動かない問題を修正 ## Version 0.4.0.2 - ローカルファイルのチェックが可能に - アップデートをブラウザ通知
ホームページの作り方 超基礎編 トップ > ホームページの作り方 応用編/リストを作る HTML <ul><ol><li>と<dl> HTMLタグ|リストを作る <ul><ol><li>と<dl> 並列列挙リスト <ul>を使うと、簡単にリストが作れます。 箇条書きや項目を並べる時に便利です。 <ul></ul>を使うと文章の頭に「・」が自動的につきます。 <ul> <li>abc</li> <li>def</li> </ul> 番号付きリスト <ul>の変わりに<ol>を使うと、先頭に番号がつきます。 この番号は<li>が増えると自動的に「1,2,3」と割り振られていきます。 <ol> <li>abc</li> <li>def</li> </ol> 普通のリストと番号付きリストの違いは、<ul>で囲むか<ol>で囲むかの違いだけです。 <li>でリスト内容をマークアップして、それを<ul
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く