少しのコードで実装可能なHTML小技集
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント
ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！ 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように！ 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に！ バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう！ これら一
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」:phpspot開発日誌
h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」 HTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基本的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ！というデザイナーさんは覚えておくとよさそう
10人のデザイナさんに駄目出しして頂きました:Geekなぺーじ
10名のデザイナの方々に「Geekなぺーじ」デザインダメだしをして頂けました！ 何か凄く豪華な会合をして頂いて非常に恐縮です。。。 昨晩早速いくつかサイトデザインを変更してみました。 以下に、会合は開催された経緯、そこでの指摘、昨晩の変更点を述べます。 会合が開催された経緯 「Geekなぺーじのデザインは駄目だろう」とずっと思っていたのですが、「どうすれば駄目ではなくなるか」に関してどうして良いのかが全くわからないという日々が数年間続いていました。 そして、キッチリとしたサイトを作れる方々に対する憧れというものがありました。 ある日、twitterで何度かやり取りをして、その後某新年会でお会いしたcremaさんが過去の勉強会資料(デザイン勉強会の資料を公開します。)を教えてくれました。 それを見て「これはすごい」と思ったのですが、「じゃあ、この考え方を自分のサイトに適用したらどうなるの？」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
HTML5の可能性を体験できる、すごいサイトのまとめ