Explore DOM EventsThere are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.
よく使うHTMLひながたTOP ｜ahref.org
HTML用ひながた タグ打ち主体のWEBサイト構築で、便利・実用的なHTML、javascript集です。 表示されているHTMLソースをそのままコピーしてご使用できます。 ・ヘッダー関連 文字コード一覧 //SiftJIS、UTF-8、JIS、EUCの文字コード（漢字コード）指定 ページの自動ジャンプ //自動的に特定のURLに飛ばす ・リンク関連 ターゲット指定一覧 //新規ウィンドウを開いたり、フレームを解除したりする サブウィンドウオープン //javascriptでサブウィンドウをオープンする ・フォーム関連 フォーム一覧 //フォームオブジェクト一覧 年月日フォーム //1900年から2020年までの年月日セレクトフォーム 都道府県フォーム //都道府県一覧セレクトフォーム 二度押し防止 //Javascriptでフォーム送信の二度押しを防止する 戻るボタン //Javascr
HTMLコーディングの人気のスタイルは？ アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第3回目となる本記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのレイアウトに使うのはFlexboxが多い ウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。 Flexboxが最多となったのは、未対応ブラウザ（例：IE9）が無視できるシェアまで下がったことや、floatよりFlexboxのほうが
Webデザイナー中級者になるためのHTML5/CSS3テクニック10選
「作業効率に課題を感じている」 「作りたいページのデザインの実現方法がわからない」 日々webサイトを制作しているなかで、このような悩みを抱える方も多いのではないでしょうか。 この授業では、初心者から中級者へのステップアップを目標に「便利な機能」「比較的新しい機能」を中心に実演形式でご紹介し、実際のWebサイト制作時によく使われる＆役立つテクニックを学びます。 ■アジェンダ （）内の番号は、書籍内のサンプル番号です 1 レイアウトのマークアップのコツ（248、251など） 2 フロートに振り回されない（206） 3 フレックスボックスに挑戦。ナビゲーションを作成してみよう（237） 4 属性セレクタを使ったスタイリングで作業効率アップ（195、196） 5 border-radiusの仕組みを知って「カド丸」を手なずける（197） 6 蛍光ペンの太さのアンダーラインを引こう（198） 7
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
HTMLとCSSの極上テクニック！ヤフーの現役フロントエンドエンジニア陣が本気で解き明かすオススメの本
本書にはHTML、特にCSSに携わる人が学ぶべきものがたくさんあります。 最前線の現場でHTMLとCSSがどう書かれているのか、Sassは制作で実際にどのように取り入れているのか、Gulpの使い方やBEMをベースにした命名規則の策定など、CSSの設計や管理の仕方、考え方のプロセスや効率的に書く方法などが詳しく解説されています。 今の自分に、5年後の自分ために、絶対熟読しておきたいオススメの本を紹介します。 本書はヤフー株式会社の現役のフロントエンドエンジニア陣が惜しげもなく、実際に業務で使用されているHTML/CSSの記述ルールやテクニックをベースに、より多くの制作現場で利用できるよう解説されたものです。 大規模サイトはもちろん、小規模サイトやランディングページなど、一つのプロジェクトを制作する上でSassをつかった実践的なCSS設計について学ぶことができます。
今どきデザインはこれ！拡散型シャドウの基本から作成方法まで（PSチュートリアル + HTML/CSSスニペット付）
最近ウェブサイトやUIデザインなどを見ていると、ふわりと浮いているような奥行き感を表現しているものがあります。これは拡散型シャドウ（英: Diffuse Shadow）と呼ばれる新しいグラフィックトレンドで、2016年に入って多く見かけるようになっています。 今回は、この拡散型シャドウの基本的な使い方や、PhotoshopやHTML/CSSなどによるさまざまなデザイン方法を、参考にしたいUIデザインと一緒に見ていきましょう。 拡散型ドロップシャドウって何？ 英語でもきちんとした名前はまだ決まっていないようですが、この拡散型シャドウ（英: Diffuse Shadow）と呼ばれるこのテクニックは、通常のドロップシャドウに比べ、奥行き感をより表現できます。フラットデザインから派生したスタイルのひとつとも言え、今のデザイントレンドを反映しています。 Image Source: VOID Conf
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ
HTMLとCSSを中心にデザインされた、注目を集めたいときにぴったりな最新ボタンエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 CSS3が主要なモダンブラウザに対応したことから、アニメーションを加えたり、スタイリングの幅がグッと広がっています。加速するウェブデザインの進化において、これからますます楽しみな分野で、他と差の出るテクニックと言えるでしょう。 詳細は以下から。 コピペでラクラク、押したくなるボタン用HTMLコードスニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Fancy Button CSSのみでホバーエフェクト用ドロップシャドウとして適用した、今年のデザイントレン
input[type='date']の見た目をCSSで変更する - R42日記
Chromeでは、inputのtypeとしてdateやdatetimeを指定すると、ネイティブのdatepickerを使えるようになります。 これまではjQuery-UIなどを使って実現していたわけですが、それがもう不要になるわけです。近い将来、他のブラウザでも対応されることは確実でしょう。 しかしこのChromeネイティブdatepicker、見た目が若干よろしくありません。 デフォルトではこんな感じになります。 …まあわからなくも無いですが、以下の点が気になります。 ”▼”が微妙。カレンダーのアイコンにすべき。 「年」「月」「日」は不要。区切り文字のスラッシュとカレンダーのアイコンがあれば年月日の入力であることは自明。 スピンボタンは邪魔。使う必要性が思い当たらない。 最近、『いかに最小限の視覚要素で、ユーザーの認知を得るか』を考えることが、UIデザインであると思っています。 というわ
Androidしか出来なくて辛いのでHTMLの初歩からWebフロントエンド技術に入門し直した - みんからきりまで
最近ずっとJavaScriptをやってた。 JavaScriptをやってる理由は色々ある。 僕は仕事ではずっとJavaとAndroidで、他の言語やプラットフォームは入門的な事は色々やって来たが、ちゃんと出来ると言えるものが他にないので単純にもっといろんな事が出来るようになりたい。 JavaScriptが出来ればWebでちょっとしたサイトやサービスを作ったりしやすくなるし、ElectronやReactNativeなどWebの技術を他の分野で使用する流れがあるので色々と便利そうだ。 はてブやQiitaでよく読むフロントエンド関連の記事をもっと楽しめるようになりたいというのもある。 あと、Androidの世界でも日々いろいろな思想や技術が入ってきていて、そういうものに触れた時にAndroidだけやっていてはもっと広い視点で技術の動向を追っている人にはキャッチアップの速度でも理解度でも敵わないな
レスポンシブWebデザインでiPad向けにPC表示を見せるときの注意点
当サイトは通販サイト・外部Webサービスへのリンクの一部にアフィリエイト広告を使用しています レスポンシブWebデザインでiPad向けにPC表示を見せるときの注意点 2016年4月9日 B! ※ この記事は2016年に作成したものです。記事内では当サイトで確認した表示不具合についての対処法を紹介していますが、当時はデスクトップファーストでスタイルシートを作成していました。その後、当サイトのスタイルシートは見た目を変えずにモバイルファーストで作り直しており、その際に記事内のテクニックは用いていません。 ※また、記事内にある「meta viewportを設定しない」に関しては、iPadOS13以降（2019年～）のSafariでは、それ以前とは挙動が異なり、デフォルトのサイト閲覧時（「デスクトップ用Webサイトを表示」がON）は「meta viewport」設定の有無に関わらず、ページは水平ス
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
METAタグ活用完全ガイド noindex nofollow noarchive unavailable_after など使い方まとめ
METAタグ活用完全ガイド noindex nofollow noarchive unavailable_after など使い方まとめ 検索エンジンのクローラの動作や行動を制御するためのロボット排除プロトコル（REP、Robots Exclusion Protocol）の中でも、robot meta タグを用いた方法の紹介です。2015年1月1日時点でサポートされているものを紹介しています。 nositelinkssearchbox などSEO担当者に関連するMETA要素も含んでいます。 以下、基本的な知識と、noindex, nofollow, nositelinkssearchbox, notranslate, noarchive, nocache, nosnippet, noimageindex, noodp, unavailable_after について個々のMETAタグの機能と役
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML特殊文字一覧（数値参照・文字参照） – atomicbox
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
