擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
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年10月時点の調査。
htmlリストの正しい使い方を覚えよう！箇条書きまとめ
htmlリストタグの正しい使い方の紹介です。 グローバルメニューなどに使われる事が多いリストタグ（ulなど）ですが、 なんでリストタグを使うと思いますか？ 見た目のためだけなら、pタグを使っても全く同じデザインにできます。 でもpタグじゃダメなんです。 このページでは 「なぜリストタグを使うのか？」 「リストタグの使い方（ul、ol、dlなど）」 「間違った使い方と正しい使い方」 など箇条書きについてまとめましたので紹介してきますね。（詳しくは目次をご覧下さい） まずはリストタグの使い方からご紹介します。 目次 htmlリストタグの使い方を覚えよう！ ulタグの書き方と使い方 olタグの使い方を覚えよう！ dlの書き方と使い方 箇条書き（ol・ul・dl）のデザインについて なんでリストタグ（箇条書き）を使うの？ htmlリストタグの使い方を覚えよう！ htmlのリストタグは大きく分けると
WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろ
WordPress をカスタマイズするなら覚えておきたい条件分岐タグと、カスタマイズにとっても便利なカスタム投稿タイプについて、簡単にまとめてみました。 WordPress をカスタマイズするなら、必ずと言っていいほど使うのが条件分岐タグ。ブログとして Webサイトを構築するなら、とってもよく使う … というほどではないかもしれませんが、一般的な Webサイトを WordPress で構築していくとなると、動的な Webサイトであればあるほど、条件分岐タグはよく使います。 また、話は変わっちゃいますけど、WordPress 3.0 から本格的に採用された新機能、カスタム投稿タイプも、WordPress でのサイト構築にはかなり便利です。おなじみの条件分岐タグから、カスタム投稿タイプ、タクソノミーまでを、メモっぽくまとめてみました。 WordPress サイト構築 Tips 目次 WordP
新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ
未経験からWebデザイナーに転職して、2年目に突入しました。 1年間チャレンジしてきて、数々の失敗をしましたし、注意も沢山して頂きました。まだまだ勉強が足りないなぁと思う次第です。 新人でなくなってしまうので、指摘されたこととその反省、2年目の目標を書き残しておきたいと思います。 おそらく皆様から見ると、当たり前すぎて書く程でないものも沢山あるでしょう…。 「無知の知」ということで、私も1年後には、そのような気持ちで読み返せるよう、しっかり勉強したいです。 関連記事 コーディングが苦手なWebデザイナーにおすすめしている独学方法 - IT系女子ログ 実務経験3年すぎた現役Webデザイナーのリアル【コーディングスキル編】 - IT系女子ログ コーディング環境 スライス スライスする前にコーディングの目安をつける デザインがズレていると感じたら必ずデザイナーに確認する スライスの名称に使用する
![新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d5ae2b3c18cdfce1c52a18e478f9b90463e0122/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftosssaurus%2F20150321%2F20150321135745.jpg)
SEO のために rel 属性を指定する
icon や stylesheet などは一般的な利用方法で良いですね。 意識して指定しておきたい値は、author, bookmark, licenseです。 ほとんどのサイトがそのテンプレート (Ex.ヘッダ、フッタ、一覧など) にこれらを指定するべきコンテンツを持っていると思います。 著作権情報や管理者を author や license によって明確にし、 普遍的なページへのリンクは常に bookmark を付けておくようにしたいところです。 また、いくつかの属性値は Google などの検索エンジンが特別な処理を行うので注意が必要です。 例えば nofollow は特別な処理が行われます。特別な処理が行われる属性値については後に続く項目で言及します。 検索エンジンにおける "nofollow" nofollow は公式には次のようにされています。簡易に翻訳すると次のような感じでし
webnonotes.com - webnonotes リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値（absolute）と相対値（relative）の二つです。 絶対値（absolute） 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値（relative） 相対値はサイズ自体の値を持っていません。サイズは親要
![[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1756c6abf56af6fcc3bd951dc8836bd403779c8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060501.png)
HTML-特殊文字
ＨＴＭＬ特殊文字一覧は、ホームページ作成時に特殊な文字を使用したいときに利用します。たとえば、ブラウザは通常、複数空白を詰めてしまいますが、ここで空白がほしいときには、 と記述すると空白を挿入してくれます。また、ＨＴＭＬファイル内にいきなり "<" を書くとタグの開始とみなされますが、文字として＜を書きたいときには ≷ と記述します。 使用頻度の高いのは、 " & < > © です。
タグの入れ子ルール
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
たった3行で実現できるCSSの上下中央揃え（Flexbox） - Qiita
【Atom】ショートカット（Win・Mac）とおすすめパッケージ - Qiita