記事内のテキストや掲載したコードをコピーするためのコピーボタンを導入する方法
サイト内で「〇〇を検索してください。」とご案内したり、エクセルマクロのコードやCSS、JavaScriptなどのコードを掲載しているときに、ボタンひとつでコピーができると、使い勝手のいいサイトだと思います。 ためセル！でも、下の例のようにエクセル関数をご紹介するときには、コピーボタンが表示されるようにしています。 =SUM(A1:A10) ということで、このページでは記事内のテキストや掲載したコードをコピーするためのコピーボタンを導入する方法についてご紹介します。 スグにためセル！ – ここを読めばすぐ使える コピーボタンを追加する方法 Step1JavaScriptコードをコピペする ここをクリックしてJavaScriptコードに移動 Step2CSSをコピペする ここをクリックしてCSSに移動 Step3コピーボタンをつけたいテキストを<span class=”cpytext”></s
【CSS】文字に色々なデザインの下線を引く（点線・波線・二重線・蛍光ペン風など）
今回は文字にさまざまなデザインの下線を引き方をまとめます。おしゃれで文章の強調に使えるような下線も紹介していくので、気に入ったものがあれば是非コピペして使ってみてください。 1.【初心者向け】下線を引く手順 はじめにCSSの指定方法を解説するので、すでにご存知の方は読み飛ばして頂ければと思います。 スキップ 文字に下線を引く方法は大きく分けて、以下の2パターンがあります。 1つずつ解説していきます。 方法1: HTMLに直接書く（インライン） いちばん簡単な方法です。以下のように指定します。 <span style=”下線のCSSコード”>下線を引きたい文字</span> ①下線を引きたい部分をspanタグで囲って ②style=””の中にCSSコードを書けば良いわけですね。後ほど各下線のCSSコードを紹介していきますので気に入ったものをコピペして入れましょう。たとえば、いちばん無難な下線
HTMLのみで実装できるアコーディオン | 車いすなコーダー
JSもCSSも使わずにアコーディオンが実装できる時代になったのですね（※IE, Edgeは現時点でNG）。 details>summaryという組み合わせがアコーディオンのセットとなり、HTMLを記述するだけでクリック開閉可能なアコーディオンが実装されてしまうのです！ <details> <summary>ラーメン</summary> ラーメンとは、中華麺とスープを主とし、様々な具を組み合わせた麺料理。漢字表記は拉麺、老麺または柳麺。別名は中華そばおよび支那そば、南京そばなどである。中華人民共和国や中華民国では日式拉麺または日本拉麺と呼ばれる。 </details> <details> <summary>焼肉</summary> 焼肉とは、牛・豚などの肉を焼いたもの。また、肉や内臓にタレをつけ、直火で焼きながら食べる料理である。 </details> <details> <summary>
スマホサイトで要素を横並びに並べるときに絶対使うべきCSS3（box-sizing） - ライフボックス
こんばんは！最近スマホサイトを持つことが当たり前になってきていますが、みなさまいかがですか？ スマホサイトを構築する際、要素を横並びにしたりする場合があると思うのですが、 なんか意図しない感じで隙間ができてしまう。 横幅ピッタリで4個要素を入れたい！ なんていう場合が想定出来ると思います。 そんな時に便利なCSS「box-sizing」についてご紹介したいとおもいます。 box-sizingとは？ box-sizingはボックスサイズの算定方法を指定できるCSS3のプロパティです。比較的新しい要素ですね。 content-box パディングとボーダーを幅と高さに含めない（初期値） border-box パディングとボーダーを幅と高さに含める inherit 親要素の値を継承する 例えばどんな感じでつかうか？ 具体的にどういうことかというと、 例えば リストタグを横に4つ並べたい 横幅ピッタ
スタイルシート［CSS］/CSSの基本/クラス名を使った指定 - TAG index
クラス名（分類名）を使った指定では、そのクラス名が付けられた要素にのみ、スタイルを適用させることができます。 要素のクラス名は、class属性で指定することができます。 .example { color: red; } 上記の例では、example というクラス名が付けられた全ての要素に、このスタイルが適用されることになります。 要素名に続けてクラス名を指定する方法と、クラス名だけで指定する方法があります。どちらの場合も、クラス名はピリオド（ . ）に続けて記述します。 p.example1 { color: red; } .example2 { color: blue; } .example3 { font-size: 80%; } example1、example2、example3 の部分がクラス名になります。 クラス名を付ける際には、以下の点に注意してください。 大文字と小文字の区
CSSでtable幅を設定するためのまとめ
CSSでtable幅を設定するためのまとめです。 以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあったので、このエントリーにまとめてみました。 うまくまとまっていなかもしれませんが参考になれば幸いです。認識誤りがありましたらどこかでつぶやいてください。 記事中で使ったサンプルの表示は、Firefox/Google Chromeで確認しています。 １．table要素に幅を設定 table要素にwidthプロパティを設定すると、th要素/td要素の幅は次のようになります。 th要素/td要素の内容の幅が同じ場合は均等割りつけ th要素/td要素の内容の幅が異なる場合は長さに応じて割りつけ th要素/td要素にwidthプロパティを設定した場合、table要素に設定したwidthプロパティの値を超えない範囲で適用 例として、次のtable要素を利用します。
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
CSSのみでレスポンシブなテーブルデザインを。
サンプルページ まずはサンプルから。 内容としてはCSSだけでモバイル環境の場合にテーブルのデザインを変えるというもの。 >>REDLINE MAGAZINE | レスポンシブ対応テーブルサンプル ネタ元のCODEPENページ。 >>A Pen by Captain Anonymous ソース 自分とこのサンプルからソース部分を。まずはhtmlソース。 <table> <thead> <tr> <th>イベント名</th> <th>開催日</th> <th>場所</th> <th>料金</th> </tr> </thead> <tbody> <tr> <td data-label="イベント名">なんたらイベント</td> <td data-label="日時">2015/04/08(水) </td> <td data-label="場所">大阪府大阪市どこどこ</td> <td data
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
HTML+CSSによるウェブページ制作例－CSSの基本
■HTML+CSSによるウェブページ制作例 ウェブページ制作の流れ 実際にXHTML+CSSでウェブページを作成してみましょう。 ウェブページ作成の流れは、大まかに以下のようなものとなります。 テキスト原稿を作成する フリーハンドのスケッチなどで、レイアウトのイメージを固める HTML・XHTMLのバージョンを決める HTMLタグで情報の構造付けをする 必要に応じて、<div>や<span>でスタイリングのためのタグ付けをする id属性やclass属性で各部分に名前を付けて、CSSのセレクタを設計する CSSでスタイル指定する レイアウトのイメージを固める ウェブページを作成する際には、まずテキスト原稿や掲載する画像などのコンテンツとなる情報を作成します。 それらをページ内にどのように配置するか、フリーハンドのスケッチなどでレイアウトのイメージを固めます。 今回作成するウェブサイトの完成イ
HTML内のid, classを一括抽出してCSSを作ってくれるサイト「extractCSS」 : 二十歳街道まっしぐら
extractCSSはHTMLからid, classを一括抽出できるサービスです。 HTMLのコードを貼り付けると、タグに付けられたid, classを一覧で表示してくれます。 CSS形式で表示されるので、HTMLからCSSを書き起こすときに便利そう。 また、直接style属性で付加されている内容はそのままCSSとして出力されます。 以下に使ってみた様子を載せておきます。 まず「extractCSS」にアクセスしましょう。 左側のボックスにHTMLを貼り付けます。 その後、右側のメニューから「Extract」すればおしまい。 このようにHTML内のid, classをまとめてCSS形式で出力されます。 HTMLでベースを作ってからCSSでデザインをしたいときなどに便利。 ぜひウェブ制作の際に活用してみてください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLクイックリファレンス
http://www.hp-stylelink.com/news/2013/10/20131001.php
1時間で作るホームページ