[B! web制作] seachelのブックマーク

無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】

『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。デザインカンプと完成版コーディングデータ付きです。この教材は制作会社の新人コーダーの教育にも使用されています。さぁ、楽しみながら一緒に勉強していきましょう♪

seachel 2022/04/27

web制作

リンク

2022年に最適なfont-familyの書き方 - ICS MEDIA

ウェブサイトのフォントは何を指定すればよいのでしょうか？　CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。結論いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,

seachel 2020/03/18

リンク

[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ

div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。 Centering horizontally and vertically in CSS float, transf orm, position, display:flex;などを使ったテクニックが紹介されており、ページの実装に合わせて、実装方法を決めるとよいでしょう。デモではsection要素がコンテナに、div要素が中央に配置されています。

seachel 2017/07/31

リンク

シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選

コーディング　Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ手書き風の見出しデザイン[01] このデザインのポイントは「border-radi

seachel 2017/07/11

リンク

【RGBカラー】メーカー別・蛍光ペンカラー表

初級ブログカスタマイズなどweb系知識メモ、Illustratorで作った無料素材を公開

seachel 2017/07/07

リンク

CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール

CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmicrodataやMetaタグなどのコードを簡単に生成できるオンラインツールを紹介します。コードごとに対応ブラウザも表示されるので、かなり便利です。

seachel 2017/05/30

リンク

https://www.ituore.com/entry/kaereba-yomereba

seachel 2017/05/04

リンク

LINE風の吹き出し会話が簡単にできるCSSを作ってみた（はてなブログ） - 夜中に前へ

こんばんは、夜中たわしです。今回は主にはてなブロガー向けの記事です。前回の記事のためにLINE風の表現ができるCSSを作ったんですが、それのやり方が知りたいという熱い声（1件）があったので、公開することにしました。他のサービスでも使用可能ですが、はてなブログ向けの導入方法として紹介します。紹介するCSSでできることできないこと制作背景・前置き注意事項 CSSにコードを追加（その1） CSSにコードを追加（その2）会話形式CSSを導入している場合使用方法おわりに紹介するCSSでできることこれから紹介するCSSでできる表現はこんな感じですなるほどしいたけ　しいたけそのしいたけの人は一体？わかりませんなんか料理が出てきたこのようにLINEのグループ会話、に近い表現ができます。補足：このしいたけは私が撮影したものです一応、画像じゃないですよ。テキスト部分など

seachel 2017/05/04

リンク

ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life

はてなブログだけでなく、アマゾンや楽天・ヤフーショッピングの商品を紹介する際にはブロガーのかん吉さんが作ってくださったサービス「ヨメレバ・カエレバ」を使うことで簡単にリンクを作成することができます。それらを綺麗に表示させるカスタマイズはもう出ているのですが、先日あるブロガーさんに会ったときにカスタマイズをしたら喜んでいただけたので、紹介したいと思います！参考リンク実装図カスタマイズの注意点カスタマイズ PC スマホレスポンシブその他のカスタマイズ最後に参考リンク今回のカスタマイズはほとんど今までやってこられていた方をちょっと変更したような形になっているため、あらかじめ参考リンクを貼っておきます。ありがとうございます！ shufulife.com 実装図実際に導入した様子はこんな感じになります。 PC スマホ PCでバランスよく表示させたのと、スマホではなるべくコンパ

seachel 2017/05/04

リンク

はてなブログでふい字が使えたのでメモ風cssを作ってみた - FOXISM

ほかにもタイトルだけで使っているといった限定的な使い方をしているものもあります。で、これらのcssを確認したところ、たしかにはてなブログに「ふい字」があるようです。ふい字の使い方 cssに以下を追加すればふい字を使えます。 @font-face{ font-family:HuiFontP109; src:url(/fonts/public/HuiFont/HuiFontP109.eot); src: url(/fonts/public/HuiFont/HuiFontP109.eot?#iefix) format('embedded-opentype'), url(/fonts/public/HuiFont/HuiFontP109.woff) format('woff'), url(/fonts/public/HuiFont/HuiFontP109.ttf) format('truetyp

seachel 2017/04/25

リンク

cssで作るシェアボタンのデザインパターン36種類 - FOXISM

cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。）記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。）というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの

seachel 2017/04/25

リンク

このブログのテーマをGitHubで公開しました - 九尾空間

ぬるかるです．最近は卒業研究で大忙しでした．さて，気まぐれですがこの「九尾空間」で用いているテーマを公開したいと思います． github.com 卒研発表直前で色々と忙しいので，現実逃避も兼ねてLESSで書かれていたものをpostcssで書き直したりなどしていました．これが一段落したら他の作業とかとも平行してテーマのリニューアルをしたいと思っています．ではではー

seachel 2017/04/15

はてブロ

リンク

CSSアニメーションで実現！コピペで使えるマイクロインタラクション - ICS MEDIA

マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。たとえば、FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。しかし、多様なマイクロインタラクションを一から自作するのは大変手間がかかるものです。本記事ではコピー&ペーストで導入でき、改変もしやすいCSSで表現したマイクロインタラクションを紹介します。こちらは筆者が制作したもので、商用・個人問わず無償利用できるMITライセンスで公開していますので、Webサイトやコンテンツ制作にご活用ください。「メニュ

seachel 2017/03/14

リンク

ガーリーなデザインの見出しのCSS　はてなブログへコピペで使えます。 - Minimal Green

ガーリーデザインシリーズです。見出しのデザインに使えるコピペCSSを用意しました。ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます - Minimal Greenとあわせてお使いいただくと良いかと存じます。以下ははてなブログの大見出し（h3）のclass指定にあわせていますが、セレクタを変更すれば他のブログなどでも使えます。ポイント文字や背景の色・font-sizeはお好みで変えて下さい。コピペで上手くいかないときはリセットCSSを。はてなブログの大見出しはh3ですが、もちろんh2やh4にも使えますリセット用CSS リボン風見出し上下ステッチななめストライプ背景+左ライン縦ストライプ背景+左ライン吹き出し上下ギザギザ手書き風枠+ずれた背景色角丸＋ダイヤアイコン参考リセット用CSSテーマのCSSと被ってうまく上書きできないときは

seachel 2017/03/13

リンク

ガーリーなデザインのソーシャルシェアボタンのCSS　はてなブログへコピペで使えます - Minimal Green

ストライブ柄とステッチ風のかわいい？シェアボタンを作ってみました。ガーリーデザインなブログカスタマイズにぜひどうぞ。このシェアボタンは過去にこのブログで公開したシェアボタンのHTMLと同じですので、CSSを変更するだけで着せ替え出来ます。レスポンシブデザイン対応。 blog.minimal-green.com こんな感じのデザイン FontAwesomeの呼び出し記事上か下に貼り付けるHTMLコードデザインCSS 参考リンクこんな感じのデザイン FontAwesomeの呼び出し headに貼り付けて下さい。既にどこかに記述済みの場合は必要ありません。管理画面→設定→詳細設定→「headに要素を追加に」以下のコード記述。 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.c

seachel 2017/03/13

リンク

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

seachel 2017/03/08

リンク

見てるだけで癒される！可愛い猫写真があるフリー素材サイトまとめ | 安全キャットフードNAVI

「犬派？猫派？」と聞かれたら迷わずに「猫派！」と答えるような猫好きの私ですが、当然の事ながら自宅で猫ちゃんを飼っています。もちろん、我が家の愛猫ちゃんも食べたくなるくらい可愛いんですけど、正直な話野良猫だろうが人の家の猫ちゃんだろうが猫カフェにいる猫ちゃんだろうがみんな可愛すぎるんですよね。本音を言えば常に色んな種類の猫ちゃんと触れ合っていたいんですけど、やっぱり時間と移動の労力とかを考えると、家で愛猫ちゃんと遊んでるのが一番・・・。がしかし、家にいても猫画像を探したり、猫動画を見て癒される日々を過ごしているのですが、最近はまっているのが「猫写真のあるフリー素材サイト巡り」。という訳で、今回は可愛い猫写真があるフリー素材サイトをまとめてみました♪ ぱくたそ有名フリー素材サイト「ぱくたそ」にも、当然の事ながら猫ちゃんの素材がいっぱいあります。ぱくたそのおすすめポイントが「写真がめ

seachel 2017/03/05

リンク

CSSのposition:stickyがすごく便利 | q-Az

最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic