Hatena Blog Tags
はてなブログ トップ
CSS HTML
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

CSS HTML

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
つきすけ　の　コーディング記•5ヶ月前

CSSで画像をコインみたいにくるくる回転させてみたい

トップページにコインのように画像がくるくる回っていたらおしゃれなのではないだろうか。 しかも！ 裏表違う模様の画像で。ただ「ペラペラでいいので」簡単に。 3DCGとかいう話が出てくると、大変だから。 ※挑戦したけれど、CSSだけで厚みを付けることはできなかった。 結論 CSSのanimationプロパティで、Y軸をrotateする秒数を良い感じにずらす <div id="images"> <img id="img1" src="./画像１のパス"> <img id="img2" src="./i画像２のパス"> </div> #images > img { opacity: 1; displa…

#HTML#CSS#CSS animation#CSS HTML

ネットで話題

もっと見る
3606ブックマークWeb制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳e0166.blog.fc2.com
2161ブックマークHTML5+CSS3 入門yoppa.org
1365ブックマークより早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.netkachibito.net
1330ブックマーク令和のHTML / CSS / JavaScriptの書き方50選zenn.dev
1303ブックマークcan I use... Support tables for HTML5, CSS3, etcTest a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the res...caniuse.com
1268ブックマークプログラム組んだら負け！実はHTML/CSSだけでできること2015夏www.slideshare.net
1267ブックマーク初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまでWebを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを...webdesignrecipes.com
1246ブックマークHTMLとスタイルシート（CSS）の業務スキルレベル　判別表　（５段階） - 主に言語とシステム開発に関してlanguage-and-engineering.hatenablog.jp
1176ブックマークIE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎kojika17.com

関連ブログ

どんブログ•1年前

CSS・HTML｜ヘッダー画像の端が切れる時の対処法（レスポンシブ）

おはこんばんちは。 はてブのサイトリニューアルでのCSSいじりもやっと一息ついたところで、備忘録としてサイトのデザイン、上から順番にどんなコーディングにしたのかどんな苦労があったかを記していこうと思います。 本日はヘッダー画像についてです。 実はこれに一番苦労させられた。 ヘッダー画像 自作のこのいぬかわいい とくにしっぽ うそ、全部（自画自賛） この記事のCSSを貼り付ければ、最終的にこういう見た目になります。 完成形 ではいってみよぅやってみよぅ はてなブログのデフォルトテーマ「Smooth」を使用 まず前提として使用しているテーマですが、デフォルトテーマの「Smooth」です。 シンプル…

#はてなブログ#サイト構築#CSS HTML#対処法#ヘッダー画像
灯りの下で書いたのかもしれない、はてなブログ版•1年前

はてなブログの写真キャプションを調整する（左揃え・行間を詰める/コピペ可）【HTML控え】

はてなブログの写真キャプションって、文字数が多いと見た目や可読性がイマイチになりませんか？ 文字がセンタリングされちゃうなーとか、行間がパラついてるーとか。 今回は、はてなブログの写真キャプションを調整する（左揃え・行間を詰める）HTMLコードを載せました。体裁を直したい画像にだけピンポイントで使えます。

#HTML & CSS#行間#キャプション#CSS HTML#写真
hatebcustom•2年前

【テキストが横に流れるcss】ブログタイトル下の文字に実装させる

バナー（リンクなし） みなさん、こんばんは。ハテブカスタムです これを流したい→ 「はてなブログ初心者によるブログ初心者のためのブログ」 ←これを流したい バナー（リンクあり） これは宣伝→ 今月公開 絶賛上映中！ 【新着情報】お知らせテキストをここに入れてください！ こちらの記事を参考とさせていただきました。 web-dev.tech テキストが横に流れるCSSを使用して、ブログタイトル下の文字をスクロールさせてみたいと思います。以下がコードと説明です。 テキストが横に流れるCSSの実装方法: HTMLの適切な場所に以下のようなコードを追加します。ここでは、<div> 要素でテキストを囲み、…

#カスタマイズCSS#ブログカスタム#CSS HTML
urakatahero“B”log•2年前

ブログのデザインを大幅にカスタムし、スマホ向けに特化させたらPVが少し増えました。

