リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
HTML5のお勉強 articleとsectionとか - Qiita
前回に引き続きHTML5の勉強。 めっちゃわかりやすい記事があったのでこれ見よう。 構造化タグ HTML5の特徴の1つとして構造化タグと呼ばれるものがある。 今までのHTMLでは、 <html> <body> <div id="header">...</div> <div id="nav">...</div> <div id="container">...</div> <div id="footer">...</div> </body> </html> 上記のようにユーザー側が構造を決め、（おそらく多くは）<div>にidやclassで構造名をつけ、 「ここからはヘッダ、ここからはフッタ…」といったように分類していたが、 HTML5では構造化タグと呼ばれる新しい要素（タグ）が追加され、 「ヘッダは<header>で囲み、フッタは<footer>で囲む」など、構造が明確になったといえる。 つ
エンジニア必見！Webデザイン・制作に役立つサイト26選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
マガンダング ハーポン！最近エンジニアに転職したひろゆきです。 詳しくはこの「フィリピンでプログラムと英語が学べる、ギークスキャンプがスゴイ！！」を読んでください。 今回はLIGエンジニアチームが普段情報収集の際に活用しているサイトをまとめてみました。俺のように最近エンジニアデビューした方は必見です！ WordPress関連（プラグインの検索、関数の解説など） ■WORDPRESS.ORG 日本語 http://ja.wordpress.org/ WordPress公式の日本語サイトです。フォーラム見たり、プラグイン検索に便利です。 ■WORDPRES.ORG 英語 http://codex.wordpress.org/ WordPressの公式リファレンスサイトです。WordPressの関数だったりフックを探す時に使います。英語ですが、情報量は日本語サイトよりも多いです。 ■WORDPR
HTML5とHTML4の違いとは？改めて知っておきたい基礎知識
「HTML5という言葉はよく聞くようになったけど、今までのHTMLとどう違うのかよくわからない」 このように思われている方は少なくないのではないでしょうか。PC、スマホ、タブレットと、ホームページを閲覧するデバイスが多様化した今、ホームページ制作にはHTML5を使うのが合理的です。 今回は、HTML5の基礎とHTML4との違いをご紹介します。 HTML5とは HTML5とはHTMLのバージョン5、つまり改訂版第5版の事を指しています。 最初のHTMLが開発されたのは1993年。そこからバージョンアップを重ね、現在メインとして使われているHTML4が開発されたのは1999年12月でした。 今回ご紹介するHTML5が勧告されたのが2014年10月28日です。 2016年8月現在では、ほとんどのブラウザで対応しておりますので問題なく利用できるでしょう。 HTML5で作られているホームページの事例
Mojik
Mojikという、ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリを公開しました。いまのところ、以下のパターンでの「アキ」を調整できます。 連続する約物のアキ 行頭の始め括弧のアキ 欧文間のアキ Mojik.compose()メソッドの引数にCSSセレクターを渡すと、マッチする要素から上記に該当する箇所を検出し、それぞれマークアップが挿入されるので、CSSでアキ量を調整します。以下のページに実際に動いているデモがあるので、ぜひ見てみてください。 Mojikデモ ウェブページの本文やタイトルなどで使われることを想定しているので、HTMLタグがあっても問題なく動作することは必須条件でした。基本的に、まずHTML文字列をテキストとタグに分けて、正規表現でテキストの検索を繰り返す、という方法を採っています。ここらへんはkotarok/jQuery.waokonなど
タグの入れ子ルール
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【html】spanタグの使い方！divやpとの違いもわかりやすく解説
htmlを勉強中の皆さん・コーダーのみなさん、こんにちは。都内でフロントエンドエンジニアをしているきむらです。 今回は、htmlのタグの1つであるspanタグについての記事です。何となく文字装飾につかっていることの多いspanですが、意外とdivタグやpタグとの区別がついていないまま使用していたりします。 このブログを読み、spanタグの基礎知識をきっちりとおさえ、効果的で可読性の高いコードを量産できるコーダーに、また一歩近づきましょう。 htmlのspanタグの概要 さて、ざっくりとspanタグについて押さえておきたいと思います。 まず、使用例です。spanタグは、文字を装飾したい時によく使われるタグです。たとえば、 [html] <div> 普通の文言。 <span style=”color: red; font-weight: bold;”>赤く強調したい文言。</span> 普通の
【Boostrap入門】オシャレでレスポンシブなポートフォリオサイトの作り方
どうも初めまして、Webエンジニアのイソップ（@yuhiisk）です。 レスポンシブサイト制作では、ノウハウが必要だったり、確認や検証に時間がかかったりと、簡単そうに見えて実は大変です。 しかし、そんなにノウハウがなくても、Bootstrapを使えば効率的にサイトが作れてしまいます！ 今回は、Bootstrapを使って実際にポートフォリオサイトを作ってみましょう。 Bootstrapとは？ そもそもBootstrapは、CSSフレームワークと呼ばれるCSS、JavaScriptのパーツ集です。 Bootstrapの中にはボタンやナビゲーション、ドロップダウンメニューなどがはじめから用意されていて、それらを組み合わせることで、「簡単に」「早く」「効率的に」Webサイトを作ることができます。 また、モバイルデバイスを含めたマルチデバイス対応を考慮されているため、レスポンシブデザインのサイトを作
君はHTML5の contentEditable 属性を知っているか ｜ Tips Note by TAM
知っている方には、すみません。 HTML5 には contentEditable という属性がありまして、この値が true だと、その要素はブラウザ内で編集可能となります。 ちょっと試してみましょう。 <div contentEditable="true">ここは編集できる</div> ↑ ここは編集できるのです。(ただの <div> 要素なのですが！) 編集内容はどこかに保存されるわけではないので、ブラウザをリロードすれば元に戻ります。 body要素に contentEditable 属性をつけてみる さきほどのボタンでは、クリックすると JavaScript が実行され、<body> 要素の contentEditable 属性を変更しています。結果、ブラウザで表示されるすべてが編集可能になるのです。 JavaScript コードはこんなかんじ。 javascript:(functi
WordPressの上部に出る空白行 / ウェブデザインライブラリー
投稿日：2015年12月18日 このチュートリアルではWordPressの上部に出る空白行についてを紹介します。 Step1 ： はじめに Step2 ： コードを確認 Step3 ： ファイルを調べる Step4 ： 問題が起きてしまった例 Step5 ： 最後に
ワンランク上のコーディングを行うための6冊のオススメ本
HTML/CSSは、初心者でも簡単に使えますが、運用するとなると綿密な設計が必要です。 最近、自分の知識をアップデートするためにいろいろ調べたのですが、知識不足を実感し、あらためてHTML/CSSは奥が深いと感じました。 コーディングをレベルアップや見直す上で、参考になった本の紹介です。 HTML5マークアップ 現場で使える最短攻略ガイド カルタ付 HTML5マークアップ 現場で使える最短攻略ガイド (WEB PROFESSIONAL) セマンティックなマークアップが求められますが、この本を読むことで今まで曖昧な部分が明確になりました。特に質問されても曖昧にしか答えられてなかった、アウトラインについての解説があるのがありがたかったです。コーディングを極めたいと思うなら、最初に読んでおくといいです。 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の
PSDデザインカンプのスライス不要！DreamweaverでのHTML/CSSコーディングを爆速化する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
PSDデザインカンプのスライス不要！DreamweaverでのHTML/CSSコーディングを爆速化する方法 こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 僕の主な業務は、Webや紙などのさまざまなものをデザインしていくことなのですが、最近は今まで以上にマルチな動きを求められるようになりました。 何事もそうですが、自分自身が次のステップにいくためには、今までと同じ時間の使い方をしていたらいけません。 つまりは「効率化」することが必須になるわけです。 そこで今回は、アドビさんにお聞きした「WebデザイナーがDreamweaverのExtract機能を使って、PSDファイルから効率よくデザインする方法」をご紹介させていただきます。 そもそもExtract機能とは？ Dreamweaverは聞いたことあるけど、Extract機能ってなんぞ？！と、Extract機能を初めて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者がブックマークしておきたい、HTMLやCSSで困った時にチェックしたいリソースのまとめ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
HTML文法は本当に順守すべきなのか？ | ニトなび
ちゃんとしたサイトがGoogleさんで正しく検索してもらえるようなSEO対策 | バニデザノート
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP