記事一覧
アルファベットを振ったliの中にulを入れたい。
liの前に
a.b.
とアルファベットを振りたいなあと思いました。文章が長くなり改行された際に「a.」の下に文字の回り込みが嫌だったので、文章自体はpadding-leftで左側に幅を取って、後付けのようにアルファベットを振りたいと思いました。
list-style-type: lower-alphaの記述方法を見つけたのですが、reset.cssにlist-style-type: none
【さくらのレンタルサーバ】FileZilaを使ってみた
お久しぶりです。ひとみーるです。
早速ですが、今回制作したサイトを「さくらのレンタルサーバ」を使用して、FileZilaでアップしました。
いつもは「ロリポップ！」のロリポップFTPを使用しているのでFileZilaを使用は不慣れだったのです。
FileZilaの使用方法は分かり易い説明が記載されているサイトがありますので、そちらをご参考ください。
「【FTPソフト】FileZillaの使
faviconを作る！設定する！
一目見ただけで何のサイトか判断できる「favicon」の設定は必須ですね。パソコンでサイトを開いたときのタブに表示されるマーク。スマホでサイトをホームに置いたときのアイコン。あれです。HTML、CSS、JavaScriptを書くだけでもいいのかと思いきや、その他諸々の重要な作業がありますね。faviconはその中の一つです。いわばサイトの顔。
どんなサイズで作ればいいのか？どのように設定すればい
jQueryスライダープラグイン「ItemSlide.js」
スライダーに種類は様々ありますよね。自動的に画像が移り変わったり、左右に表示された三角のボタンを押すと隣の隠れた画像を表示するなど。
私が「こんなサイト作りたい！」と思ったのは下記サイトになります。中でも気になったのは商品一覧の表示方法がかっこいい・・・！と思いました。
「FIL - SUMI LIMITED」https://sumi.fillinglife.co
画像そのものをつまみ、スラ
head内の必要タグ、OGP設定
head内に色々と書いてあるのは分かるが、何を書けばいいの状態。ちゃんとまとめていただいている記事がありましたので共有します。
またhead内にはOGP設定、つまりTwitterやFacebookなどSNSで共有した際に自動的にタイトルや画像が出てくるあれです。URLペーストしただけでポヨン、とカードが出てきてサイトの名刺のようなものの設定も行わなければなりません。
まずは基本的なところ、また
overflow-x:hiddenの邪魔をするposition:absolute
jQueryスライダープラグイン「ItemSlide.js」を使用し、画面をはみ出る分は非表示にするためoverflow:hiddenを指定。しかし何故か横軸のコンテンツ幅を打ち抜いておりました。
ググってみると解決方法が２つ出てきました。
１、全体を包むwrapperを作り、overflow-x:hiddenを指定する
２、子要素にposition:absoluteがある場合は親要素にpo
background-attachment:fixedはiOSでは機能しない。
背景固定をさせた方は誰しもが失敗するのではないでしょうか。background-attachment:fixedの落とし穴。「最初から教えてよーー！！！！」と感じた失敗について書いていきます。
background-attachment:fixedを使えば簡単に背景固定ができますが、実はiOS対応していないので実機(スマホ)で確認するとえらいことになっています。ですが疑似要素でposition:
HTML、CSS、 JavaScriptでは終わらない！
WEBサイトを制作する際にHTML、CSS、JavaScriptを書き終えたからといって安心はできないんですよね。サイト完成！と思ったあと、下記設定を行いました。
・ファビコン
・OGP
・Google Analytics
・Google Search Console
・Google reCAPTCHA(問合せページをPHPで書いていたため)
こんなもんでしょうか？レスポンシブ対応はし
https化にはリダイレクト設定
サーバーはロリポップを使っています。独自SSLが無料なので、ロリポップのマイページから設定するも、なぜかサイトは「http://〜」のまま。
なぜ・・・
ググったところ、下記サイトが非常に役に立ちました。
「常時https化に必須、リダイレクト設定方法。ロリポップでの事例！ | 便利なデジタル生活」https://digital-life.club/hp/redirection-to-htt
「モバイル ユーザビリティ」関連の問題が検出されました
Google Search Consoleより突然メールが届きました。警告の内容は以下になります。
・コンテンツ幅が画面の幅を超えています
・テキストが小さすぎて読めません
・クリック可能な要素同士が近すぎます
WEBサイトを公開してから１ヶ月、今まで何の通知もなかったので焦りました。
早速ググったところ、修正方法を記載してある記事を見つけました。
「コンテンツの幅が画面の幅を超えてい
「やりたいこと？」「軸？」迷える就活生へ
初めまして、ひとみーるです。
そして明けましておめでとうございます。
この時期になると就活に焦っていた自分を思い出します。
「学歴フィルター」なるものが存在しておりましたが、一応フィルターには引っかからない程度の大学に通っておりました。そのため、周囲の「意識高め」の学生を見ては焦って、見かけだけの就活をしていました。
インターンに参加してみたり、合説に行ってみたり。
周りから見れば私も「