ブログのデザインをスマホフレンドリーに改良したらPVが増えたので、アクセス数になやむブロガーにCSSを用いたデザインの改良をオススメします。

#はてなブログカスタム#はてなブログ#CSS HTML#スマホ向け
kent備忘ログ•3年前

6月の学習を振り返って

月の変わり目なので、前回と同じように先月の学習を振り返ってみようと思います。 6月上旬 Linuxの基礎コマンドを学習 前月からの続きで、定番教材のLinux標準教科書に沿ってファイルシステム、パーティションの管理. apt、yumコマンドによるパッケージ管理を学習しました。 Git Pull Request、GitHub flow学習 チーム開発において、レビュワーに作成したコードを確認してもらうPull Requestの方法、プログラムを、安全に効率よく開発を行うことができるGitHub flowについて学習しました。 中でもGitコマンドでの動きをGUIで確認しながら学習できるLearn…

#プログラミング#CSS HTML
トラストバンクテックブログ•3年前

CSS擬似クラス関数 :is()が便利で使いやすい！

トラストバンク開発部・フロントエンドチームの君田（きみた）です。 本日はCSS擬似クラス関数である:is()について気になったので記載していきます！ CSSの擬似クラス関数:is()とは？ CSSの擬似クラス関数:is()とは、引数にCSSのセレクタを渡すと、その条件に一致した要素を選択することができる便利なCSS擬似クラス関数です。 今まで1つ1つ記述していたCSSをまとめて記載できるようになるので、かなりスッキリ記載することができてハッピーになれそうですね。 基本的に現在使用されている主流なブラウザでは対応しているので、問題なく使用できそうです。 developer.mozilla.org…

#CSS#CSS HTML#フロントエンド#フロントエンドエンジニア#フロントエンド開発
らいちのヒミツ基地•3年前

【css】Flexからgridレイアウトへ

IE11のサポートが切れた今、そろそろgridレイアウトを積極的に導入でるようになりました。flexレイアウトからgridレイアウトへの移行をデザイナー観点で簡単に使うとこだけ解説します。 gridレイアウトの利点 gridだと列数だけでなく行数も指定しないといけないと思われがちですが、実際は列数の指定だけで行が増えても繰り返してくれます。どっちが行だか列だかわからなくなったときはテキストを思い出してください。 テキストエディタで行番号をふれるのが行です。gridのメリットは色々ありますが、flexboxレイアウトより優れている点は下記の三点です。 親要素で子要素のサイズを制御できる 子要素側…

#CSS HTML#grid
おカエる。•3年前

Webデザインのおべんきょうをする①

10/30から地元で新しく開業した、Webデザインコースの受講を開始しました。 開始するきっかけとなった記事はこちら↓ kapocola.hatenablog.com 本業をしている身なので休日のみですが、ガッツリ初日からやって参りました。 13：00～20：00計7時間です。途中眠気やばかったけどトイレ休憩以外休憩挟まずみっちりご指導いただきました。 講師の方の教え方がうまくて、凄い楽しかった！ 復習がてらブログにその時の内容を綴っていこうと思います。 こちらの基本的なやり方としては自分の好きな本(教材)を1冊購入し、それを元に教えてくれる。で講師の方でKindle版を購入し、大画面で教える…

#Webデザイン#勉強#HTML5#CSS HTML#SEO
トラストバンクテックブログ•3年前

JavaScript不要！？cssのline-clampでテキストを省略表示！

トラストバンク開発部・フロントエンドチームの君田（きみた）です。 本日はテキストの省略表示に使用することができるcssプロパティ「line-clamp」について書いていきます。 最近業務で業務で使用する機会があり、大変便利で感動を覚えたので是非記事にしようと思いました。 これまでのテキスト省略方法 トラストバンクではこれまでテキスト省略をする場合には、JavaScriptを使用して実現していました。 主に以下の様なコードを使用していると思います。 省略対象の文字数が50を超えた場合、50文字以降は省略し、51文字目に「...」を加えて表示するサンプルです。 const omitTexts = …

#HTML#CSS#CSS HTML#フロントエンドエンジニア#フロントエンド開発#省略する